Diferencia entre revisiones de «XUL»

Contenido eliminado Contenido añadido
Más traducción y formato
Sin resumen de edición
Línea 4:
# Crear páginas estáticas simples.
# Agregar manejadores de eventos a una página XUL.
 
 
==Introducción==
Línea 95 ⟶ 94:
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:
Now let’s start adding some more interesting elements.
</pre>
=Adding Widgets=
 
<pre>
As stated earlier, XUL has an existing rich library of elements fondly
called widgets. These include buttons, text boxes, progress bars, sliders and
a host of other useful items. One good listing can be found at:
 
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).
There has to be some place to put all of these things and like the <body>
tag in HTML, the <box> tag in XUL is used to house the widgets. In other
words, boxes are containers that encapsulate other elements. There are a
number of different <box> types. In this example we’ll use <hbox>, <vbox>,
<toolbox> and <tabbox>.
<hbox> and <vbox> are synonymous with the attributes ‘orient = “horizontal”’ and
‘orient = “vertical”’ respectively form the <window> tag. By using these two
boxes, discrete sections of the window can have their own orientation. These
two elements can hold all of the other elements and can even be nested.
The tags <toolbox> and <tabbox> serve special purposes. <toolbox> is
used to create tool bars at the top or bottom of the window while <tabbox>
sets up a series of tabbed sheets in the window.
Take the XUL framework from Fig. 1 and replace “. . .( add elements
here)” with a <vbox> tag pair (that’s both open and close tags). This will
be the outside container for the rest of the elements. Remember, the <vbox>
means that elements will be positioned vertically in order of appearance. Add
the attribute ‘flex=”1” ‘. This will make the menu bar extend all the way
across the window.
The ‘flex’ attribute needs some explanation since it is a primary way
of sizing and positioning the elements on a page. Flex is a dynamic way of
sizing and positioning widgets in a window. The higher the flex number (1
being highest), the more that widget gets priority sizing and placement over
widgets with lower flex settings. All elements have size attributes, such as
width and/or height, that can be set to an exact number of pixels but using
flex insures the same relative sizing and positioning when resizing a window
occurs.
Now put a pair each of <toolbox> and <tabbox> tags inside of the
<vbox> tags with <toolbox> first. As was said <toolbox> is used to create
tool bars so lets add a toolbar similar to the one at the top of the browser.
Put this code between the <toolbox> tabs:
</pre>
 
<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.
<table border="1" cellspacing="0" cellpadding="2">
 
<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 ala 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>
<td style="background-color:lightgrey">
<pre>
<menubar id="MenuBar">
Fig.3
<menu id="File" label="Archivo" accesskey="a">
<menubar id="MenuBar">
<menupopup id="MenuArchivo">
<menu id="File" label="File" accesskey="f">
<menuitem label="Nuevo" accesskey="n"/>
<menupopup id="FileMenu">
<menuitem label="NewAbrir..." accesskey="nb"/>
<menuitem label="Open...Guardar" accesskey="og"/>
<menuitem label="SaveGuardar como..." accesskey="sg"/>
<menuitem label="Save As..." accesskey="s"/>
<menuseparator/>
<menuitem label=" ... "/>
<menuitem label="Cerrar" accesskey="c" />
<menuseparator/>
</menupopup>
<menuitem label="Close" accesskey="c" />
</menu>
</menupopup>
<menu id="Editar" label="Editar" accesskey="e">
</menu>
<menupopup id="MenuEditar">
<menu id="Edit" label="Edit" accesskey="e">
<menuitem label="Cortar" accesskey="t" acceltext="Ctrl + X (Cut)"/>
<menupopup id="EditMenu">
<menuitem label="CutCopiar" accesskey="tc" acceltext=" Ctrl + XC (Copiar)"/>
<menuitem label="Pegar" accesskey="p" disabled="true"/>
(Cut)"/>
</menupopup>
<menuitem label="Copy" accesskey="c" acceltext=" Ctrl + C
</menu>
(Copy)"/>
<menuitemmenu labelid="PasteVer" accesskeylabel="pVer" disabledaccesskey="truev"/>
</menupopup id="MenuVer">
<menuitem id="CajaHerramientas1" label="Caja de herramientas 1"
</menu>
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.
 
<!--
<menu id="View" label="View" accesskey="v">
<menupopup id="ViewMenu">
<menuitem id="Tool Bar1" label="Tool Bar1"
type="checkbox" accesskey="1" checked="true"/>
<menuitem id="Tool Bar2" label="Tool Bar2"
type="checkbox" accesskey="2" checked="false"/>
</menupopup>
</menu>
</menubar>
</pre></td></tr></table>
 
<pre>
There should now be a menu bar with “File Edit View” in it and they
should each expand when you click on them. Let’s examine the elements and
their attributes more closely to see how they work.
First the <menubar> holds all of the menu items (File, Edit ,View).
Next there are the three different menu items. Each menu has a set of elements