Flex - Contrôle du menu

introduction

La commande Menu crée un menu contextuel de choix ou de menus sélectionnables individuellement. Le menu contextuel peut avoir autant de niveaux de sous-menus que nécessaire.

Déclaration de classe

Voici la déclaration pour mx.controls.Menu classe -

public class Menu 
   extends List 
      implements IFocusManagerContainer

Propriétés publiques

Sr.Non	Propriété et description
1	dataDescriptor : IMenuDataDescriptor L'objet qui accède et manipule les données dans le fournisseur de données.
2	hasRoot : Boolean [lecture seule] Indicateur qui indique que le fournisseur de données actuel a un nœud racine; par exemple, un seul nœud supérieur dans une structure hiérarchique.
3	parentMenu : Menu Le menu parent dans une chaîne hiérarchique de menus, où le menu actuel est un sous-menu du parent.
4	showRoot : Boolean Un indicateur booléen qui spécifie s'il faut afficher le nœud racine du fournisseur de données.

Méthodes publiques

Sr.Non	Méthode et description
1	Menu() Constructeur.
2	createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean = true):Menu [statique] Crée et renvoie une instance de la classe Menu.
3	hide():void Masque le contrôle Menu et l'un de ses sous-menus si le contrôle Menu est visible.
4	popUpMenu(menu:Menu, parent:DisplayObjectContainer, mdp:Object):void [statique] Définit le dataProvider d'un contrôle Menu existant et place le contrôle Menu dans le conteneur parent spécifié.
5	show(xShow:Object = null, yShow:Object = null):void Affiche la commande Menu.

Méthodes protégées

Sr.Non	Méthode et description
1	makeListData(data:Object, uid:String, rowNum:int):BaseListData [override] Crée une nouvelle instance de MenuListData et remplit les champs en fonction de l'élément de fournisseur de données d'entrée.
2	measure():void [override] Calcule la largeur et la hauteur préférées du menu en fonction des largeurs et des hauteurs de ses éléments de menu.
3	setMenuItemToggled(item:Object, toggle:Boolean):void Active / désactive l'élément de menu.

Événements

Sr.Non	Description de l'évenement
1	change Distribué lorsque la sélection change à la suite de l'interaction de l'utilisateur.
2	itemClick Distribué lorsqu'un élément de menu est sélectionné.
3	itemRollOut Distribué lorsqu'un utilisateur sort la souris d'un élément de menu.
4	itemRollOver Distribué lorsqu'un utilisateur passe la souris sur un élément de menu.
5	menuHide Distribué lorsqu'un menu ou un sous-menu est fermé.
6	menuShow Distribué lorsqu'un menu ou un sous-menu s'ouvre.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de contrôle du menu Flex

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle Menu dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]

↰ Previous page