Menú: conceptos básicos

Entre las clases de menú se incluyen:

AIR admite los siguientes tipos de menús:

Menús contextuales

Los menús contextuales se abren en respuesta a un clic con el botón derecho del ratón o a un clic de un comando en un objeto interactivo en el contenido SWF o en un elemento de documento en un contenido HTML.

En el motor de ejecución de Flash Player, un menú contextual se muestra automáticamente. Las clases ContextMenu y ContextMenuItem se pueden emplear para añadir comandos propios al menú. También se pueden eliminar algunos, pero no todos, comandos incorporados.

En el motor de ejecución de AIR, se puede crear un menú contextual utilizando la clase NativeMenu o ContextMenu. En el contenido HTML en AIR, se puede utilizar el Webkit HTML y las API JavaScript para añadir menús contextuales a elementos HTML.

Menús de aplicación (sólo AIR)

Un menú de aplicación es un menú global que se aplica a toda la aplicación. Los menús de aplicación son compatibles en Mac OS X, pero no en Windows o Linux. En Mac OS X, el sistema operativo automáticamente crea un menú de aplicación. Se puede utilizar la API del menú AIR para añadir elementos y submenús secundarios a los menús estándar. Se pueden añadir detectores para gestionar los comandos de menú existentes. O bien se pueden quitar elementos existentes.

Menús de ventana (sólo AIR)

Un menú de ventana está asociado con una sola ventana y se muestra debajo de la barra de título. Se pueden añadir los menús a una ventana creando un objeto NativeMenu y asignándolo a la propiedad menu del objeto NativeWindow. Los menús de ventana son compatibles con los sistemas operativos Windows y Linux, pero no en Mac OS X. Los menús de ventana nativos solo se pueden utilizar con ventanas que tienen fondo cromático del sistema.

Menús del icono de acoplamiento y de bandeja del sistema (sólo AIR)

Estos menús de iconos son similares a los menús contextuales y se asignan a un icono de aplicación en el acoplamiento de Mac OS X o las áreas de notificación en la barra de tareas de Windows y Linux. Los menús del icono de acoplamiento y bandeja del sistema utilizan la clase NativeMenu. En Mac OS X, los elementos en el menú se añaden por encima de los elementos del sistema operativo estándar. En Windows o Linux, no hay un menú estándar.

Menús emergentes (sólo AIR)

Un menú emergente de AIR es como un menú contextual, pero no necesariamente está asociado con un determinado objeto o elemento de aplicación. Los menús emergentes se pueden mostrar en cualquier parte de una ventana llamando al método display() de cualquier objeto NativeMenu.

Menús personalizados

El sistema operativo invoca los menús nativos y, como tal, existen fuera de los modelos de representación de Flash y HTML. En lugar de utilizar menús nativos, siempre puede crear sus propios menús no nativos y personalizados utilizando MXML, ActionScript o JavaScript (en AIR). Estos menús deben procesarse por completo dentro del contenido de la aplicación.

Menús de Flex

La arquitectura Adobe® Flex™ proporciona una serie de componentes de menú Flex. El motor de ejecución y no el sistema operativo invoca los menús Flex y no son menús nativos. El componente del menú Flex se puede utilizar para ventanas Flex que no tienen un fondo cromático del sistema. Otra ventaja de utilizar el componente de menú Flex es que se pueden especificar menús de forma declarativa en el formato MXML. Si se utiliza la arquitectura de Flex, se utilizan las clases del menú Flex para los menús de ventana en lugar de las clases nativas.

En el contenido SWF, a cualquier objeto que hereda de InteractiveObject se le puede asignar un menú contextual asignando un objeto de menú a la propiedad contextMenu. Se incluyen varios comandos de manera predeterminada, incluidos Forward (Avanzar), Back (Atrás), Print (Imprimir), Quality (Calidad) y Zoom. En el motor de ejecución de AIR, el objeto de menú asignado a contextMenu puede ser del tipo NativeMenu o ContextMenu. En el motor de ejecución de Flash Player, sólo está disponible la clase ContextMenu.

Puede detectar eventos de menú nativo o eventos de menús contextuales con el uso de las clases ContextMenu y ContextMenuItem; ambas se distribuyen. Una ventaja que ofrecen las propiedades del objeto ContextMenuEvent es que contextMenuOwner identifica el objeto al que se asocia el menú y mouseTarget identifica el objeto en el que se hizo clic para abrir el menú. Esta información no está disponible en el objeto NativeMenuEvent.

El siguiente ejemplo crea un objeto Sprite y añade un simple menú contextual de edición:

var sprite:Sprite = new Sprite(); 
sprite.contextMenu = createContextMenu() 
private function createContextMenu():ContextMenu{ 
    var editContextMenu:ContextMenu = new ContextMenu(); 
    var cutItem:ContextMenuItem = new ContextMenuItem("Cut") 
    cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCutCommand); 
    editContextMenu.customItems.push(cutItem); 
     
    var copyItem:ContextMenuItem = new ContextMenuItem("Copy") 
    copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCopyCommand);             
    editContextMenu.customItems.push(copyItem); 
     
    var pasteItem:ContextMenuItem = new ContextMenuItem("Paste") 
    pasteItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doPasteCommand); 
    editContextMenu.customItems.push(pasteItem); 
         
    return editContextMenu 
} 
private function doCutCommand(event:ContextMenuEvent):void{trace("cut");} 
private function doCopyCommand(event:ContextMenuEvent):void{trace("copy");} 
private function doPasteCommand(event:ContextMenuEvent):void{trace("paste");}

var square:Sprite = new Sprite(); 
square.graphics.beginFill(0x000000); 
square.graphics.drawRect(0,0,100,100); 
square.graphics.endFill(); 
square.x = 
square.y = 10; 
addChild(square); 
 
var menuItem:ContextMenuItem = new ContextMenuItem("Change Color"); 
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,changeColor); 
var customContextMenu:ContextMenu = new ContextMenu(); 
customContextMenu.hideBuiltInItems(); 
customContextMenu.customItems.push(menuItem); 
square.contextMenu = customContextMenu; 
 
function changeColor(event:ContextMenuEvent):void 
{ 
    square.transform.colorTransform = getRandomColor(); 
} 
function getRandomColor():ColorTransform 
{ 
    return new ColorTransform(Math.random(), Math.random(),         Math.random(),1,(Math.random() * 512) - 255,         (Math.random() * 512) -255, (Math.random() * 512) - 255, 0); 
}

Los menús nativos, por naturaleza, se crean en jerarquías. Los objetos NativeMenu contienen objetos secundarios NativeMenuItem. Los objetos NativeMenuItem que, a su vez, representan los submenús pueden tener objetos NativeMenu. El objeto de menú principal o raíz en la estructura representa la barra de menús para los menús de aplicación y de ventana. (Los menús contextuales, de icono y los menús emergentes no cuentan con una barra de menús).

El siguiente diagrama muestra la estructura de un menú típico. El menú raíz representa la barra de menús y contiene dos elementos de menú que hacen referencia a un submenú Archivo y a un submenú Editar. El submenú Archivo en esta estructura contiene dos elementos de comando y un elemento que hace referencia a un submenú Menú Abrir reciente, que contiene tres elementos. El submenú Editar contiene tres comandos y un separador.

Ver gráfico a tamaño completo

La definición de un submenú requiere un objeto NativeMenu y NativeMenuItem. El objeto NativeMenuItem define la etiqueta que se muestra en el menú principal y permite al usuario abrir el submenú. El objeto NativeMenu actúa como un contenedor para los elementos en el submenú. El objeto NativeMenuItem hace referencia al objeto NativeMenu a través de la propiedad submenu de NativeMenuItem.

Para ver un ejemplo de código que crea este menú, consulte Ejemplo de menú nativo: Menú de aplicación y de ventana (AIR).

Los objetos NativeMenu y NativeMenuItem distribuyen eventos preparing, displaying y select:

Displaying:

Inmediatamente antes de visualizar un menú, el menú y los elementos de menú distribuyen un evento displaying a cualquier detector registrado.

Los eventos preparing y displaying proporcionan la oportunidad de actualizar los contenidos de menú o la apariencia de elementos antes de que se muestre al usuario. Por ejemplo, en el detector para el evento displaying de un menú “Abrir reciente”, se pueden cambiar los elementos de menú para reflejar la lista actual de documentos recientemente visualizados.

Si se elimina el elemento de menú cuyo método abreviado de teclado activó un evento preparing, la interacción con el menú se cancela y no se distribuye ningún eventoselect.

Las propiedades target y currentTarget del evento son ambas el objeto en el que se registra el detector: el propio menú o uno de sus elementos.

El evento preparing se distribuye antes del evento displaying. Generalmente se detecta un evento o el otro, no ambos.

Select:

Cuando el usuario elige un elemento de comando, el elemento distribuye un evento select a cualquier detector registrado. Los elementos de submenú y separador no se pueden seleccionar y por ende nunca distribuyen un evento select.

Un evento select se propaga desde un elemento de menú al menú que lo contienen hasta el menú raíz. Se pueden detectar eventos selectdirectamente en un elemento y en niveles superiores en la estructura del menú. Cuando se detecta el evento select en un menú, se puede identificar el elemento seleccionado utilizando la propiedad de evento target. A medida que el evento se propaga a través de la jerarquía, la propiedad currentTarget del objeto de evento identifica el objeto de menú actual.

Nota: los objetos ContextMenu y ContextMenuItem distribuyen eventos menuItemSelect y menuSelect, así como eventos select, preparing y displaying.

Se puede asignar un equivalente de tecla (a veces llamado acelerador) a un comando de menú. El elemento de menú distribuye un evento select a cualquier detector registrado cuando se presiona la tecla o combinación de teclas. El menú que contiene el elemento debe ser parte del menú de aplicación o de la ventana activa para que se invoque el comando.

Los equivalentes de teclas tienen dos partes, una cadena que representa la tecla principal y un conjunto de teclas modificadoras que también se deben presionar. Para asignar la tecla principal, establezca la propiedad keyEquivalent del elemento de menú a la cadena de un solo carácter para dicha tecla. Se utiliza una letra mayúscula, la tecla Mayús se añade automáticamente al conjunto modificador.

En Mac OS X, el modificador predeterminado es la tecla de comando (Keyboard.COMMAND). En Windows y Linux, es la tecla de control (Keyboard.CONTROL). Estas teclas predeterminadas se añaden automáticamente al conjunto modificador. Para asignar diferentes teclas modificadoras, asigne un nuevo conjunto que contenga los códigos de tecla deseados a la propiedad keyEquivalentModifiers. El conjunto predeterminado se sobrescribe. Si utiliza los modificadores predeterminados o si asigna su propio conjunto modificador, se añade la tecla Mayús si la cadena que asigna a la propiedad keyEquivalent es una letra mayúscula. Las constantes de los códigos de tecla para utilizar en las teclas modificadoras se definen en la clase Keyboard.

La cadena equivalente de la tecla asignada se muestra automáticamente junto al nombre del elemento de menú. El formato depende del sistema operativo del usuario y las preferencias del sistema.

En el siguiente ejemplo se asigna Ctrl+Mayús+G como el equivalente de tecla para un elemento de menú:

var item:NativeMenuItem = new NativeMenuItem("Ungroup"); 
item.keyEquivalent = "G"; 

En este ejemplo se asigna Ctrl+Mayús+G como el equivalente de tecla configurando directamente el conjunto modificador:

var item:NativeMenuItem = new NativeMenuItem("Ungroup"); 
item.keyEquivalent = "G"; 
item.keyEquivalentModifiers = [Keyboard.CONTROL]; 

Las letras de selección son parte de la interfaz del teclado del sistema operativo a los menús. Linux, Mac OS X y Windows permiten a los usuarios abrir menús y seleccionar comandos con el teclado, pero hay pequeñas diferencias.

En Mac OS X, el usuario escribe las primeras letras del menú o comando y presiona la tecla de retorno. La propiedad mnemonicIndex se omite.

En Windows, solo una letra es significativa. Como valor predeterminado, la letra significativa es el primer carácter de la etiqueta, pero si se asigna una letra de selección al elemento de menú, entonces el carácter significativo se convierte en la letra designada. Si dos elementos en un menú tienen el mismo carácter significativo (independientemente si se ha asignado una letra de selección) entonces la interacción del teclado con el menú cambia ligeramente. En lugar de presionar una sola letra para seleccionar el menú o comando, el usuario debe presionar la letra tantas veces como sea necesario para resaltar el elemento deseado y luego presionar la tecla Intro para completar la selección. Para mantener un comportamiento coherente, debe asignar una letra de selección exclusiva para cada elemento en un menú para los menús de ventana.

En Linux, no se proporciona ninguna letra de selección predeterminada. Es necesario especificar un valor para la propiedad mnemonicIndex de un elemento de menú para proporcionar una letra de selección.

Se debe especificar la letra de selección como un índice en la cadena de la etiqueta. El índice del primer carácter en una etiqueta es 0. Por consiguiente, para utilizar “r” como la letra de selección para un elemento de menú denominado “Formato,” se debe establecer la propiedad mnemonicIndex igual a 2.

var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.mnemonicIndex = 2; 

Los elementos de menú tienen dos propiedades de estado, checked y enabled:

checked

Se debe establecer en true para mostrar una marca de verificación junto a la etiqueta del elemento.

var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.checked = true; 

enabled

Seleccione el valor true o false para controlar si el comando está activado o no. Los elementos desactivados aparecen “sombreados” y no distribuyen eventos select.

var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.enabled = false; 

La propiedad data de la clase NativeMenuItem permite hacer referencia a un objeto arbitrario en cada elemento. Por ejemplo, en un menú “Abrir reciente”, puede asignar el objeto File para cada documento a cada elemento de menú.

var file:File = File.applicationStorageDirectory.resolvePath("GreatGatsby.pdf") 
var menuItem:NativeMenuItem = docMenu.addItem(new NativeMenuItem(file.name)); 
menuItem.data = file;