2 Replies Latest reply on Dec 20, 2010 5:49 AM by BhaskerChari

    How to create dynamic menu in flex  from xml?Here the xml will be loaded from url

    Koyel_flex

      I can create menu by using xml manually. Bt I want to create menu through xml dynamically . That means I want to load xml in app externally. and create menu from that xml. plz help me to oslve this problem.

        • 1. Re: How to create dynamic menu in flex  from xml?Here the xml will be loaded from url
          saisri2k2 Level 4

          <?xml version="1.0"?>
          <!-- Simple example to demonstrate the MenuBar control. -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initCollections();" >
          
              <mx:Script>
                  <![CDATA[
          
                      import mx.events.MenuEvent;
                      import mx.controls.Alert;
                      import mx.collections.*;
          
                      [Bindable]
                      public var menuBarCollection:XMLListCollection;
              
                      private var menubarXML:XMLList =
                          <>
                              <menuitem label="Menu1" data="top">
                                  <menuitem label="MenuItem 1-A" data="1A"/>
                                  <menuitem label="MenuItem 1-B" data="1B"/>
                              </menuitem>
                              <menuitem label="Menu2" data="top">
                                  <menuitem label="MenuItem 2-A" type="check"  data="2A"/>
                                  <menuitem type="separator"/>
                                  <menuitem label="MenuItem 2-B" >
                                      <menuitem label="SubMenuItem 3-A" type="radio"
                                          groupName="one" data="3A"/>
                                      <menuitem label="SubMenuItem 3-B" type="radio"
                                          groupName="one" data="3B"/>
                                  </menuitem>
                              </menuitem>
                          </>;
          
                      // Event handler to initialize the MenuBar control.
                      private function initCollections():void {
                          menuBarCollection = new XMLListCollection(menubarXML);
                      }
          
                      // Event handler for the MenuBar control's itemClick event.
                      private function menuHandler(event:MenuEvent):void  {
                          // Don't open the Alert for a menu bar item that 
                          // opens a popup submenu.
                          if (event.item.@data != "top") {
                              Alert.show("Label: " + event.item.@label + "\n" + 
                                  "Data: " + event.item.@data, "Clicked menu item");
                          }        
                      }
                   ]]>
              </mx:Script>
          
              <mx:Panel title="MenuBar Control Example" height="75%" width="75%" 
                  paddingTop="10" paddingLeft="10">
          
                  <mx:Label width="100%" color="blue"
                     text="Select a menu item."/>
          
                  <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
                      dataProvider="{menuBarCollection}" />
                      
              </mx:Panel>
          </mx:Application>
          
           
          

           

           

          Ref: http://examples.adobe.com/flex3/componentexplorer/explorer.html

          • 2. Re: How to create dynamic menu in flex  from xml?Here the xml will be loaded from url
            BhaskerChari Level 4

            Hi Koyel,

             

            Check the sample code which loads the xml dynamically and creates the menu..

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="loadXml()">
            <mx:Script>
              <![CDATA[
               import mx.collections.XMLListCollection;
               import mx.controls.Alert;
               import mx.events.ScrollEvent;
               import mx.events.MenuEvent;
               import mx.controls.Button;
               import mx.controls.Menu;
              
               public var menuBarCollection:XMLListCollection;
              
               public function loadXml():void
               {
                         var loader:URLLoader = new URLLoader();
                         configureListeners(loader);

                         var request:URLRequest = new URLRequest("menu.xml");
                         try {
                             loader.load(request);
                         } catch (error:Error) {
                             trace("Unable to load requested document.");
                         }
                     }
               private function configureListeners(dispatcher:IEventDispatcher):void {
                         dispatcher.addEventListener(Event.COMPLETE, completeHandler);
                         dispatcher.addEventListener(Event.OPEN, openHandler);
                         dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                         dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
                         dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
                         dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
                     }

                     private function completeHandler(event:Event):void {
                         var loader:URLLoader = URLLoader(event.target);
                         trace("completeHandler: " + loader.data);
                var _xml:XMLList = XMLList(loader.data);
                menuBarCollection = new XMLListCollection(_xml);
                menuBar.dataProvider = menuBarCollection;
                     }

                     private function openHandler(event:Event):void {
                         trace("openHandler: " + event);
                     }

                     private function progressHandler(event:ProgressEvent):void {
                         trace("progressHandler loaded:" + event.bytesLoaded + " total: " + event.bytesTotal);
                     }

                     private function securityErrorHandler(event:SecurityErrorEvent):void {
                         trace("securityErrorHandler: " + event);
                     }

                     private function httpStatusHandler(event:HTTPStatusEvent):void {
                         trace("httpStatusHandler: " + event);
                     }

                     private function ioErrorHandler(event:IOErrorEvent):void {
                         trace("ioErrorHandler: " + event);
                     }
                  // Event handler for the MenuBar control's itemClick event.
                        private function menuHandler(event:MenuEvent):void  {
                            // Don't open the Alert for a menu bar item that
                            // opens a popup submenu.
                            if (event.item.@data != "top") {
                                Alert.show("Label: " + event.item.@label + "\n" +
                                    "Data: " + event.item.@data, "Clicked menu item");
                            }       
                        }
                 
              ]]>
            </mx:Script>
            <mx:MenuBar id="menuBar" top="50" labelField="@label" itemClick="menuHandler(event);" />
            </mx:Application>

             

            <!-- menu.xml -->

             

            <>

            <menuitem label="MenuItem A" >

            <menuitem label="SubMenuItem A-1" enabled="false"/>

            <menuitem label="SubMenuItem A-2"/>

            </menuitem>

            <menuitem label="MenuItem B" type="check" toggled="true"/>

            <menuitem label="MenuItem C" type="check" toggled="false"/>

            <menuitem type="separator"/>

            <menuitem label="MenuItem D" >

            <menuitem label="SubMenuItem D-1" type="radio"

            groupName="one"/>

            <menuitem label="SubMenuItem D-2" type="radio"

            groupName="one" toggled="true"/>

            <menuitem label="SubMenuItem D-3" type="radio"

            groupName="one"/>

            </menuitem>

            </>

             

             

             

            Thanks,

            Bhasker