Tutorial de XUL:Más funciones de menú

De MDC

In this section, we'll look at creating submenus and checked menus

Tabla de contenidos 1 Creando submenúes 2 Adición de un menú al archivo de búsqueda del ejemplo 3 Añadiendo casillas seleccionadas en los menúes 3.1 Menú con botones de selección

[editar] Creando submenúes

Puedes crear submenus dentro de otros menús (menús jerarquizados ) usando los elementos existentes. Recuerda que puedes poner cualquier elemento dentro de un menupopup. Hemos mirado la colocación de menuitems and menuseparators en menupopups. Sin embargo , puedes crear submenúes simplemente colocando el elemento del menu dentro del elemento del menupopup . Esto funciona porque el elemento del menú es válido aun cuando no está colocado directamente en la barra de menu. El ejemplo de abajo crea un simple submenu dentro del menú de archivo.

Ejemplo 1: Código Ver en funcionamiento

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="Archivo">
      <menupopup id="file-popup">
        <menu id="new-menu" label="Nuevo">
          <menupopup id="new-popup">
            <menuitem label="Ventana"/>
            <menuitem label="Mensage"/>
          </menupopup>
        </menu>
        <menuitem label="Abrir"/>
        <menuitem label="Guardar"/>
        <menuseparator/>
        <menuitem label="Salir"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

[editar] Adición de un menú al archivo de búsqueda del ejemplo

Let's add a menu to the find files dialog. We'll just add a few simple commands to a File menu and an Edit menu. This is similar to the example above.

<toolbox>

 <menubar id="findfiles-menubar">
  <menu id="file-menu" label="Archivo" accesskey="f">
    <menupopup id="file-popup">
      <menuitem label="Abrir la búsqueda..." accesskey="o"/>
      <menuitem label="Guardar la búsqueda..." accesskey="s"/>  
      <menuseparator/>
      <menuitem label="Cerrar" accesskey="c"/>
    </menupopup>
  </menu>
  <menu id="edit-menu" label="Editar" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem label="Cortar" accesskey="t"/>
      <menuitem label="Copiar" accesskey="c"/>
      <menuitem label="Pegar" accesskey="p" disabled="true"/>
    </menupopup>
  </menu>
 </menubar>

<toolbar id="findfiles-toolbar>

Here we have added two menus with various commands on them. Notice how the menu bar was added inside the toolbox. The three dots after Open Search and Save Search are the usual way that you indicate to the user that a dialog will open when selecting the command. Access keys have been added for each menu and menu item. You will see in the image that this letter has been underlined in the menu label. Also, the Paste command has been disabled. We'll assume that there's nothing to paste.

Archivo de búsqueda de ejemplo : Código Ver en funcionamiento

[editar] Añadiendo casillas seleccionadas en los menúes

Muchas aplicaciones tienen artículos de menú que son comprobados por ellas. Por ejemplo, una característica que este activada hace la comprobación de que esa característica que está desactivada no ha sido chequeada. Cuando el usuario selecciona el menu, se cambia el estado de la comprobacíon. Si deseas crear radio buttons en las secciones del menu.

The checks are created in a similar way to the checkbox y radio elements. This involves the use of two attributes: type to indicate the type of check, and name to group commands together. The example below creates a menu with a checked item.

Ejemplo 2: Código Ver en funcionamiento

<toolbox>
  <menubar id="options-menubar">
    <menu id="options_menu" label="Opciones">
      <menupopup>
        <menuitem id="backups" label="Hacer copias de seguridad" type="checkbox"/>
        <menuitem id="backups" label="Enviar un email al administrador" type="checkbox" checked="true"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

The type attribute has been added which is used to make the menu item checkable. By setting its value to checkbox, the menu item can be checked on and off by selecting the menu item.

[editar] Menú con botones de selección

In addition to standard checks, you can create the radio style of checks by setting the type to a value of radio. A radio check is used when you want a group of menu items where only one item can be checked at once. An example might be a font menu where only one font can be selected at a time. When another item is selected, the previously selected item is unchecked.

In order to group a set of menu items together, you need to put a name attribute on each one to group. Set the value to the same string. El ejemplo siguiente lo demuestra:

Ejemplo 3: Código Ver en funcionamiento

<toolbox>
  <menubar id="planets-menubar">
    <menu id="planet-menu" label="Planetas">
      <menupopup>
        <menuitem id="júpiter" label="Júpiter" type="radio" name="ringed"/>
        <menuitem id="saturno" label="Saturno" type="radio" name="ringed" checked="true"/>
        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
        <menuseparator/>
        <menuitem id="tierra" label="Tierra" type="radio" name="inhabited" checked="true"/>
        <menuitem id="luna" label="Luna" type="radio" name="inhabited"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

If you try this example, you'll find that of the first three menu items, only one can be checked. They are grouped together because they all have the same name. The last menu item, Earth, while a radio button, is not part of this group because it has a different name.

Of course, the grouped items all have to be within the same menu. They don't have to be placed next to each other in the menu, although it doesn't make as much sense if they aren't.

Seguimos con la creación de menúes emergentes.