Flex - Control de menú

Introducción

El control Menú crea un menú emergente de opciones o elementos de menú seleccionables individualmente. El menú emergente puede tener tantos niveles de submenús como sea necesario.

Declaración de clase

A continuación se muestra la declaración de mx.controls.Menu clase -

public class Menu 
   extends List 
      implements IFocusManagerContainer

Propiedades publicas

No Señor	Descripción de propiedad
1	dataDescriptor : IMenuDataDescriptor El objeto que accede y manipula datos en el proveedor de datos.
2	hasRoot : Boolean [solo lectura] Un indicador que indica que el proveedor de datos actual tiene un nodo raíz; por ejemplo, un único nodo superior en una estructura jerárquica.
3	parentMenu : Menu El menú principal en una cadena jerárquica de menús, donde el menú actual es un submenú del principal.
4	showRoot : Boolean Una bandera booleana que especifica si se muestra el nodo raíz del proveedor de datos.

Métodos públicos

No Señor	Método y descripción
1	Menu() Constructor.
2	createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean = true):Menu [estática] Crea y devuelve una instancia de la clase Menú.
3	hide():void Oculta el control de menú y cualquiera de sus submenús si el control de menú está visible.
4	popUpMenu(menu:Menu, parent:DisplayObjectContainer, mdp:Object):void [estática] Establece el proveedor de datos de un control de menú existente y coloca el control de menú en el contenedor principal especificado.
5	show(xShow:Object = null, yShow:Object = null):void Muestra el control del menú.

Métodos protegidos

No Señor	Método y descripción
1	makeListData(data:Object, uid:String, rowNum:int):BaseListData [override] Crea una nueva instancia de MenuListData y completa los campos según el elemento del proveedor de datos de entrada.
2	measure():void [anular] Calcula la anchura y la altura preferidas del menú en función de las anchuras y alturas de sus elementos de menú.
3	setMenuItemToggled(item:Object, toggle:Boolean):void Alterna el elemento del menú.

Eventos

No Señor	Descripción del evento
1	change Se envía cuando la selección cambia como resultado de la interacción del usuario.
2	itemClick Se envía cuando se selecciona un elemento del menú.
3	itemRollOut Se distribuye cuando un usuario saca el mouse de un elemento del menú.
4	itemRollOver Se distribuye cuando un usuario pasa el mouse sobre un elemento del menú.
5	menuHide Se envía cuando se descarta un menú o submenú.
6	menuShow Se envía cuando se abre un menú o submenú.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

mx.controls.List
mx.controls.listClasses.ListBase
mx.core.ScrollControlBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control de menú flexible

Sigamos los siguientes pasos para verificar el uso del control de menú en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         import mx.controls.Menu;
         import mx.events.MenuEvent;
         
         protected var menu:Menu; 
         protected function showMenu(event:MouseEvent):void {
            menu = Menu.createMenu(null, menuData, false);
            menu.labelField = "@label";
            menu.show(mainContainer.x+menuPanel.x+ 2,
            mainContainer.y +menuPanel.y+32);
            menu.addEventListener(MenuEvent.CHANGE,onMenuChange);
         }

         protected function hideMenu(event:MouseEvent):void {
            menu.hide();
         }
         
         protected function onMenuChange(event:MenuEvent):void {
            lblSelected.text =  event.label;
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <fx:XML format = "e4x" id = "menuData">
         <root>
            <menuitem label = "Menu Item A" >
               <menuitem label = "SubMenu Item A 1" enabled = "false" />
               <menuitem label = "SubMenu Item A 2" />
            </menuitem>
            
            <menuitem label = "Menu Item B" type = "check" toggled = "true" />
            <menuitem label = "Menu Item C" type = "check" toggled = "false" />
            <menuitem type = "separator" />
            
            <menuitem label = "Menu Item D" >
               <menuitem label = "SubMenu Item D 1" type = "radio" 
                  groupName = "one" />
               <menuitem label = "SubMenu Item D 2" type = "radio" 
                  groupName = "one" toggled = "true" />
               <menuitem label = "SubMenu Item D 3" type = "radio" 
                  groupName = "one" />
            </menuitem>
         </root>
      </fx:XML>
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "menuPanel" title = "Using Menu" width = "500" 
            height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>		
            
            <s:HGroup>
               <s:Button label = "Show Menu" click = "showMenu(event)" />
               <s:Button label = "Hide Menu" click = "hideMenu(event)" />
            </s:HGroup>
            
            <s:HGroup>
               <s:Label text = "Menu Item selected:" />
               <s:Label id = "lblSelected" fontWeight = "bold" />	
            </s:HGroup>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page