Creando una ventana

Creando un archivo XUL

Un archivo XUL puede tener cualquier nombre, pero debería tener una extensión .xul. El archivo XUL más simple tiene la siguiente estructura:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Otros elementos irán aquí --> 
</window>

Esta ventana no hará nada, ya que no contiene ningún elemento UI (Interfaz de Usuario), éstos serán añadidos en la siguiente sección. A continuación veremos línea por línea el código de arriba:

1. <?xml version="1.0"?>
   Esta línea simplemente define que éste es un archivo XML, normalmente deberíamos añadir esta línea al inicio de cada fichero xul, al igual que pondríamos la etiqueta HTML al principio de un archivo HTML.
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
   Esta línea se usa para especificar la hoja de estilos a utilizar por el archivo, y es la sintaxis que los ficheros XML utilizan para importar hojas de estilo. En este caso, nosotros importaremos los estilos ubicados en el apartado global de un paquete de temas. No especificaremos ningún fichero así Mozilla determinará que ficheros del directorio utilizar. En este caso, el todo-importante fichero global.css es seleccionado. Este fichero contiene todas las declaraciones por defecto para todos los elementos XUL. Como XML no sabe cuantos elementos debe visualizar, el fichero lo indica. Generalmente, deberemos poner esta línea en la parte superior de cada archivo XUL. También podemos importar otra hoja de estilos utilizando una sintaxis parecida. Normalmente importamos la hoja de estilo global desde dentro de nuestro archivo de estilos.
3. <window
   Esta línea declara que estamos describiendo una window. Cada ventana de la interfaz de usuario es descrita en un fichero por separado. Esta etiqueta es parecida a la etiqueta BODY en HTML que engloba todo el contenido. Los atributos de la ventana serán colocados aquí, en este caso hay cuatro. En el ejemplo cada atributo es colocado en una línea distinta pero esto no debe ser hacer necesariamente.
4. id="findfile-window"
   El atributo id es usado como un identificador, de esta manera la ventana puede ser llamada desde scripts. Usualmente colocarás el atributo id a todos los elementos. El nombre lo eliges tú.
5. title="Find Files"
   Este atributo muestra el texto que aparecerá en la barra de títulos cuando se muestre la ventana. En el ejemplo aparecerá "Find Files".
6. orient="horizontal"
   Este atributo indica el orden de los ítems dentro de la ventana. El valor horizontal indica que los ítems serán colocados a través de la ventana. También puedes usar el valor vertical que ordenará los ítems en una columna. Este es el valor por defecto, asi que tal vez desees no utilizar este atributo si deseas mostrar los datos en columnas.
7. xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   Esta línea declara el nombre para XUL, que deberías colocar dentro de la etiqueta window para indicar que todo eso es XUL. Esta dirección no será descargada, Mozilla la reconocerá internamente.
8. <!-- Otros elementos van aquí -->
   Escribe en este bloque otros elementos (botones, menúes, y otros componentes de interfaz) que aparecen en la ventana. Pondremos algo de eso en el siguiente tomo de la sección..
9. </window>
   Finalmente, debemos cerrar la etiqueta al final del fichero.

Abriendo una ventana

Al fin de abrir una ventana XUL, varios métodos son aplicables. Si se está solo en el estado del desarrollo, se puede escribir la URL (empezando con chrome:, file: o cualquier otro tipo de URL) en la barra de dirección de Mozilla. También se puede hacer doble clic sobre el archivo en la pantalla 'Abrir archivo', suponiendo que los archivos XUL están asociados a Mozilla. La ventana XUL aparecerá en la ventana del navegador en lugar de en una nueva ventana, pero suele ser suficiente durante los principios del desarrollo.

El camino correcto, naturalmente, es de abrir la ventana utilizando a JavaScript. No es necesaria una sintaxis nueva se puede usar la función window.open() igual que para los documentos HTML. Aún así, una opción adicional, llamada 'chrome' es necesaria para indicar al navegador que el documento a abrir es chrome. Ésta se abrirá sin barra de herramientas, ni menúes o cualquier otra cosa de las que suele tener de normal un navegador. La sintaxis se describe a continuación:

window.open(url,windowname,flags);

donde el argumento 'flags' contiene "chrome" como en este ejemplo:

window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");

Podemos usar el parámetro en línea de comando '-chrome' para especificar que archivo XUL tendrá que abrir Mozilla al empezar. Si no se ha especificado, la ventana por defecto será abierta (habitualmente la ventana del navegador). Por ejemplo, podríamos abrir el dialogo de búsqueda con una de las siguientes órdenes:

mozilla -chrome chrome://findfile/content/findfile.xul 
 
mozilla -chrome resource:/chrome/findfile/content/findfile.xul

Si utilizamos esta orden en línea (suponiendo que se pueda hacer en nuestra plataforma), el dialogo de búsqueda de archivo será abierto por defecto en lugar de la ventana de Mozilla. Pero como no hemos puesto ningún elemento gráfico, no la veremos. Colocaremos algunos elementos en la sección siguiente.

Para ver aún así el efecto, lo siguiente abrirá la ventana de marcadores:

Para Mozilla
mozilla -chrome chrome://communicator/content/bookma...rksManager.xul

Para Firefox
firefox -chrome chrome://browser/content/bookmarks/b...rksManager.xul

El argumento '-chrome' no da al archivo ningún privilegio adicional. En su lugar, causa que el archivo especificado se abra como una ventana en el nivel superior sin ningun atributo del browser chrome, como el campo de direcciones o menus. Solo las URLs chrome tienen privilegios adicionales.

Problemas

• Si la ventana XUL no se muestra en el escritorio pero tiene un icono en la barra de tareas, revisaremos la declaración 'xml-stylesheet'. Nos aseguraremos de haber incluido correctamente la hoja de estilo:

 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>