XUL/Primer ejemplo
Objetivos de aprendizaje
editar- Crear páginas estáticas simples.
- Agregar manejadores de eventos a una página XUL.
Primer ejemplo
editar¿Qué mejor manera para comenzar que el viejo "Hola mundo"?. Para empezar puede usarse un editor de texto (editor, no procesador) como Gedit, Jext o Notepad o Notepad++ (GPL y especialmente diseñado para programación en Windows) pegar ahí el código de la figura 2.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="Hola"
title="Ejemplo: hola mundo"
orient="vertical"
persist="screenX screenY width height"
xmlns= "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<description style='font-size:24pt'>Hola mundo</description>
<description value='Hola mundo' style='font-size:24pt'/>
<label value = 'Hola mundo' style='font-size:24pt'/>
</window>
Figura 2. |
Puede guardarse en cualquier lugar y con cualquier nombre, pero con la extensión .xul. Ahora debe pulsarse dos veces con el ratón y debería abrirse en el navegador Mozilla o el Netscape. Debería verse "Hola mundo" tres veces, nótense las diferentes maneras en las que la frase "Hola mundo" es mostrada, dos veces en una etiqueta de tipo description y una en una etiqueta de tipo label. <description> y <label> son etiquetas de texto. La única manera de mostrar texto no contenido en un atributo value es usar la etiqueta <description>, en el segundo y tercer ejemplos, el texto se expresa como un atributo de la etiqueta. Puede cambiarse la orientación (atributo orient) de la ventana de vertical a horizontal, para probar las dos formas de distribución.
Ahora, vamos a agregar algunos elementos más interesantes.
Agregando componentes gráficos
editarComo se mencionó, XUL tiene una gran librería de componentes gráficos, entre los que se incluyen botones, cajas de texto, barras de avance, ente otros componentes muy útiles, una lista de estos componentes puede verse en:
http://www.mozilla.org/xpfe/xulref/
Debe existir un lugar similar al <body> del HTML para poner todos los componentes gráficos, este lugar es la etiqueta <box> (caja). Las cajas son contenedores que encapsulan otros elementos. Existen varios tipos de cajas, en el siguiente ejemplo se usarán <hbox> (caja horizontal), <vbox> (caja vertical), <toolbox> (caja de herramientas) y <tabbox> (caja con lengüetas de selección).
<hbox> y <vbox> son iguales a la etiqueta <window> pero con los atributos ‘orient = “horizontal”’ y ‘orient = “vertical”’ respectivamente, estos dos elementos pueden tener otros componentes y a su vez pueden estar anidados.
<toolbox> puede usarse para crear barras de herramientas arriba o abajo de la ventana. <tabbox>, puede poner hojas con lengüetas en las ventanas.
Reemplacese en la figura 1, ". . . (agregar elementos aquí)" con un par de etiquetas <vbox>, una de inicio y otra de cierre. Esto será el contenedor externo para el resto de los elementos. Agreguese el atributo ‘flex=”1”’. Esto hará que la barra de menú se extienda a todo lo ancho de la ventana.
Es necesario dar un poco más de explicación acerca del atributo flex (contracción de flexible), ya que es una manera básica de posicionar y asignar tamaño a los componentes gráficos de manera dinámica, Este atributo puede tener valores entre 0 y 1 (por ejemplo 0.5), cuanto mayor sea el valor, el componente ocupará un mayor porcentaje de área cuando el contenedor donde se encuentra cambie de tamaño. Cabe mencionar que también existen los atributos "width" y "height", que definen la preferencia de tamaño del componente.
Ahora pongase etiquetas de inicio y fin <toolbox> y después un par similar pero de <tabbox>. Agreguese el código de la figura 3 dentro de las etiquetas <toolbox>.
<menubar id="MenuBar"> <menu id="File" label="Archivo" accesskey="a"> <menupopup id="MenuArchivo"> <menuitem label="Nuevo" accesskey="n"/> <menuitem label="Abrir..." accesskey="b"/> <menuitem label="Guardar" accesskey="g"/> <menuitem label="Guardar como..." accesskey="g"/> <menuitem label=" ... "/> <menuseparator/> <menuitem label="Cerrar" accesskey="c" /> </menupopup> </menu> <menu id="Editar" label="Editar" accesskey="e"> <menupopup id="MenuEditar"> <menuitem label="Cortar" accesskey="t" acceltext="Ctrl + X (Cortar)"/> <menuitem label="Copiar" accesskey="c" acceltext="Ctrl + C (Copiar)"/> <menuitem label="Pegar" accesskey="p" disabled="true"/> </menupopup> </menu> <menu id="Ver" label="Ver" accesskey="v"> <menupopup id="MenuVer"> <menuitem id="CajaHerramientas1" label="Caja de herramientas 1" type="checkbox" accesskey="1" checked="true"/> <menuitem id="CajaHerramientas2" label="Caja de herramientas 2" type="checkbox" accesskey="2" checked="false"/> </menupopup> </menu> </menubar> Figura 3. |
Ahora debe existir un menú con las opciones “Archivo Editar Ver” y cada uno debe expandirse cuando se active mediante el ratón.
En primer lugar <menubar> contiene todos los elementos del menú (Archivo, Editar, Ver). A continuación se definen tres elementos de menú diferentes. Cada menú tiene un conjunto de elementos y atributos. <menupopup> crea un menú que aparece cuando se selecciona uno de los elementos del menú. En el menú <menupopup> se encuentra la lista elementos de menú. Cada uno de estos elementos tiene un atributo ‘accesskey’ (letra de acceso). Este atributo subrraya esa letra en el menú y provee la referencia para definir una letra de acceso directo para ese elemento del menú. Veasé que en el menú ‘Editar’, ‘Cortar’ y ‘Pegar’ tienen texto de acceso directo.
El en menú archivo, hay una etiqueta <menuseperator/>, esta pone una línea que cruza el menú, y que sirve como separador visual. Notesé que el elemento ‘Pegar’ del menú tiene el atributo disabled=”true”. Esto causa que ese elemento se encuentre deshabilitado. Finalmente, en el menú ‘Ver’ hay elementos que tienen cuadros de selección, el primero se encuentra seleccionado y el segundo no.
Ahora se van a crear tres "hojas" en la caja con lengüetas de selección (<tabbox>). Este es el código:
<tabbox flex="1"> <tabs> <tab id="Tab1" label="Hoja1" selected="true"/> <tab id="Tab2" label="Hoja2"/> <tab id="Tab3" label="Hoja3"/> </tabs> <tabpanels flex="1"> <tabpanel flex="1" id="HojaLeng1" orient="vertical" > <description style="color:red;"> Esto casi no hace nada. Solo muestra algunos atributos de estilo. </description> </tabpanel> <tabpanel flex="1" id="HojaLeng2" orient="vertical"> <description class="normal"> ¡Hey, la barra de desplazamiento funciona! (y gratis). </description> <scrollbar /> </tabpanel> <tabpanel flex="1" id="HojaLeng3" orient="vertical"> <hbox> <text value="Medidor de progreso" id="txt" style="display:visible;" /> <progressmeter id="medPrg" mode="undetermined" style="display:visible;" label="Medidor de progreso" /> </hbox> <description value="¡Ohh, más que el hola mundo!"/> </tabpanel> </tabpanels> </tabbox> Figura 4. |
Las lengüetas se definen con <tab> y se les da un indentificador (id) y un texto. A continuación se crea un conjunto de paneles, cada uno con contenido diferente. El primero es para mostrar que se pueden aplicar estilos dentro del código como en HTML. Las siguientes hojas tienen componentes con funcionalidad. Puede verse como la barra de desplazamiento y el medidor de progreso funcionan. Es muy fácil poner todos estos elementos en una ventana, pero ellos solos no hacen nada. Lo siguiente es hacer que estos elementos trabajen juntos mediante algo más de código.
Agregar manejadores de eventos
editarPara que todo esto sea más útil debe agregarse algo de código de control en la aplicación. En este ejemplo se usará JavaScript para agregar funcionalidad a los componentes. Esto se hace de una manera muy similar a la de HTML. En HTML, un manejador de evento se asocia con un elemento y se realiza alguna acción cuando se activa el manejador. La mayoría de los manejadores de HTML también están en XUL y hay algunos más que solo se encuentran en XUL.
Se puede agregar código dentro del archivo de XUL, pero una manera más eficiente es hacerlo en un archivo separado. Esto permite que la carga de la interfaz se realice más rápidamente. En este caso el código de JavaScript de la figura 5 se agregará en el archivo XUL dentro de la etiqueta <window>.
onclick="alert(event.target.tagName); return false;" Figura 5. |
Ahora al accionar al ratón en cualquier elemento de la ventana aparecerá un mensaje mostrando el nombre de ese elemento.
Una cosa notoria, es que cuando se pulsa sobre el texto que muestra la etiqueta <description>, la respuesta es indefinida, pero cuando se pulsa sobre el texto de la etiqueta <label> se obtiene el valor del nombre de esa etiqueta. Esto implica que una etiqueta <description> no es realmente un elemento.
Después de probar esto, es necesario borrar el último texto agregado y agregar el código de la figura 6 dentro de la etiqueta de apertura de la opción ‘Cerrar’ del menú ‘Archivo’.
oncommand="window.close()" Figura 6. |
Ahora cuando se pulse en ‘Cerrar’ o se use la tecla ‘c’, se cerrará la ventana completa. El manejador de evento ‘oncommand’ es preferido a ‘onclick’ porque puede manejar eventos de teclado u otros eventos que no son del ratón.
Ahora se agregará algo más, agreguesé el código de la figura 7 justo después de la etiqueta <window>.
<script>
function show(){
var meter=document.getElementById('medPrg');
meter.setAttribute("style","display: visible;");
var tx=document.getElementById('txt');
tx.setAttribute("style","display: visible;");
}
function hide(){
var meter=document.getElementById('medPrg');
meter.setAttribute("style","display: none;");
var tx=document.getElementById('txt');
tx.setAttribute("style","display: none;");
}
</script>
Figura 7. |
Esté código, primero obtiene una referencia de la barra de progreso y del elemento de texto a través de sus atributos de identificación (id). Entonces las dos funciones definen los atributos de estilo de la barra de progreso y del elemento de texto para hacerlos visibles u ocultarlos modificando el valor de su atributo ‘display’.
Pero para que este código funcione es necesario agregar dos botones que hagan que se ejecuten estas dos funciones (Figura 8). Pero antes es necesario definir un elemento ‘box’ que contenga a ambos botones y definir el atributo de tamaño de ‘box’ para que lo que contenga no se extienda a todo lo ancho de la ventana
<box width="200px"> <button id="show" label="Show" default="true" oncommand="show();"/> <button id="hide" label="Hide" default="true" oncommand="hide();"/> </box> Figura 8. |
Conclusión
editarLos ejemplos mostrados en este capítulo son solo una muestra superficial de las capacidades de XUL. Aunque estos ejemplos son simples, es posible ver lo fácil que puede ser crear IU complejas. Con el conjunto de componentes gráficos de XUL el programador puede codificar lo mismo que en HTML. Otra ventaja es la capacidad multiplataforma de XUL (restringida por ahora solo a algunas aplicaciones relacionadas con mozilla)..