XUL/Introducción

Objetivos de aprendizaje

Obtener las nociones básicas de lo que es XUL.
Aprender los conceptos básicos de la librería de componentes gráficos.

Introducción

XUL (puede pronunciarse como zul o csul) son las siglas de Lenguaje de interfaz de usuario extensible (del inglés: eXtensible User interface Language), es un lenguaje desarrollado para las interfaces de usuario (IU) de Netscape y Mozilla. Es parte del navegador de Internet Mozilla y otras aplicaciones relacionadas, y es parte de Gecko, que es el motor del navegador de siguiente generación de Netscape. De hecho XUL es tan poderoso que la interfaz completa del navegador Mozilla está implementada en este lenguaje.

De forma similar al HTML, en XUL es posible crear una interfaz usando un lenguaje de marcado, definir la apariencia de esta interfaz con hojas de estilo CSS y usar javascript para manipular su comportamiento; a diferencia del HTML, XUL tiene un conjunto extenso de componentes gráficos usados para crear menús, barras de herramientas, cajas de texto, entre muchos otros componentes.

En otras palabras, el XUL puede usarse para crear interfaces, multiplataformas, multidispositivos y ligeras.

La mayoría de las aplicaciones necesitan ser creadas usando características de una plataforma específica, lo que hace que su conversión a otras plataformas sea costosa en términos monetarios y de tiempo. Algunos usuarios querrían usar una aplicación en herramientas diferentes a una computadora tradicional, por ejemplo, dispositivos de mano. El lenguaje Java fue creado con ese proposito: ser multiplataforma y multidispositivo, pero la creación de interfaces de usuario en Java es una tarea difícil.

XUL fue diseñado para crear interfaces fácil y rápidamente, además está disponible en todas las versiones de Windows, Macintosh, Linux y Unix, pero el mayor inconveniente hasta el momento es que no es compatible con Internet Explorer.

Para ilustrar su potencial, en este capítulo se desarrollarán unos cuantos ejemplos. Se resalta la palabra potencial, debido a que las completas capacidades del XUL sobrepasan el alcance de este cápítulo.

Lo único necesario desde ahora es un navegador Mozilla 1.0 o Netscape 7.0, en esas versiones o superiores.

Lo básico

XUL es XML, y como todos los archivos XML, debe empezar con la declaración estándar de XML, Actualmente, XUL utiliza la versión 1.0.

No existen hojas de estilo implícitas para XUL, debido a esto, siempre debe existir una declaración de hoja de estilo asociada. Mozilla incluye una hoja de estilo estándar llamada "xul.css". Aún cuando sea posible cargar las hojas de estilo que se deseen, la mejor práctica es usar inicialmente "xul.css", ver figura 1.

Notese la referencia a "chrome" (del inglés cromo). "El cromo es la parte de la aplicación que está fuera del área de contenido de una ventana. Barras de herramientas, barras de menús, barras de progreso y títulos de ventanas son ejemplos de elementos que son parte típica del cromo" (1). Cromo es el término descriptivo para nombrar todos los elementos de una aplicación XUL. esto en referencia a los elementos cromados fuera de un automóvil. Es lo que llama la atención, los elementos en un archivo XML es lo que se ve en la ventana de un navegador.

Todos los documentos XML deben tener una declaración de espacio (único) de nombres (namespace). Los desarrolladores de XUL crearon un espacio de nombres que muestra el origen del nombre XUL.

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

<window>
id="window identifier"
title="XUL page"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
. . . (agregar elementos aquí)
</window>

^{Figura 1.}

El siguiente elemento notorio es la etiqueta <window> (ventana). Esta etiqueta es análoga a la etiqueta <body> (cuerpo) del HTML. Todos los elementos estarán dentro de la etiqueta window. En la figura 1, la etiqueta window tiene tres atributos, que son muy importantes. El atributo id es importante debido a que es la manera de identificar la ventana para que el código (script) de la aplicación pueda hacer referencia a ella. Aún cuando el atributo title (título) no es necesario, es una buena práctica dar un nombre descriptivo, el título se mostrará en la barra de título de la ventana. El siguiente atributo es muy importante, dice al navegador la dirección en la cual mostrar los elementos descritos en el archivo XUL, en este caso horizonal, naturalmente vertical es lo contrario. Vertical es el valor por omisión, así que si no se especifica "horizontal", los componentes aparecerán uno sobre otro.

Como se mencionó, un documento XUL, sirve para crear interfaces de usuario, las IU generalmente están llenas de componentes interactivos como cajas de texto, botones y otros elementos similares. Un documento XUL logra esto con el uso de componentes gráficos autocontenidos y con comportamiento predefinido. Por ejemplo, los botones responden a las pulsaciones de ratón, y las barras de menú pueden contener botones. Todas las acciones aceptadas de los componentes de IU están integradas en estos componentes interactivos. Ya existe una amplia gama de estos componentes, y debido a que es código libre, cualquiera puede definir un nuevo componente interactivo o un conjunto de ellos

Los componentes interactivos están "desconectados" hasta que son programados para trabajar de manera conjunta. Esto puede ser hecho con Javascript pero una aplicación más compleja podría usar algo como C++ o Java. En este capítulo se usará Javascript para ilustrar el uso y potencial de XUL.

Un archivo XUL debe tener una extensión .xul. El navegador mozilla lo reconocerá automáticamente y sabrá qué hacer cuando el usuario lo ejecute con el ratón. Puede usarse una extensión .xml pero es necesario abrir el archivo directamente con el navegador.

Existen otras reglas de sintaxis que es necesario tomar en cuenta:

Todos los eventos y atributos deben escribirse en minúsculas.
Todas las cadenas de texto deben estar entre comillas dobles (").
Todos los componentes interactivos deben tener etiquetas de cierre (<etiqueta></etiqueta> o <etiqueta/>) para ser bien formados.
Todos los atributos deben tener un valor.

Índice de contenido