mozilla

Divisores

Imagen:traduccion-pendiente.png Esta página está traduciéndose a partir del artículo XUL Tutorial:Splitters, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción

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>
Image:splitter-ex1.jpg

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.

Image:splitter-ex2.jpg

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

Image:splitter-ex3.jpg

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

Let's see what the find file dialog looks like with a splitter in it. One possibility would be to add the results of the search in the dialog. We'll add an area in-between the search criteria and the buttons along the bottom. A splitter will allow you to collapse, or hide, the search results.

</tabbox>

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

Here, a splitter and an iframe have been added to the dialog. We don't need the spacer after the tabbox any more so we can remove it. The content of the frame is contained in a file called '<tt>results.html</tt>'. Create this file and put whatever you want in it for now. The iframe will be replaced más tarde with a results list when we know how to create it. For now, it serves to demonstrate the splitter.

The splitter has been set to a collapse value of before meaning that the element just before the splitter will collapse. Here, it is the iframe. As the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.

The resizeafter attribute has been set to grow so that the elements after the splitter push themselves down when the splitter is dragged down. This results in the content of the frame growing to any size. It should be noted that the window does not resize itself automatically. You'll also notice that this is a horizontal splitter because it has been placed in a vertical box.

Estado normal:

Image:splitter1.png

Estado colapsado:

Image:splitter2.png

Nuestro ejemplo: Código Ver en funcionamiento


Etiquetas y colaboradores del documento

Contributors to this page: Mgjbot, Nathymig
Última actualización por: Mgjbot,