Un sencillo ejemplo[]
Para comenzar a ver las posibilidades de XUL, nada mejor que un sencillo ejemplo:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <label value="¡Hola, mundo!" /> </window>
Ventanas[]
Además de cuadros de diálogo estándar, es posible crear ventanas, como en el siguiente ejemplo:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Esto es una prueba" width="400" height="200" screenX="100" screenY="100" />
Etiquetas[]
Las etiquetas son un elemento pasivo pero realmente importante, puesto que proporcionan información vital sobre el funcionamiento de las etiquetas. XUL permite utilizarlas:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Etiquetas" width="400" height="200" screenX="100" screenY="100"> <label value="Soy una etiqueta"/> </window>
Cuadros de texto[]
Como no podía ser de otra forma, XUL permite utilizar cuadros de texto:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Cuadros de texto" width="400" height="200" screenX="100" screenY="100"> <label value="Cuadro de texto:"/> <textbox id="text1" value="Una sóla línea."/> <label value="Más de una línea:"/> <textbox id="text1" multiline="true" rows="1" value="Más de una línea."/> <label value="Contraseña:"/> <textbox id="text1" type="password" value="contraseña"/> </window>
Casillas de verificación[]
Otro elemento imprescindible son las casillas de verificación:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Casillas de verificación" width="400" height="200" screenX="100" screenY="100"> <label value="Género:"/> <checkbox id="genero_drama" checked="true" label="Drama"/> <checkbox id="genero_comedia" label="Comedia"/> <checkbox id="genero_aventuras" label="Aventuras"/> <checkbox id="genero_romance" label="Romance"/> <checkbox id="genero_cifi" label="Ciencia Ficción"/> </window>
Botones de opción[]
XUL permite la creación de botones de opción de la siguiente forma:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Botones de opción" width="400" height="200" screenX="100" screenY="100"> <label value="Calificación:"/> <radiogroup> <radio id="calificacion_0" value="0" label="Lo peor"/> <radio id="calificacion_1" value="1" label="Mala"/> <radio id="calificacion_3" value="2" label="Regular"/> <radio id="calificacion_4" value="3" selected="true" label="Buena"/> <radio id="calificacion_5" value="4" label="Imprescindible"/> <radio id="calificacion_5" value="5" label="Obra maestra"/> </radiogroup> </window>
Botones[]
Aunque aún no permiten realizar ninguna acción, el siguiente código sirve para crear un par de botones:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Botones" width="400" height="200" screenX="100" screenY="100"> <button id="aceptar" label="Aceptar"/> <button id="cancelar" default="true" label="Cancelar"/> </window>
Acciones[]
Vamos a enlazar el primer ejemplo que vimos con la creación de una acción que ocurra al pulsar un botón:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="prueba" title="Botones y acción" width="400" height="200" screenX="100" screenY="100"> <script src="09-accion.js"/> <button id="aceptar" label="Aceptar" onclick="boton_aceptar()"/> <button id="cancelar" default="true" label="Cancelar" onclick="boton_cancelar()"/> </window>
El código que se ejecutará al hacer clic en los botones es el siguiente:
function boton_aceptar(){ alert("Ha aceptado."); } function boton_cancelar(){ alert("Ha cancelado."); }
Ejemplo terminado[]
El siguiente código se puede utilizar como base para crear una aplicación para la gestión de una base de datos de películas:
<?xml version="1.0" encoding="iso-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Nueva película"> <script src="11-filmoteca.js"/> <vbox> <hbox> <groupbox> <caption label="Personal"/> <label value="Título:"/> <textbox id="titulo"/> <label value="Director:"/> <textbox id="director"/> <label value="Productor:"/> <textbox id="productor"/> <label value="Guionista:"/> <textbox id="guionista"/> <label value="Protagonista:"/> <textbox id="protagonista"/> </groupbox> <vbox> <label value="Género:"/> <checkbox id="genero_drama" checked="true" label="Drama"/> <checkbox id="genero_comedia" label="Comedia"/> <checkbox id="genero_aventuras" label="Aventuras"/> <checkbox id="genero_romance" label="Romance"/> <checkbox id="genero_cifi" label="Ciencia Ficción"/> </vbox> <vbox> <label value="Calificación:"/> <radiogroup> <radio id="calificacion_0" value="0" label="Lo peor"/> <radio id="calificacion_1" value="1" label="Mala"/> <radio id="calificacion_3" value="2" label="Regular"/> <radio id="calificacion_4" value="3" selected="true" label="Buena"/> <radio id="calificacion_5" value="4" label="Imprescindible"/> <radio id="calificacion_5" value="5" label="Obra maestra"/> </radiogroup> </vbox> </hbox> <hbox align="right"> <button id="aceptar" label="Aceptar" default="false" onclick="boton_aceptar()"/> <button id="cancelar" label="Cancelar" default="true"/> </hbox> </vbox> </window>
También será necesario el siguiente código:
function boton_aceptar(){ var xXML = ""; var sPrologo = "<?xml version=\"1.0\" encoding=\"iso-8859-15\"?>\n"; var sPeliculaInicio = "<pelicula>\n"; var sPeliculaCierre = "</pelicula>\n"; var sTituloInicio = "<titulo>\n"; var sTituloCierre = "</titulo>\n"; var sTitulo = document.getElementById("titulo").value + "\n"; sXML = sPrologo + sPeliculaInicio + sTituloInicio + sTitulo + sTituloCierre + sPeliculaCierre; alert(sXML); }
Enlaces interesantes[]
Puede que encuentres interesantes los siguientes enlaces relacionados con este capítulo:
- La página de XUL en la Web de Mozilla.
- Una página Web dedicada en exclusiva a esta tecnología.
- XUL#, una versión de XUL realizada con C#.
- Un artículo muy interesante sobre XUL.