Hemos visto gran cantidad de características del modelo de caja. Aquí descubriremos unos cuantos detalles más con algunos ejemplos.
Más detalles del esquema
Las propiedades de estilo como min-width y max-height pueden ser aplicadas a cualquier elemento. Las hemos añadido a botones y cajas de texto, también podemos añadirlas a espaciadores o cajas. Además, el atributo flex puede ser aplicado a cualquier elemento.
Ejemplo
<hbox flex="1"> <button label="Izquierda" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="Derecha" style="min-width: 100px;" flex="1"/> </hbox>
En el ejemplo anterior, los tres elementos se redimensionarán solos porque todos ellos son flexibles. Los dos botones indican un ancho mínimo de 100 píxeles, su tamaño nunca será inferior al indicado pero podrán crecer a mayor altura. Aquí la ventana debería aparecer con unos 200 píxeles de ancho, eso es suficiente para los dos botones. Ya que estos tres elementos son flexibles, pero no requieren un mayor lugar, la flexibilidad no agregará espacio extra.
Como se muestra en la imagen anterior, hay dos botones que se expandirán verticalmente hasta acomodarse a su contenedor, que en éste caso es un hbox. El atributo align controla este comportamiento en una caja horizontal. También puede prevenirse esta expansión insertando una altura máxima en los elementos o, mejor aún, en la misma caja. Si una caja posee una altura máxima, los elementos dentro de la misma serán ceñidos a ella. Sin embargo, el problema con esto es que se deberá conocer de antemano qué tan grande será el elemento. Lo siguiente muestra el ejemplo anterior con un atributo align establecido.
Ejemplo
<hbox flex="1" align="top"> <button label="Izquierda" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="Derecha" style="min-width: 100px;" flex="1"/> </hbox>
Para lograr esquemas complicados, generalmente se necesitará añadir cajas anidadas, especificar tamaños mínimos y máximos en algunos elementos, y convertir a ciertos elementos en flexibles. La mejor internase es la que puede ser exhibida en varios tamaños sin problemas. El modelo de caja podría ser difícil de entender sin antes realizar varias cosas por uno mismo.
A continuación una reseña de ambos tipos de cajas:
Cajas horizontales
- Sitúan sus elementos uno después del otro horizontalmente.
- Los elementos flexibles se flexionan horizontalmente.
- El empaque controla la colocación horizontal de los elementos hijos.
- La alineación regula cómo la fila de elementos es alineada verticalmente.
Cajas verticales
- Ponen sus elementos verticalmente en una columna.
- Los elementos flexibles se flexionan verticalmente.
- El empaque controla la ubicación vertical de los elementos hijos.
- La alineación regula cómo se alinea horizontalmente la columna de elementos hijos.
Pueden ponerse cajas en cualquier parte de un archivo XUL, incluso dentro de un elemento HTML como una tabla; sin embargo, el esquema estará parcialmente controlado por el elemento HTML. Esto quiere decir que el flex podría no funcionar exactamente como se desee. Recuerde que la flexibilidad solo tiene significado para elementos que se encuentran directamente dentro de una caja o de algún elemento que sea un tipo de caja.
Ejemplos
1. Utilización de espaciadores
<hbox> <button label="Uno"/> <spacer style="width: 5px"/> <button label="Dos"/> </hbox>
Aquí se utiliza un espaciador como separador entre dos botones, fijándole explícitamente un ancho de 5 píxeles. También podrían establecerse márgenes (usando la propiedad CSS margin).
Here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. You could also set margins (using the CSS margin property).
2. Centrado de botones
<hbox pack="center" align="center" flex="1"> <button label="¡Mírame!"/> <button label="¡Presióname!"/> </hbox>
Este ejemplo contiene una caja horizontal flexible con dos botones en ella. La caja posee el atributo pack que se utiliza para centrar los botones horizontalmente. El atributo align alinea los botones verticalmente. El resultado es que los botones estarán centrados en la caja en ambas direcciones. Este ejemplo también funcionará con una caja vertical, aunque el segundo botón estará debajo del primero en lugar de a su lado.
3. Una ventana de diálogo “Buscar texto�?
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="buscartexto" title="Buscar Texto" orient="horizontal"
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox flex="3">
<label control="t1" value="Texto a buscar:"/>
<textbox id="t1" style="min-width: 100px;" flex="1"/>
</vbox>
<vbox style="min-width: 150px;" flex="1" align="start">
<checkbox id="c1" label="Ignorar mayúsculas/minúsculas"/>
<spacer flex="1" style="max-height: 30px;"/>
<button label="Buscar"/>
</vbox>
</window>
Aquí son creadas dos cajas verticales, una para la caja de texto y la otra para la casilla de verificación y el botón. La caja izquierda posee una flexibilidad que es tres veces mayor que la caja derecha así siempre recibirá el triple de espacio extra cuando se incremente el tamaño de la ventana. A la caja derecha se le impone un ancho mínimo de 150 píxeles.
La caja de texto es flexible así podrá redimensionarse cuando la ventana lo haga, también se le ha impuesto un ancho mínimo de 100 píxeles. La casilla de verificación aparece a la derecha junto con su etiqueta. Justo debajo de esta caja hay un espaciador, el mismo crecerá y se reducirá pero sin exceder los 30 píxeles. El resultado es que la casilla de verificación y el botón de búsqueda estarán separados uno del otro por un espacio nunca mayor a 30 píxeles.
La segunda caja posee un valor de alineación start, esto causa que los elementos hijos sean alineados en el borde izquierdo. Si esto fuera especificado, el valor por omisión sería stretch, lo que haría que los elementos se estiren horizontalmente. Como no queremos que el botón de búsqueda cambie su tamaño necesitamos especificar una alineación.
A continuación aprenderemos sobre un tipo da caja más especializado, la caja de grupo.
Categorías
links interwikis