|
==ObjetivosÍndice de aprendizajecontenido==
# Obtener las nociones básicas de lo que es XUL.
# Aprender los conceptos basicos de la librería de componentes gráficos.
# Crear páginas estáticas simples.
# Agregar manejadores de eventos a una página XUL.
<table align="left">
==Introducción==
<tr><td>[[Imagen:Xul.png]]</td>
XUL (puede pronunciarse como zul o csul) son las siglas de Lenguaje de interfaz de usuario extensible (del inglés: ''e'''X'''tensible '''U'''ser interface '''L'''anguage''), 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 tán 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 caracteristicas 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ápitulo.
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 implicitas 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 titulos de ventanas son ejemplos de elementos que son parte típica del cromo" ([[#1|1]]). Cromo es el termino 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 (La pelicula de los Cazafantasmas).
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>
<?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>
</pre>
<sup>Figura 1.</sup>
</td></tr></table>
El siguiente elemento notorio es la etiqueta <window> (ventana). Está 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'' (titulo) no es necesario, es una buena práctica dar un nombre descriptivo, el titulo se mostrará en la barra de titulo 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á automaticamente y sabrá que 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 minusculas.
*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
==Primer ejemplo==
¿Qué mejor manera para comenzar que el viejo "Hola mundo"?. Para empezar puede usarse un editor de texto (excepto MS Word) como Gedit, Jext o Notepad y pegar ahí el código de la figura 2.
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>
<?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>
</pre>
<sup>Figura 2.</sup>
</td></tr></table>
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==
Como se mencionó, XUL tiene una gran libreria 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 logar 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), entre 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 tambien existen los atributos "width" y "height", que definen la preferencia de tamaño del componente.
Ahora pongase etiquetas de inicio y fin <toolbox> y despues un par similar pero de <tabbox>. Agreguese el código de la figura 3 dentro de las etiquetas <toolbox>.
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>
<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>
</pre>
<sup>Figura 3.</sup>
</td></tr></table>
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 menu 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 encurntre 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:
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>
<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 atrubutos 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>
</pre>
<sup>Figura 4.</sup>
</td></tr></table>
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==
Para 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 XUL.
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>onclick="alert(event.target.tagName); return false;"</pre>
<sup>Figura 5.</sup>
</td></tr></table>
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 obiene el valor del nombre de esa etiqueta. Esto implica que una etiqueta <description> no es realmente un elemento.
Despues 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’.
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>oncommand="window.close()"</pre>
<sup>Figura 6.</sup>
</td></tr></table>
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 despues de la etiqueta <window>.
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>
<script>
function show(){
var meter=document.getElementById('prgmeter');
meter.setAttribute("style","display: visible;");
var tx=document.getElementById('txt');
tx.setAttribute("style","display: visible;");
}
function hide(){
var meter=document.getElementById('prgmeter');
meter.setAttribute("style","display: none;");
var tx=document.getElementById('txt');
tx.setAttribute("style","display: none;");
}
</script>
</pre>
<sup>Figura 7.</sup>
</td></tr></table>
Esté codigo, 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
<table border="0" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<pre>
<box width="200px">
<button id="show" label="Show" default="true" oncommand="show();"/>
<button id="hide" label="Hide" default="true" oncommand="hide();"/>
</box>
</pre>
<sup>Figura 8.</sup>
</td></tr></table>
==Conclusion==
Los ejemplos mostrados en este capítulo son solo una muestra superficial de las capacidades de XUL. Aunque estos ejemplos son simples, es posible ver los 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).
==Información==
===Referencias===
====1==== ‘Configurable Chrome’ de Dave Hyatt (hyatt@netscape.com) <br/>
última modificación 4/7/99 http://www.mozilla.org/xpfe/ConfigChromeSpec.html
====2==== XML User Interface Language (XUL) The Mozilla Organization http://www.mozilla.org/projects/xul
====3==== XulPlanet <br/>
http://www.xulplanet.com
*<font style="font: 16pt arial;">[[XUL:Introducción|Introducción]]</font>
====4==== XUL Programmer's Reference Manual, Fifth Draft: Updated for XUL 1.0 <br/>
*<font style="font: 16pt arial;">[[XUL:Primer_ejemplo|Primer ejemplo]]</font>
http://www.mozilla.org/xpfe/xulref
<br>
*<font style="font: 16pt arial;">[[XUL:Referencias|Referencias]]</font>
</td>
</tr>
</table>
===Autores===
Autores originales de la versión en inglés: <br/>
Autor: Stephen Pavlik, Editor: Michael Lodick
Traducción al español: <br/>
[[Usuario:Miguel angel|Miguel angel]]
| 