Tutorial de XUL:Menúes de Barras Simples

De MDC

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

[editar] Creando un Menú

XUL tiene varias formas de crear un menú. La más simple es agregar una barra de menúes con una fila de menúes en ella como tienen muchas aplicaciones. También se pueden crear menúes emergentes. Las variedades de menúes en XUL consiste en una cantidad de elementos diferentes que permiten la creación de ambos tipos de menús. Los elementos u opciones en dichos menúes pueden ser personalizadas sin mucha dificultad. Vimos ya una parte de cómo construir un menú usando menulist; en esta sección apliaremos el tema.

Las barras de menúes son creadas, generalmente, de manera muy similar a las barras de herramientas. Una barra de menúes puede ser ubicada dentro de una toolbox (barra de herramientas) y un botón permanente aparecerá a su izquierda para que pueda ser colapsada. El menú trabajaría tal como cualquier otra barra de herramientas. XUL, sin embargo, tiene ciertos elementos de menú especiales que darán funciones características de los menúes clásicos.

Hay 5 elementos asociados con la creación de una barra de menúes y sus menúes. Explicados brevemente a continuación pero profundizados más adelante:

menubar

El contenedor de una fila de menúes.

menu

A pesar del nombre, ésto 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 click 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úes dentro de una barra de menús para poder conetener 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úes personalizados, cualquier regla de estilo especial o elementos que no sean menúes pueden ser omitidos. Esto se debe tener muy presente al crear menúes.

Aquí hay un ejemplo de una barra de menúes simple:

[editar] Ejemplo:

<toolbox flex="1">
  <menubar id="ejemplo-barra-de-menues">
    <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>

Imagen:menubar-ex1.jpg

Aquí, una barra de menúes sencilla es creada utilizando el elemento menubar. Éste crea una fila en donde se ubicarán los menúes. Dos menúes: 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úes. Los menúes emergentes se crean utilizando el elemento menupopup. Aparecerán cuando el usuario haga click en el menu 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úes utilizando el elemento menuseparator. Se lo utiliza para separar grupos de menuitems.

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

El elemento menu se encuentra generalmente dentro de un menubar, aunque no es necesario que así sea. Sin embargo, se le dará una apariencia diferente. La imagen muestra cómo se vería el ejemplo anterior sin menubar.

Imagen:menubar-ex2.jpg

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

id

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

label

El texto 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 cez se necesita deshabilitar un menú completo. Éste atributo puede ser configurado como true ó false, siendo éste ú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 caracter especificado aquí. Por ésta razón es que se debe especificar un caracter que aparece en dicho título de ser posible (la tecla de acceso aún funcionará si no aparece).

El elemento menupopup genera el menú emergente que contiene los comandos. Es un tipo de caja que, por defecto, se orienta verticalmente. Se lo puede cambiar a horizontal si se desea que se ubiquen en una fila los menuitem. Normalmente sólo elementos menuitem y/o menuseparator se encontraría en un menupopup; pero se puede ubicar cualquier elemento dentro de un menupopup, aunque será ignorado en una Macintosh.

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 a aparecer en el menú.

disabled

Es un atributo booleano que determina si el menú está deshabilitado o no. Éste atributo puede ser configurado como true ó false, siendo éste ú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 caracter especificado aquí. Por ésta razón es que se debe especificar un caracter que aparece en dicho título de ser posible.

acceltext

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

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