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 alala 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>.
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:
In the popup menu is the list of
menu items. Each of these has an ‘accesskey’ attribute. This attribute
underlines the letter and provides the reference for making a hot key for that
menu item. Notice in the Edit menu, both ‘Cut’ and ‘Copy’ have accelerator
text labels. In the File menu there is a <menuseperator/> tag. This places a
line across the menu that acts as a visual separator. In the Edit menu,
notice the menu item labeled ‘Paste’ has an attribute: disabled=”true”. This
causes the Paste label to be grayed out in that menu and finally in the View
menu the menu items there are actually checkboxes. The first one is checked
by default and the second one is not.
Now on to the <tabbox>. Let’s make three different sheets with
different elements on them. Here’s the code:
</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.4
<tabbox flex="1">
<tabs>
<tab id="Tab1" label="Sheet1" selected="true"/>
<tab id="Tab2" label="Sheet2"/>
<tab id="Tab3" label="Sheet3"/>
</tabs>
 
<tabpanelstabbox flex="1">
<tabs>
<tabpanel flex="1" id="Tab1Sheet" orient="vertical" >
<tab id="Tab1" label="Sheet1Hoja1" selected="true"/>
<description style="color:red;">
<tab id="Tab2" label="Sheet2Hoja2"/>
This doesn't do much.
<tab id="Tab3" label="Sheet3Hoja3"/>
Just shows some of the style attributes.
</tabs>
</description>
</tabpanel>
 
<tabpaneltabpanels flex="1" id="Tab2Sheet" orient="vertical">
<tabpanel flex="1" id="Tab1SheetHojaLeng1" orient="vertical" >
<description class="normal">
<description style="color:red;">
Hey, the slider works (for free).
Esto casi no hace nada.
</description>
Solo muestra algunos atrubutos de estilo.
<scrollbar />
</tabpaneldescription>
</tabpanel>
<tabpanel flex="1" id="Tab3SheetHojaLeng2" orient="vertical">
<description class="normal">
¡Hey, la barra de desplazamiento funciona! (y gratis).
</description>
<scrollbar />
</tabpanel>
<tabpanel flex="1" id="HojaLeng3" orient="vertical">
<hbox>
<text value="ProgressMedidor de Meterprogreso" id="txt" style="display:visible;" />
<progressmeter id="prgmetermedPrg" mode="undetermined"
style="display:visible;" label="ProgressMedidor Barde progreso" />
</hbox>
<description value="Wow¡Ohh, XUL!más que Iel meanhola coolmundo!"/>
</tabpanelstabpanel>
</tabboxtabpanels>
 
</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>
The tabs are first defined with <tab> and they are given an id and
</pre></td></tr></table>
label. Next, a set of associated panels is created, each with different
 
content. The first one is to show that like HTML style sheets can be applied
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.
in line. The second two sheets have component type elements in them. See how
 
the slider works and the progress bar is running on its own. All these
<!--
elements are very nice and easy to put into a window, but by themselves they
don’t do anything. Now we have to connect things with some other code.
</pre>
=Adding Event Handlers and Responding to Events=