El modelo de caja

En esta sección veremos cómo XUL maneja esquemas.

Introducción a las cajas

El principal formato de esquema en XUL es llamado “modelo de caja". Este modelo permite dividir una ventana en una serie de cajas. Los elementos dentro de una caja se orientarán a sí mismos, ya sea horizontal o verticalmente. Puede controlarse el esquema de una ventana combinando una serie de cajas, espaciadores y elementos con atributos |flex|.

Aunque una caja es parte fundamental del esquema de elementos XUL, esta obedece unas pocas reglas simples. Una caja puede situar sus hijos en una de dos orientaciones, horizontal o verticalmente. Una caja horizontal alinea sus elementos horizontalmente y una caja vertical orienta sus elementos verticalmente. Puede pensarse en una caja como una fila o una columna de una tabla HTML. Diversos atributos ubicados en los elementos hijos además de algunas propiedades de estilo CSS controlan la posición y tamaño exactos de los hijos.

La sintaxis básica de una caja es la siguiente:

<hbox>
  ...
</hbox>

<vbox>
  ...
</vbox>

El elemento hbox se utiliza para crear una caja orientada horizontalmente. Cada elemento ubicado dentro de hbox será situado horizontalmente en una fila. El elemento vbox es utilizado para formar una caja orientada verticalmente. Los elementos añadidos serán dispuestos uno debajo del otro en una columna.

Existe también un elemento caja genérico que toma la orientación horizontal predeterminadamente, por lo cual es equivalente a hbox. Sin embargo, puede utilizarse el atributo orient para controlar la orientación de la caja. Puede fijarse el valor de este atributo en horizontal para crear una caja horizontal, y en vertical para formar una caja vertical.

De este modo, las dos líneas debajo son equivalentes:

<vbox>

<box orient="vertical">

El siguiente ejemplo muestra como posicionar tres botones verticalmente.

Ejemplo: Colocando botones verticalmente

Código Ver en funcionamiento

<vbox>
  <button id="si" label="Si"/>
  <button id="no" label="No"/>
  <button id="talvez" label="Tal vez"/>
</vbox>

Aquí los tres botones fueron orientados verticalmente como fue indicado por la caja. Para alterar los botones a fin de que estén orientados horizontalmente, todo lo que hay que hacer es cambiar el elemento vbox por un elemento hbox.

Pueden insertarse en una caja todos los elementos que sean necesarios, incluyendo otras cajas. En el caso de una caja horizontal, cada elemento adicional será emplazado a la derecha del elemento anterior. Los elementos no se desplegarán, por lo tanto cuantos más elementos sean agregados más ancha será la ventana. Análogamente, cada elemento agregado a una caja vertical se situará debajo del elemento anterior. El siguiente ejemplo muestra un simple indicador de conexión:

Ejemplo: indicador de conexión

Código Ver en funcionamiento

<vbox>
  <hbox>
    <label control="usuario" value="Usuario:"/>
    <textbox id="usuario"/>
  </hbox>
  <hbox>
    <label control="clave" value="Contraseña:"/>
    <textbox id="clave"/>
  </hbox>
  <button id="aceptar" label="Aceptar"/>
  <button id="cancelar" label="Cancelar"/>
</vbox>

Aquí cuatro elementos han sido orientados verticalmente, dos rótulos hbox interiores y dos elementos button. Obsérvese que solamente los elementos que son descendientes directos de la caja están orientados verticalmente. Las etiquetas y cajas de texto están dentro de los elementos hbox internos, por lo que son orientados de acuerdo a esas cajas, que son horizontales. En la imagen puede verse que cada etiqueta y caja de texto está orientada horizontalmente.

Si se mira detenidamente la imagen de la ventana de diálogo de conexión, podrá notarse que las dos cajas de texto no están alineadas entre sí horizontalmente, probablemente sería mejor si lo estuvieran. Para lograr esto necesitamos agregar algunas cajas adicionales.

Ejemplo: un más avanzado indicador de conexión

<vbox>
  <hbox>
    <vbox>
      <label control="usuario" value="Usuario:"/>
      <label control="clave" value="Contraseña:"/>
    </vbox>
    <vbox>
      <textbox id="usuario"/>
      <textbox id="clave"/>
    </vbox>
  </hbox>
  <button id="aceptar" label="Aceptar"/>
  <button id="cancelar" label="Cancelar"/>
</vbox>

Note cómo las cajas de texto están ahora alineadas entre sí. Para hacer esto, necesitábamos agregar cajas dentro de la caja principal. Las dos etiquetas y cajas de texto están todas dentro de una caja horizontal; entonces, las etiquetas son ubicadas dentro de otra caja, esta vez una vertical, lo mismo para las cajas de texto. Esta caja interna es la que hace que los elementos se orienten verticalmente. La caja horizontal es necesaria porque queremos que las etiquetas vbox y las entradas de datos vbox sean colocadas horizontalmente entre ellas. Si esta caja fuera removida, ambas cajas de texto aparecerían debajo de las dos etiquetas.

Ahora la cuestión es que la etiqueta “Clave" está muy arriba. Para corregir esto, aquí realmente deberíamos utilizar el elemento grid (grilla), sobre el cual aprenderemos en en una sección posterior.

Cajas en la ventana de diálogo “Buscar archivos"

<vbox flex="1">

 <description>
   Ingrese debajo el criterio de búsqueda y seleccione el botón Buscar 
   para comenzar la búsqueda.
 </description>
 
 <hbox>
   <label value="Buscar:" control="buscar-texto"/>
   <textbox id="buscar-texto"/>
 </hbox>

 <hbox>
   <spacer flex="1"/>

   <button id="boton-buscar" label="Buscar" default="true"/>
   <button id="boton-cancelar" label="Cancelar"/>
 </hbox>
</vbox>

Ejemplos hasta el momento de “Buscar archivos"

Código Ver en funcionamiento

En la próxima sección veremos cómo especificar los tamaños de elementos individuales y cómo restringir su tamaño.

Categorías

links interwikis