Wikilibros

Diferencia entre revisiones de «XUL»

Explorar historial interactivamente
← Edición anteriorEdición siguiente →
Contenido eliminado Contenido añadido
VisualWikitexto
m Más traducción
Traducción completada
Línea 132:
<menu id="Editar" label="Editar" accesskey="e">
<menupopup id="MenuEditar">
<menuitem label="Cortar" accesskey="t" acceltext="Ctrl + X (CutCortar)"/>
<menuitem label="Copiar" accesskey="c" acceltext="Ctrl + C (Copiar)"/>
<menuitem label="Pegar" accesskey="p" disabled="true"/>
Línea 202:
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==
<!--
</pre>
=Adding Event Handlers and Responding to Events=
<pre>
To make things really useful some type of scripting or application
level coding has to be done. In our example JavaScript will be used to add
functionality to the components. This is done in a similar fashion as to
scripting with HTML. With HTML, an event handler is associated with an
element and some action is initiated when that handler is activated. Most of
the handlers used with HTML are also found in XUL, in addition to some unique
ones. Scripting can be done in line, but a more efficient way is to create a
separate file with the needed scripts inside of it. This allows the page to
load faster since the rendering engine doesn’t have to decide what to do with
the embedded script tags.
That being said, we’ll first add a simple script, in line, as a first
example.
Let’s add a ‘onclick’ event handler to fire an alert box when an element
is selected. Inside the <window> tag add this line:
</pre>
 
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.
<table border="1" cellspacing="0" cellpadding="2">
 
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>
<td style="background-color:lightgrey">
<pre>onclick="alert(event.target.tagName); return false;"</pre>
<pre>
<sup>Figura 5.</sup>
Fig.5
</td></tr></table>
onclick="alert(event.target.tagName); return false;"
</pre></td></tr></table>
 
Ahora al accionar al ratón en cualquier elemento de la ventana aparecerá un mensaje mostrando el nombre de ese elemento.
<pre>
Now when you click on any element in the window you created an alert box
pops up telling you the name of the element. One interesting thing to note.
When you click on the text enclosed by the description tag the response is
undefined but when you click on the text wrapped by the label tag you get the
tabName label.
This implies that a description tag is not really an element.
After playing with the alert box, delete that line and add this inside the
opening tag of the ‘Close’ menu item in the ‘File’ menu:
</pre>
 
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.
<table border="1" cellspacing="0" cellpadding="2">
 
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>
<td style="background-color:lightgrey">
<pre>oncommand="window.close()"</pre>
<pre>
<sup>Figura 6.</sup>
Fig.6
</td></tr></table>
oncommand="window.close()"
</pre></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.
<pre>
Now when you click on ‘Close’ or use the ‘C’ as a hot key, the entire
window will close. The oncommand event handler is actually preferred over
onclick because oncommand can handle hot keys and other non-mouse events.
 
Ahora se agregará algo más, Let’sagreguesé tryel onecódigo morede thing.la figura Add7 thisjusto rightdespues afterde thela openingetiqueta <window> tag.
</pre>
 
<table border="10" cellspacing="0" cellpadding="2" style="background-color:#F5F5F5" align="center">
<tr style="vertical-align:top;">
<td>
<td style="background-color:lightgrey">
<pre>
 
Fig.7
<script>
function show(){
var meter=document.getElementById('prgmeter');
{
meter.setAttribute("style","display: visible;");
var meter=document.getElementById('prgmeter');
var tx=document.getElementById('txt');
meter.setAttribute("style","display: visible;");
tx.setAttribute("style","display: visible;");
var tx=document.getElementById('txt');
}
tx.setAttribute("style","display: visible;");
 
}
function hide(){
var meter=document.getElementById('prgmeter');
function hide()
meter.setAttribute("style","display: none;");
{
var metertx=document.getElementById('prgmetertxt');
metertx.setAttribute("style","display: none;");
}
var tx=document.getElementById('txt');
 
tx.setAttribute("style","display: none;");
</script>
}
</script>
</pre></td></tr></table>
 
<pre>
These two functions first retrieve a reference to the progress meter and
the text element using their ids. Then both functions set the style attributes
of the progress meter and text element to have a display of 'visible'
or ‘none’ which will do just that: hide or display those two elements.
Now add two buttons that will provide the event to fire these two methods.
First, add a new box element to hold the buttons. The width
attribute of the box needs to be set otherwise the buttons will be laid out to
extend the length of the window.
</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’.
<table border="1" cellspacing="0" cellpadding="2">
 
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>
<td style="background-color:lightgrey">
<pre>
 
Fig.8
<box width="200px">
<button id="show" label="Show" default="true" oncommand="show();"/>
<button id="hide" label="Hide" default="true" oncommand="hide();"/>
</box>
</pre></td></tr></table>
 
=Conclusion=
<pre>
The examples shown in this chapter merely scratch the surface of XUL’s
capabilities. Even though these examples are very simple, one can see how easy
it would be to create more complex UI’s with XUL. With a complete set of the
standard components such as buttons and text boxes at the programmer’s
disposal, the programmer can code anything in XUL that can be coded in HTML.
The cross-platform ability of XUL is another bonus but the fact that it
doesn’t work with MicroSoft’s Internet Explorer may suppress XUL’s widespread
use. There is some hope that due to the delay in the development of the next
version of IE that XUL may find it’s way into IE, but don’t hold your breath.
</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==
Obtenido de «https://es.wikibooks.org/wiki/XUL»