Una barra de herramientas normalmente se sitúa en la parte superior de la ventana y contiene un número de botones que realizan acciones cotidianas. XUL ofrece la posibilidad de crear barra de herramientas.
Añadiendo una barra de herramientas
Como otros elementos, las barras de herramientas de XUL son del tipo caja. Generalmente mostrará una fila de botones, pero cualquier otro elemento puede colocarse en una barra de herramientas. Por ejemplo, el navegador Mozilla contiene una caja de texto para mostrar e introducir las direcciones URL.
Las barras de herramientas pueden ser colocadas en cualquier parte de la ventana, ya sea horizontalmente o verticalmente. Por supuesto que normalmente no pondremos una caja de texto en una barra de herramientas vertical. En verdad, como las barras de herramientas no son más que cajas, pueden colocarse en cualquier sitio que deseémos, incluso en el centro de la ventana. Sin embargo, es típico que las barras de herramientas se sitúen en la parte superior de la venta, colocandose una debajo de otra si hubíera más de una, agrupandose en un elemento llamadao toolbox.
En la parte izquierda de una barra de herramientas se encuentra un pequeño notch que al hacer clic en él contraerá la barra de herramientas, de forma que solo el notch quede visible. Este notch se denomina grippy. Cuando tenemos varias barras de herramientas agrupadas dentro de un elemento toolbox, los grippes se colocarán en una misma fila. Esto compacta el espacio usado de manera eficiente. Para las barras de herramientas verticales, los grippies se sitúan en la parte superior. Un usuario puede contraer las barras de herramientas para obtener más espacio en la ventana principal.
He aquí un ejemplo de una simple barra de herramientas.
Ejemplo
<toolbox>
<toolbar id="nav-herramientas">
<toolbarbutton label="Atrás" />
<toolbarbutton label="Adelante" />
</toolbar>
</toolbox>
Esto creará una barra de herramientas con dos botones, un botón Atrás y otro Adelante. La barra de tareas ha sido definida dentro de un elemento toolbox. Todo esto ha requerido cuatro nuevos elementos, que son descritos aquí:
* toolbox
Una caja que contiene barras de herramientas
* toolbar
Una barra de herramientas que contiene elementos como botones. Las barras de herramientas pueden minimizarse usando el grippy de su borde izquierdo o superior.
* toolbarbutton
Un botón para la barra de herramientas, el cual tiene las mismas características que un botón normal pero que normalmente se muestra de forma distinta.
* toolbargrippy
Este elemento crea el notch que puede usarse para contraer y expandir la barra de herramientas. No necesitamos definirla manualmente, ya que se añade automaticamente.
El elemento toolbar es el principal y responsable de crear la barra de herramientas. Dentro de él se colocan los elementos que debe mostrar la barra de herramientas, normalmente botones aunque puede ser cualquier otro elemento. La barra de herramientas debería tener un atributo id o el grippy no será capaz de contraer o expandir la barra de herramientas correctamente.
En el ejemplo anterior solo creamos una barra de herramientas. Podemos crear más simplemente añadiendo más elementos toolbar después del primero.
El elemento toolbox no es más que un contenedor para las barras de herramientas. En algunas aplicaciones, veremos varias barras de herramientas en la parte superior de la venta. Podemos ponerlas todas juntas dentro de un toolbox. Sin embargo no es obligatorio poner las barras de herramientas dentro de un toolbox.
Los grippies son creados usando otro elemento, toolbargrippy. No tiene sentido usarlo en ningún otro sitio que no sea una barra de herramientas, ya que esta especialmente diseñador para contraer y expandir barras de herramientas. Sin embargo si es posible aplicarle un estilo diferente. Incluso puedes ocultarlo si incluimos el atributo grippyhidden al elemento toolbar, poniendo su valor a true.
Tres barras de herramientas agrupadas en un toolbox
Las mismas barras pero con dos de ellas contraidas.
Ahora añadiremos una barra de herramientas a nuestro dialogo. Realmente no lo necesitamos pero crearemos una de todas formas para demostrar su uso. Se definirán dos botones, los tipicos de Abrir y Guardar. En teoría deberían posibilitar que el usuario puediera guardar los resultados de una búsqueda y abrirlos posteriormente.
<vbox flex="1">
<toolbox>
<toolbar id="findfiles-toolbar">
<toolbarbutton id="abrirbusqueda" label="Abrir" />
<toolbarbutton id="guardarbusqueda" label="Guardar" />
</toolbar>
</toolbox>
<tabbox>
Hemos añadido una barra de herramientas con dos botones. En la imagen, vemos que aparecen alineados horizontalmente en la parte superior. El grippy tambíen aparece en el borde izquierdo. Fijemonos en que hemos colocado la barra de herramientas en la caja vertical, justo encima del elemento tabbox. Lo hemos hecho así porque necesitamos la alineación vertical de la caja para que la barra de herramientas aparezca arriba del todo.
Siguiente, veremos como añadir paneles de contenido.
NdT: el elemento ‘toolbargrippy’ no es soportado por Firefox, dada la popularidad de este navegador creo que habría que poner algun comentario al respecto. Ver la ref. de toolbargrippy
Categorías
links interwikis