Usando espaciadores

En esta sección, averiguaremos como añadir algún espaciado en medio los elementos que hemos creado.

Adición de Espaciadores

Uno de los problemas con interfaces de usuario que se desarrollan es que cada usuario tiene una demostración diferente. Algunos usuarios pueden tener demostraciones más grandes con resoluciones más altas y los otros pueden tener resoluciones inferiores. Además, plataformas diferentes pueden tener exigencias especiales sobre el interfaz de usuario. Añadiendo el apoyo a múltiples lenguas, el texto para una lengua puede requerir más espacio(cuarto) que el otro.

Los usos que tienen que apoyar múltiples plataformas y lenguas por lo general tienen sus ventanas presentadas con mucho espacio para tener esto en cuenta. Algunas plataformas y juegos de herramientas de interfaz de usuario proporcionan los componentes con capacidad para autoajustar sus dimensiones y establecer su nueva posición por sí mismos para adaptarse a las necesidades del usuario. (por ejemplo: Java usa a administradores de disposición.)

XUL dota a los elementos con capacidad para ajustar la posición y redimensionarse automáticamente. Como hemos visto, en el ejemplo, la ventana de archivos del buscador ha cambiado su tamaño de modo que los elementos quepan correctamente dentro de ella. Cada vez agregamos algo, la ventana ha crecido.

XUL usa un sistema de disposición (capas) llamado 'Modelo de Cajas' que permite dividir las ventanas en conjuntos de 'cajas', anidables, para albergar los elementos. Hablaremos más de esto en la siguiente sección. Las cajas pueden ser ubicadas y redimensionadas asignando valores a sus propiedades directamente o mediante hojas de estilo. Por ahora, basta saber que el elemento de ventana es un tipo de caja.

Antes de entrar en el detalle sobre las cajas, introduciremos otro elemento XUL que es útil para controlar la disposición, el espaciador. Un espaciador es muy simple y sólo requiere un atributo, que será explicado en un momento. El espaciador más simple se parece a lo siguiente:

<spacer flex= "1" />

Un espaciador es usado para insertar un espacio vacío entre dos grupos de elementos que se encuentran dentro de un mismo contenedor (ventana o caja). Su función es crecer o encogerse cuando el usuario redimensiona la ventana, de modo que los elementos situados a su derecha, o debajo, sean empujados hacia los bordes (derecho o inferior, según sea el caso) y se mantenjan 'justificados'. Esto equivale a forzar a un grupo de elementos a mantenerse pegados al borde (derecho o inferior) de su contenedor (ventana) con independencia del tamaño adoptado por el mismo. Como veremos, es posible usar espaciadores para crear variados efectos de disposición.

En la sintaxis, mostrada arriba, el espaciador tiene un atributo llamado flex. Se usa para establecer la flexibilidad del espaciador. En el caso mostrado, el espaciador tiene un flex de 1. Este valor hace que el elemento espaciador sea elástico; y al insertarlo directamente dentro de una ventana, crecerá hasta copar el espacio disponible dentro de la misma (se descuenta el empleado por otros elementos). Si la ventana cambia su tamaño, el espaciador se ajustará para mentener copado el espacio disponible dentro de la misma. En breve añadiremos un espaciador a nuestro diálogo de búsqueda. Pero antes demos un vistazo a la ventana de diálogo cuando es redimensionada (para comparar, luego, con el efecto logrado al usar el espaciador).

<spacer flex="1"/>

<button id="find-button" label="Find"/>

Más acerca de la Flexibilidad

XUL dispone los elementos en una ventana calculando dimensiones (ancho y alto) adecuadas para los elementos que contiene y luego agrega espacio, si hace falta, dónde sean flexibles. Salvo, aquellos elementos cuyas dimensiones hayan sido especificadas esplícitamente. El tamaño por defecto de un elemento es determinado por su contenido. Nótese, por ejemplo, que los botones 'find', 'cancel' tiene dimensiones ligeramente distintas de modo que ofrecen suficiente espacio para el texto en su interior. Si se crea un botón con una etiqueta muy larga su tamaño por defecto será el necesario para poder mostrar la etiqueta completa. Otros elementos, tales como las cajas de texto 'textbox' tienen un tamaño por defecto ajustado a su propósito.

El atributo flex se emplea para establecer si un elemento puede autoajustar sus dimensiones para copar la 'caja' que lo contiene. (en este caso, la ventana). El atributo flex no sólo aplica para los espaciadores; puede ser establecido para cualquier elemento. Por ejemplo, podríamos querer que se reajustase el botón buscar (find-button) en lugar de empujarlo, sin necesidad de que se autoajuste el espaciador.

Como se puede ver en la imagen, el establecer el atributo flex en el botón buscar, éste último se reajusta cuando la ventana lo hace. Un espaciador, en realidad, no es nada especial. Puede ser considerado como un botón oculto: opera sobre el espacio pero sin dibujarse en la pantalla.

Si se observa con cuidado la imagen arriba, se puede notar que no sólo creció el tamaño del votón buscar (find); también aparece un espacio vacío entre él y la etiqueta de texto. Desde luego, es consecuencia de que allí se encuentra el espaciador que ubicamos más arriba. El también se ha reajustado en tamaño. Una observación atenta evidenciará que el espacio disponible fue dividido entre los dos elementos que tienen establecido el atributo flex: el espaciador y el botón buscar. Cada uno de ellos recibió la mitad del espacio libre, disponible, para ajustar su tamaño.

Proporcionalidad de la flexibilidad (del atributo flex)

La razón por la que observamos el efecto anotado es la siguiente: tanto el espaciador como el botón tienen establecido su su atributo flex a 1. (flex="1"); ésto hace que se repartan de modo equivalente el espacio disponible. Pero, tambien es posible lograr un reparto del espacio sujeto a otras condiciones de proporcionalidad:

¿Qué pasaría en caso de desear que un elemento tome dos veces más espacio libre que otro? ¿Cómo lograrlo? -  Se puede usar números mayores que 1 como varores del atributo flex. Los valores de este atributo establecen una razón de proporcionalidad. Determinan cuántas partes del espacio disponible serán entragadas a cada uno de los elementos que lo tengan establecido. Si un elemento tiene su flex en 1 y otro tiene un flex de 2, el espacio libre será dividido en tres partes y se entregará 1 al primero y 2 al segundo; de modo que la razón de crecimiento, entre ellos, será  1:2; el segundo crecerá dos veces más que el primero.

The flex attribute isn't used to specify an actual size. Instead, it specifies how empty space it divided among the children of a container box. We'll look at boxes in the next section. Once the default sizes of the children of a box are determined, the flexibility values are used to divide up the remaining empty space in the box. For example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be 60 pixels of space left over. If both buttons have a flex value of 1, the space will be divided evenly with 30 extra pixels of width going to each button. If the second button's flexibility was increased to 2, the first button would receive 20 pixels of the extra space and the second button would receive 40 pixels of extra space instead.

The flex attribute can be placed on any element, however it only has any meaning when placed on an element directly inside a XUL box. This means that even though you can place a flex on an HTML element, it will have no effect if that element is inside a non-box element.

Let's look at some examples:

Example 1:
  <button label="Find" flex="1"/>
  <button label="Cancel" flex="1"/>

Example 2:
  <button label="Find" flex="1"/>
  <button label="Cancel" flex="10"/>

Example 3:
  <button label="Find" flex="2"/>
  <button label="Replace"/>
  <button label="Cancel" flex="4"/>

Example 4:
  <button label="Find" flex="2"/>
  <button label="Replace" flex="2"/>
  <button label="Cancel" flex="3"/>

Example 5:
  <html:div>
    <button label="Find" flex="2"/>
    <button label="Replace" flex="2"/>
  </html:div>

Example 6:
  <button label="Find" flex="145"/>
  <button label="Replace" flex="145"/>

Example 1 

in this case the flexibility is divided up evenly between both buttons. Both buttons will change size evenly.

Example 2 

here, both buttons will grow, but the Find button will grow ten times as much as the Cancel button, because it has a flex value that is 10 times the flex value of the Find button. Available space will be divided into one part for the Find button and 10 parts for the Cancel button.

Example 3 

only two of the buttons are marked as flexible here. The Replace button will never change size but the other two will. The Cancel button will always resize twice as large as the Find button because its flex value is twice as large.

Example 4 

in this case, all three buttons are flexible. Both the Find and Replace buttons will be the same size but the Cancel button will be somewhat larger (50% larger to be exact).

Example 5 

here, the two buttons are placed inside a div element. Flexibility is meaningless here as the buttons are not directly in a box. The effect would be the same if the flex attributes were left out.

Example 6 

because the flex values are the same on both buttons, their will flex equally. This would work just as well with flex values of one instead of 145. There's no difference in this case. It is recommended that you use lower numbers for readability.

Note that other factors such as the button labels and button minimum sizes will affect the actual sizes of the buttons. For instance, a button won't shrink less than the space needed to fit its label.

Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. It means that the element is not flexible at all. You may also sometimes see a flex value specified as a percentage. This has no special meaning and is treated as if the percent sign was not there.

You may have noticed that when you resize the find file dialog vertically, the buttons resize themselves to fit the height of the window. This is because all of the buttons have an implied vertical flex given to them by the window. In the next section we'll learn how to change this.

Find files example so far

Código Ver en funcionamiento

Next, we'll learn some additional features of buttons.

Categorías

links interwikis