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:
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 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>
<pre>
<menubar id="MenuBar">
<menu id="File" label="Archivo" accesskey="a">
<menupopup id="MenuArchivo">
<menuitem label="Nuevo" accesskey="n"/>
<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 (Cut)"/>
<menuitem label="Pegar" accesskey="p" disabled="true"/>
</menupopup>
</menu>
<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.
<!--
<pre>
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
|