Diferencia entre revisiones de «XUL»
Contenido eliminado Contenido añadido
mSin resumen de edición |
m Más traducción |
||
Línea 110:
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
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>.
Línea 152:
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="
<tr style="vertical-align:top;">
<td>
<pre>
<tabs>▼
<tab id="Tab1" label="Sheet1" selected="true"/>▼
<tab id="Tab2" label="Sheet2"/>▼
<tab id="Tab3" label="Sheet3"/>▼
</tabs>▼
<tabpanel flex="1" id="Tab1Sheet" orient="vertical" >▼
<description style="color:red;">▼
</description>▼
</tabpanel>▼
<description class="normal">▼
Esto casi no hace nada.
Solo muestra algunos atrubutos de estilo.
<scrollbar />▼
¡Hey, la barra de desplazamiento funciona! (y gratis).
<tabpanel flex="1" id="HojaLeng3" orient="vertical">
</tabbox>
▲ <tabpanel flex="1" id="Tab3Sheet" orient="vertical">
▲ <hbox>
▲ <text value="Progress Meter" id="txt" style="display:visible;" />
▲ <progressmeter id="prgmeter" mode="undetermined"
▲ style="display:visible;" label="Progress Bar" />
▲ </hbox>
▲ <description value="Wow, XUL! I mean cool!"/>
▲ </tabpanel>
▲ </tabpanels>
▲ </tabbox>
</pre></td></tr></table>▼
</pre>
<sup>Figura 4.</sup>
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.
▲<!--
</pre>
=Adding Event Handlers and Responding to Events=
|