Divisores

Ahora podemos ver como añadir divisores/separadores a una ventana.

División de una caja

Hay momentos en los cuales se necesita tener dos secciones en la ventana donde el usuario pueda dimensionar las partes. Un ejemplo es la ventana del navegador de Mozilla, donde se puede cambiar el tamaño del panel lateral desplazando la línea de intersección de los cuadros. También se puede esconder, picando la cruz del panel.

El elemento separador

Ésta funcionalidad es cumplida utilizando un elemento llamado un splitter. Este elemento crea una barra fina entre los dos cuadros, lo cual permite dimensionar estos. Se puede poner un separador donde se quiera o necesite para permitir dimensionar los elementos situados antes o después de él en una misma caja.

Cuando un separador se coloca en una caja horizontal, permite dimensionar horizontalmente. Si se coloca en una caja vertical, permite dimensionar verticalmente.

La sintaxis de un separador es la siguiente:

<splitter
    id="identifier"
    state="open"
    collapse="before"
    resizebefore="closest"
    resizeafter="closest">

Los atributos son los que siguientes:

id

El identificador único de este separador.

state

Indica el estado del separador. Se pone en open, que es la opción por defecto, si se quiere que el panel dimensionable esté inicialmente abierto o en collapsed para que uno de los paneles sea completamente reducido y que el otro ocupe (colapse) todo el espacio.

collapse

Indica de que lado el panel debe reducirse cuando el separador es agarrado o iniciado en estado de colapse. Se definirá en before para designar elemento anterior al separador y en after para el elemento posterior. Poniéndolo en none, lo cual es la opción por defecto, el separador al ser agarrado no reducirá los paneles.

resizebefore

Cuando un separador es desplazado, los elementos a su izquierda (o encima) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a la izquierda del separador sea dimensionado, se definirá en closest (el valor por defecto) y en farthest para que sea el elemento más lejos a la izquierda (el primer elemento en la caja) el que sea dimensionado.

resizeafter

Cuando un separador es desplazado, los elementos a su derecha (o debajo) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a su derecha sea dimensionado, se definirá en closest (el valor por defecto) y en farthest para que sea el elemento más lejos a derecha (el último elemento en la caja) el que sea dimensionado. Éste atributo también se puede definir en grow, en este caso los elementos a su derecha no cambiarán de tamaño al mover el separador, pero si la caja entera.

Si se pone el atributo collapse, se añadirá también el elemento grippy dentro del splitter para permitir que el usuario pueda utilizar el separador.

Ejemplo con separador

Aquí un ejemplo que puede ayudar:

Ejemplo 1: Código Ver en funcionamiento

<vbox flex="1">
  <iframe id="content-1" width="60" height="20" src="w1.html"/>
  <splitter collapse="before" resizeafter="farthest">
    <grippy/>
  </splitter>
  <iframe id="content-2" width="60" height="20" src="w2.html"/>
  <iframe id="content-3" width="60" height="20" src="w3.html"/>
  <iframe id="content-4" width="60" height="20" src="w4.html"/>
</vbox>

Aquí, cuatro marcos han sido creados y un separador colocado entre el primero y el segundo. El atributo de colapso se ha definido en el valor before, para que si el separador es agarrado, el primer cuadro desaparezca y que el divisor y los marcos restantes se desplacen a la izquierda. El punto del cursor para mover el separador es centrado en relación a él-mismo.

Al separador se le ha dado un valor resizeafter de farthest. Ésto hace que cuando el separador es movido, el elemento más lejos a su derecha cambiará de tamaño, en este caso el cuadro 4.

A value has not been specified for resizebefore so it will default to a value of closest. In this case, there is only one frame before the splitter, so frame 1 will change size.

Frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame 4 has reached its minimum size.

This image shows the 4 panels with the splitter in a collapsed state.

This image shows the 4 panels with the splitter resized to the right. Notice how the middle two panels have not changed size. Only panel 1 and panel 4 have changed size. You can just see part of the fourth panel. If you continue to drag the splitter to the right, the other two panels will shrink.

You can use the style properties such as min-width, max-height on the iframes to specify minimum or maximum widths or heights in the box. If you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes.

For example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. The other two panels would have to shrink. If you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). You can still collapse the splitter however.

You can also place more than one splitter in a box if you want, in which case you could collapse different parts of it. Similarly, you do not have to collapse just iframes. Any element can be collapsed.

Nuestro ejemplo de búsqueda

</tabbox>

 <iframe src="results.html"/>
 <splitter resizeafter="grow"/>
 
 <hbox>