Wikilibros

Diferencia entre revisiones de «XUL»

Explorar historial interactivamente
Edición siguiente →
Contenido eliminado Contenido añadido
VisualWikitexto
Inicio de traducción
 
Más traducción y formato
Línea 1:
==Objetivos de aprendizaje==
# Obtener las nociones básicas de lo que es XUL.
# Aprender los conceptos basicos de la librerialibrería de componentes gráficos.
# Crear páginas estáticas simples.
# Agregar manejadores de eventos a una página XUL.
# Add event handlers to a XUL page.
 
 
==Introducción==
 
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.
Línea 33:
 
 
<table border="10" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
Línea 45:
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
. . . (addagregar elementselementos hereaquí)
</window>
</pre>
<sup>Figura. 1.</sup>
</td></tr></table>
 
La siguiente cosa notoria 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 de identificar la ventana para que el código de los lenguajes (''scripts'') puedan 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.
 
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
As was stated earlier a XUL document is used to create user interfaces.
UI are generally full of interactive components such as text boxes, buttons
and the like. A XUL document accomplishes this with the use of widgets, which
are self-contained components with pre-defined behavior. For example buttons
will respond to mouse clicks and menu bars can hold buttons. All the normally
accepted actions of GUI components are built in to the widgets. There is
already a rich library of predefined widgets, but because this is open source,
any one can define a widget or a set of widgets for themselves.
The widgets are ‘disconnected’ until they are programmed to work
together. This can be done simply with JavaScript or a more complex
application can be made using something like C++ or Java. In this chapter we
will use JavaScript to illustrate XUL’s uses and potential.
Also, a XUL file should have .xul extension. The Mozilla browser will
automatically recognize it and know what to do with it when you click on it.
Optionally, an .xml extension could be used but you would have to open the
file within the browser.
One more thing needs to be mentioned. There are a few syntax rules to
follow and they are:
• All events and attributes must be written in lowercase.
• All strings must be double quoted.
• Every XUL widget must use close tags (either <tag></tag> or <tag/>) to be well-formed.
• All attributes must have a value.
</pre>
=A First Example=
 
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.
<pre>
What better way to start then with the good old ‘Hello World’ example.
Open up a text editor (not MS Word) like notepad or TextPad and type in:
</pre>
 
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.
<table border="1" cellspacing="0" cellpadding="2">
 
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>
<td style="background-color:lightgrey">
<pre>
Fig.2
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="Hello"
title="Hello World Example"
orient="vertical"
persist="screenX screenY width height"
xmlns= "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<window
<description style='font-size:24pt'>Hello World</description>
id="Hola"
<description value='Hello World' style='font-size:24pt'/>
title="Ejemplo: hola mundo"
<label value = 'Hello World' style='font-size:24pt'/>
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></td></tr></table>
<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.
 
<!--
 
 
<pre>
Save it anywhere but be sure to give the file the .xul extension. Now
just double click on it and it should open in your Mozilla or Netscape
browser. You should get ‘Hello World’ three times, one on top of the other.
Notice the different ways that ‘Hello World’ was printed: twice from a
description tag and once from a label tag. Both <description> and <label> are
text related tags. Using the description tag is the only way to write text
that is not contents of a ‘value’ attribute. In the second and third examples
the text is expressed as an attribute to the tag. You can see here that the
orient attribute in window is set to ‘vertical’. That is why the text is
output in a column. Otherwise, if orient was set to ‘horizontal’, all the text
would be on one line. Try it.
Now let’s start adding some more interesting elements.
</pre>
Línea 383 ⟶ 363:
-->
 
==ReferenciasInformación==
 
===Referencias===
===1=== ‘Configurable Chrome’ de Dave Hyatt (hyatt@netscape.com) <br/>
 
====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
 
====4==== XUL Programmer's Reference Manual, Fifth Draft: Updated for XUL 1.0 <br/>
http://www.mozilla.org/xpfe/xulref
 
 
===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]]
 
 
[[en:XUL is COOL]]
Obtenido de «https://es.wikibooks.org/wiki/XUL»