Barras de menús simples

En esta sección veremos cómo crear una barra de menús.

Crear un menú

XUL tiene varias formas de crear un menú. La más simple es agregar una barra de menús con una fila de menús en ella como tienen muchas aplicaciones. También se pueden crear menús emergentes. Las características de menús en XUL consisten en una cantidad de elementos diferentes que permiten la creación de barras de menú o menús emergentes. Los elementos u opciones en dichos menús pueden ser personalizados sin mucha dificultad. Vimos ya una parte de cómo construir un menú usando menulist. En esta sección ampliaremos el tema.

Las barras de menús son creadas, generalmente, de manera muy similar a las barras de herramientas o toolbar. Una barra de menús puede ser ubicada de manera opcional dentro de una toolbox (caja de herramientas) y el menú funcionará como cualquier otra barra de herramientas. XUL, sin embargo, tiene ciertos elementos de menú especiales que proporcionará funciones características de los menús clásicos.

Hay 5 elementos asociados con la creación de una barra de menús y sus menús, que se explican brevemente a continuación pero en los que se profundizará más adelante:

menubar

 

El contenedor de una fila de menús.

menu

A pesar del nombre, es sólo el título del menú en la barra (menubar). Este elemento puede aparecer, también, de forma separada.

menupopup

 

La ventana emergente que aparecerá cuando se haga clic en el título del menú. Esta caja contendrá una lista de comandos.

menuitem

 

Un comando en un menú. Aparece dentro de menupopup.

menuseparator

 

Una barra de separación en un menú. Aparece dentro de menupopup.

Ahora ya se pueden personalizar los menús  dentro de una barra de menús para poder contener lo que queramos en cualquier plataforma excepto Macintosh. Esto es debido a que Macintosh posee su menú especial propio en la parte superior de la pantalla y es controlado por el sistema. Si bien se pueden crear menús personalizados, cualquier regla de estilo especial o elementos que no sean menús pueden ser omitidos. Esto se debe tener muy presente al crear menús.

Ejemplo de una barra de menús simple

Ejemplo:

<toolbox flex="1">
  <menubar id="ejemplo-barra-de-menus">
    <menu id="menu-archivo" label="Archivo">
      <menupopup id="archivo-emergente">
        <menuitem label="Nuevo"/>
        <menuitem label="Abrir"/>
        <menuitem label="Guardar"/>
        <menuseparator/>
        <menuitem label="Salir"/>
      </menupopup>
    </menu>
    <menu id="menu-editar" label="Editar">
      <menupopup id="editar-emergente">
        <menuitem label="Deshacer"/>
        <menuitem label="Rehacer"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

Aquí, una barra de menús sencilla es creada utilizando el elemento menubar. Éste crea una fila en donde se ubicarán los menús. Dos menús: Archivo y Editar se crearon en ella. Los elementos menu crean el título en la parte superior del menú, el que aparece en la barra de menús. Los menús emergentes se crean utilizando el elemento menupopup. Aparecerán cuando el usuario haga clic en el menú padre. El tamaño de dicho menú emergente dependerá de lo que contenga, siempre siendo suficientemente amplio como para que entren todos los comandos creados utilizando el elemento menuitem. Cada uno representa un comando individual dentro del menú emergente.

También se pueden crear separadores dentro de los menús utilizando el elemento menuseparator. Se utiliza para separar grupos de menuitems.

Elemento menubar

menubar es una caja que contiene menús. Nótese que fue ubicada en una toolbox flexible. menubar no tiene atributos especiales sino que es un tipo de caja. Esto significa que se podría crear un menubar vertical con sólo configurar el atributo  orient a vertical.

Elemento menu

El elemento menu funciona de manera muy similar al elemento button. Acepta algunos atributos idénticos y otros adicionales:

id

 

El identificador único del título del menú.

label

El texto que va a aparecer en el menú (Archivo y Editar en el ejemplo anterior).

disabled

 

Es un atributo booleano que determina si el menú está deshabilitado o no. Aunque se puede, rara vez se necesita deshabilitar un menú completo. Este atributo puede ser configurado como true o false, siendo este último valor aquél por defecto.

accesskey

 

La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo label y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible (la tecla de acceso aún funcionará si no aparece).

Elemento menupopup

Elemento menuitem

El elemento menuitem es muy similar al elemento menu y tiene algunos de los mismos atributos:

id

 

El identificador único del título del menú.

label

 

El texto que va a aparecer en el menú.

disabled

 

Es un atributo booleano que determina si el menú está deshabilitado o no. Este atributo puede ser configurado como true o false, siendo este último valor aquél por defecto.

accesskey

 

La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo label y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible.

acceltext

 

Especifica la tecla de acceso rápido que aparece junto al texto del menú. Sin embargo, no asocia dichas teclas al menuitem. Se profundizará en esto más adelante.

Elemento menuseparator

El elemento menuseparator no posee atributos especiales. Simplemente crea una barra horizontal (o vertical) entre los elementos menuitems vecinos.