Posicionamiento de elementos de la ventana

Aquí veremos cómo controlar la posición y tamaño de un elemento.

Posicionamiento de elementos de la caja

Hasta ahora sabemos cómo posicionar vertical u horizontalmente los elementos en el interior de una caja. A menudo necesitaremos mayor control sobre la posición y tamaño de los elementos dentro de la caja, para esto primero necesitamos echar un vistazo a cómo trabaja una caja.

La posición de un elemento es determinada por el estilo de esquema de su contenedor. Por ejemplo, la posición de un botón en una caja horizontal es a la derecha del botón anterior, si es que hay alguno. El tamaño de un elemento es determinado por dos factores, el tamaño que el elemento necesita poseer y el tamaño que uno especifique. El tamaño que un elemento requiere es determinado por el tipo de elemento. Por ejemplo, el ancho de un botón es determinado por la cantidad de texto en el botón.

Un elemento será generalmente tan amplio como éste necesite para soportar su contenido, y no mayor. Algunos elementos, como las cajas de texto, tienen un tamaño predeterminado. Una caja será suficientemente amplia como para contener los elementos dentro de ella. Una caja horizontal con tres botones en ella será tan ancha como los tres botones, más un pequeño espacio de relleno.

En la imagen de abajo, a los primeros dos botones se les ha dado un tamaño adecuado como para contener su texto. El tercer botón es mayor porque tiene más contenido. El ancho de la caja que contiene los botones es el ancho total de los botones más el espacio entre ellos. El alto de los botones es de un tamaño apropiado para contener el texto.

Podría necesitarse tener mayor control sobre el tamaño de un elemento en una ventana. Hay para ello un número de características que permiten controlar el tamaño de un elemento. La forma rápida es simplemente agregar a un elemento los atributos width (ancho) y height (alto), muy parecido a lo que puede hacerse en un rótulo HTML img. Un ejemplo se demuestra abajo:

Ejemplo: atributos height y width

Código Ver en funcionamiento

<button label="Aceptar" width="100" height="40"/>

Sin embargo, no se recomienda hacer esto, ya que no es muy portable y podría no adaptarse a algunos temas. Una mejor forma es utilizar propiedades de estilo, que funcionan de manera similar a las hojas de estilo en HTML. Pueden utilizarse las siguientes propiedades CSS:

width 

Esto especifica el ancho del elemento.

height 

Especifica el alto del elemento.

Fijando cualquiera de estas propiedades, el elemento será creado con ese ancho y/o largo. Si se especifica solo una propiedad de tamaño, la otra se calculará de acuerdo a lo requerido. El tamaño de estas propiedades de estilo deben especificarse como un número seguido de una unidad de medida.

Los tamaños son bastante fáciles de calcular para elementos no flexibles. Estos simplemente obedecen sus anchos y altos especificados, y si el tamaño no fuera especificado, el tamaño predeterminado del elemento será lo suficientemente amplio como para acomodar su contenido. Para elementos flexibles, el cálculo es ligeramente más difícil.

Elementos flexibles son aquellos que poseen el atributo flex establecido en un valor mayor que 0. Debe recordarse que los elementos flexibles aumentan y disminuyen su tamaño para acomodarse al espacio disponible. Su tamaño predeterminado aún se calcula igual que el de los elementos no flexibles. El siguiente ejemplo lo demuestra:

Ejemplo

Código Ver en funcionamiento

<window orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<hbox>
  <button label="Sí" flex="1"/>
  <button label="No"/>
  <button label="Realmente no sé si uno u otro."/>
</hbox>

</window>

La ventana aparecerá inicialmente como la imagen anterior. Los primeros dos botones serán dimensionados a un adecuado ancho predeterminado y el tercer botón será mayor porque tiene una etiqueta más larga. El primer botón fue hecho flexible y los tres elementos han sido puestos dentro de una caja. El ancho de la caja se fijará al ancho total inicial de los tres botones (en la imagen cerca de 430 píxeles).

Si se incrementa el ancho de la ventana, los elementos son comprobados para ver si son flexibles y así rellenar el espacio en blanco que aparecerá. El botón es el único elemento flexible, pero no aumentará su ancho porque la caja dentro de la que encuentra no es flexible. Un elemento no flexible nunca cambia su tamaño aún cuando haya espacio disponible, por lo que el botón no podrá crecer. Esto es, el botón no se hará más ancho.

La solución es también hacer flexible a la caja. Entonces, cuando se haga más ancha la ventana, habrá espacio extra disponible, por lo que la caja crecerá para ocupar el espacio extra. Como la caja es mayor, también se creará espacio extra dentro de ella, y el botón flexible que contiene crecerá para ajustarse al espacio disponible. Este proceso se repetirá por cada caja anidada existente.

Estableciendo tamaños mínimos y máximos

Puede ser necesario permitir que un elemento sea flexible, pero restringir su tamaño para que no pueda superar cierta dimensión; o puede necesitarse especificar un tamaño mínimo. Esto puede establecerse utilizando cuatro atributos.

minwidth 

Especifica el ancho mínimo del elemento.

minheight 

Especifica la altura mínima del elemento.

maxwidth 

Especifica el ancho máximo del elemento.

maxheight 

Especifica la altura máxima del elemento.

Estos valores se miden siempre en píxeles. También pueden utilizarse las correspondientes propiedades CSS, min-width, min-height, max-width y max-height.

Estas propiedades son aprovechables únicamente por elementos flexibles. Especificando una altura máxima, por ejemplo, un botón flexible podrá crecer solamente hasta esa altura. Aún podrá redimensionarse la ventana más allá de ese punto pero el botón dejará de crecer. Asimismo, la caja en la que se encuentre el botón podrá continuar agrandándose, a menos que también se le fije una altura máxima.

Si dos botones son igualmente flexibles, normalmente ambos compartirán el espacio extra. Si un botón tiene un ancho máximo, el segundo continuará creciendo y ocupará todo el espacio restante.

Si una caja posee un ancho o alto máximos, los hijos no podrán crecer más allá de ese tamaño máximo. Si una caja tiene un ancho o alto mínimos, los hijos no podrán achicarse menos que ese tamaño mínimo. Aquí hay algunos ejemplos del establecimiento de anchos y altos:

<button label="1" style="width: 100px;"/>
<button label="2" style="width: 100em; height: 10px;"/>
<button label="3" flex="1" style="min-width: 50px;"/>
<button label="4" flex="1" style="min-height: 2ex; max-height: 100px"/>
<textbox flex="1" style="max-width: 10em;"/>
<description style="max-width: 50px">Este es un aburrido pero simple texto desplegable.</description>

Ejemplo 1 

el primer botón será mostrado con un ancho de 100 píxeles (px significa píxeles). Debe agregarse la unidad de medida o el ancho será ignorado.

Ejemplo 2 

el segundo botón se mostrará con un alto de diez píxeles y un ancho de 100 ems (un em es la medida de un carácter en el tipo de letra utilizado).

Ejemplo 3 

el tercer botón es flexible, por lo que crecerá basado en el tamaño de la caja en la que se encuentre. Sin embargo, el botón nunca se reducirá a menos de 50 píxeles. Otros componentes flexibles como los espaciadores absorberán el espacio remanente, rompiendo el cociente flex.

Ejemplo 4 

el cuarto botón es flexible y nunca tendrá una altura que sea menor a 2 ex (un ex es normalmente la altura de la letra x en el tipo de letra utilizado) o mayor que 100 píxeles.

Ejemplo 5 

la entrada de texto es flexible pero nunca crecerá más de 10 ems. A menudo se querrá utilizar ems al especificar tamaños de elementos con texto en ellos. Esta unidad de medida es útil para cajas de texto, así el tipo de letra podrá cambiar y las cajas de texto siempre poseerán un tamaño adecuado, aún si el tipo de letra es muy grande.

Ejemplo 6 

el elemento description está restringido a poseer un ancho máximo de 50 píxeles. El texto contenido se desplegará hasta la siguiente línea, luego de cincuenta píxeles.

Empaque de cajas

Digamos que se tiene una caja con dos elementos hijos, de los cuales ninguno es flexible, pero la caja sí lo es. Por ejemplo:

Ejemplo

Código Ver en funcionamiento

<box flex="1">
  <button label="Alegre"/>
  <button label="Triste"/>
</box>

Si se redimensiona la ventana, la caja se expandirá para adaptarse al tamaño de la ventana. Los botones no son flexibles, por lo que sus longitudes no cambiarán. El resultado es espacio extra que aparecerá en el lado derecho de la ventana, dentro de la caja. Puede desearse, sin embargo, que el espacio extra aparezca del lado izquierdo, así los botones se mantendrán alineados a la derecha en la ventana.

Esto puede lograrse colocando un espaciador dentro de la caja, pero se volverá confuso cuando haya que realizarlo muchas veces. Una mejor solución es utilizar en la caja un atributo adicional: pack (empaquetar). Este atributo indica cómo empaquetar los elementos hijos dentro de la caja. Para cajas orientadas horizontalmente, controla el posicionamiento horizontal de los hijos. En cajas verticales, controla el posicionamiento vertical. Pueden utilizarse los siguientes valores:

start 

Posiciona los elementos en el extremo izquierdo para cajas horizontales y en el extremo superior para cajas verticales. Este es el valor predeterminado.

center 

Centra los elementos hijos en la caja.

end 

Posiciona los elementos al extremo derecho en cajas horizontales y al extremo inferior en cajas verticales.

El atributo pack se aplica a la caja contenedora de los elementos a ser empaquetados, no a los elementos en sí mismos.

Podemos cambiar el ejemplo anterior para centrar los elementos, de esta manera:

Ejemplo

Código Ver en funcionamiento

<box flex="1" pack="center">
  <button label="Alegre"/>
  <button label="Triste"/>
</box>

Ahora, cuando la ventana sea redimensionada, los botones se centrarán horizontalmente. Compare este comportamiento con el del ejemplo anterior.

Alineación de cajas

Si la ventana en el ejemplo Alegre/Triste se redimensiona horizontalmente, el ancho de la caja crecerá. Si no obstante se redimensiona la caja verticalmente, notará que la altura de los botones aumenta. Esto sucede porque la flexibilidad en la otra dirección se asume predeterminadamente.

Puede regularse este comportamiento con el atributo align (alineación). Para cajas horizontales, éste controla verticalmente la posición de los hijos. En cajas verticales, controla la posición horizontal de los hijos. Los valores posibles son similares a los de pack..

start 

Alinea los elementos a lo largo del extremo superior para cajas horizontales y a lo largo del borde izquierdo para cajas verticales.

center 

Centra los elementos hijos en la caja.

end 

Alinea los elementos a lo largo del extremo inferior en cajas horizontales y a lo largo del borde derecho en cajas verticales.

baseline 

Alinea los elementos para que el texto quede alineado. Esto es útil en cajas horizontales únicamente.

stretch 

Este valor, el predeterminado, causa que los elementos crezcan hasta ocupar el tamaño de la caja, muy parecido a un elemento flexible, pero en la dirección opuesta.

Similar al atributo pack., el atributo align es aplicable únicamente a la caja cuyos elementos deben ser alineados, no a los elementos en sí.

Por ejemplo, la primera caja de abajo tendrá a sus hijos expandidos, porque ése es el valor predeterminado. La segunda caja posee un atributo align, por lo que sus hijos se ubicarán centrados.

Ejemplo

Código Ver en funcionamiento

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="sino" title="Pregunta" orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <hbox>
    <button label="Sí"/>
    <button label="No"/>
  </hbox>
  <hbox align="center">
    <button label="Tal vez"/>
    <button label="Quizás"/>
  </hbox>

</window>

También pueden utilizarse las propiedades de estilo -moz-box-pack y -moz-box-align en lugar de especificar estos atributos.

Recorte de texto y botones

Podría llegar a crearse un elemento button que contuviera una etiqueta cuyo ancho sea mayor que el ancho máximo del botón. Por supuesto, una solución sería incrementar el tamaño del botón; sin embargo, los botones (y otros elementos con una etiqueta) tienen un atributo especial llamado crop (recortar) que permite especificar cómo el texto será recortado si este es demasiado largo.

Si el texto es recortado, puntos suspensivos (…) aparecerán en el botón de donde el texto fue recortado. Existen cuatro valores posibles:

left 

El texto es recortado por su lado izquierdo.

right 

El texto es recortado por su lado derecho.

center 

El texto es recortado en ambos extremos.

none 

El texto no será recortado, este es el valor predeterminado.

En realidad, este atributo es útil únicamente cuando una ventana de diálogo es diseñada para ser utilizable en cualquier tamaño. El atributo crop también puede ser usado con el elemento description y otros elementos que utilicen el atributo label para etiquetas. Lo siguiente muestra este atributo en uso:

Ejemplo

Código Ver en funcionamiento

<button label="¡Presióname por favor!" crop="right" flex="1"/>

Nótese como al texto en el botón se le recortará su lado derecho luego de que la ventana sea achicada.

Ejemplo "Buscar archivos" hasta ahora

Código Ver en funcionamiento

(Siguiente) A continuación, un resumen y algunos detalles adicionales del modelo de caja.

Ejemplos: 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6