6 Replies Latest reply on Sep 7, 2009 9:41 AM by Whitetimer

    Custom Event Help

    Whitetimer Level 1

      Hi All

       

      I have a simple custom MenuBar Component that dispatches a CustomEvent

       

                  // COMPONENT METHODS
                  private function menuClickHandler(event:MenuEvent):void
                  {
                      var menuEvtObj:MenuEvent = new MenuEvent("MenuClickHandler");
                      dispatchEvent(menuEvtObj);              
                  }
      

       

      I instantiate the Custom Component at the Application Level and have an event listener and method

       

                    private function initAPP():void
                    {
                     applicationMenu.addEventListener(MenuEvent.ITEM_CLICK, menuClickItemHandler);
                    }
                    
                    private function menuClickItemHandler(event:MenuEvent):void
                    {
                     var menuSelected:Container;
                     menuSelected == event.item.@id;
                     appVS.selectedChild = menuSelected;
                         
                    }
      

       

      What i am trying to do is to set the Viewstack selectedChild for the id property of the menuBar itemClick

       

      What am i doing wrong ?

       

      Many Thanks

        • 1. Re: Custom Event Help
          Andrew Rosewarn Level 3

          Hi there.

           

          The first thing you need to do is create a custm event that extends the event classs like the one below;

           

          package
          {
              import flash.events.Event;

           

              public class CustomEvent extends Event
              {
                  public var childIndex:int;
                 
                  public function CustomEvent(type:String, childIndex:int, bubbles:Boolean=false, cancelable:Boolean=false)
                  {
                      super(type, bubbles, cancelable);
                      this.childIndex = childIndex;
                  }
                 
              }
          }

           

          This event now contains a new propery called childIndex.

           

          Now in your custom menu component you need to dispatch the custom event with the child index you wish to view in the viewstack

           

          My Menu Comp

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 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="Child 1" data="0"/>
                                  <menuitem label="Child 2" data="1"/>
                              </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  {
                         var custEvent:CustomEvent = new CustomEvent('menuClick',event.item.@data);
                          dispatchEvent(custEvent);

                      }
                   ]]>
              </mx:Script>

           

                  <mx:MenuBar labelField="@label" itemClick="menuHandler(event);"
                      dataProvider="{menuBarCollection}" />
          </mx:Canvas>

           

          You can see in my menu comp I store the indexes of the viewstack components in the data of the menu.  And then when I dispatch the event after a click I put data propert (index) into the clildIndex property of the component.  I give the event the name 'menuClick'

           

          Now in my app I add my component, and a listener for the menuClick.  And in the event handler I set the index of the viewstack to that of the events childIndex property.

           

          <?xml version="1.0"?>

           

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   xmlns:ns1="*" creationComplete="addListener()">

           

              <mx:Script>
                  <![CDATA[
                      private function addListener():void {
                          myMenu.addEventListener('menuClick', handleMenuClick);
                      }
                     
                      private function handleMenuClick(event:CustomEvent):void {
                          viewstack1.selectedIndex = event.childIndex;
                      }
                  ]]>
              </mx:Script>   
             
              <ns1:MenuBarComp id="myMenu" width="514" height="54">
              </ns1:MenuBarComp>
              <mx:ViewStack id="viewstack1" width="200" height="200">
                  <mx:Canvas label="View 1" width="100%" height="100%">
                      <mx:Label x="10" y="10" text="Child 1"/>
                  </mx:Canvas>
                  <mx:Canvas label="View 1" width="100%" height="100%">
                      <mx:Label x="10" y="10" text="Child 2"/>
                  </mx:Canvas>
              </mx:ViewStack>

           

          </mx:Application>

           

          I hope this helps.

           

          Andrew

          • 2. Re: Custom Event Help
            Whitetimer Level 1

            Hi Andrew

             

            Thanks for the reply, but i do have another question.  Instead of using the property childIndex:int in the custom event, i would prefer to use a selectedChild:String which would reference the ID attribute on the XMLList.  Thereby the XMLList ID would equal the Viewstack selectedChild

             

            Many thanks

             

            • 3. Re: Custom Event Help
              Andrew Rosewarn Level 3

              Yes same sort of thing

               

              Custom event

               

              package
              {
                  import flash.events.Event;

               

                  public class CustomEvent extends Event
                  {
                      public var childId:String;
                     
                      public function CustomEvent(type:String, childId:String, bubbles:Boolean=false, cancelable:Boolean=false)
                      {
                          super(type, bubbles, cancelable);
                          this.childId = childId;
                      }
                     
                  }
              }

               

              Menu Comp

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 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="Child 1" data="child1"/>
                                      <menuitem label="Child 2" data="child2"/>
                                  </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  {
                              var custEvent:CustomEvent = new CustomEvent('menuClick',event.item.@data);
                              dispatchEvent(custEvent);
                          }
                       ]]>
                  </mx:Script>

               

                      <mx:MenuBar labelField="@label" itemClick="menuHandler(event);"
                          dataProvider="{menuBarCollection}" />
              </mx:Canvas>

               

              Main app

               

              <?xml version="1.0"?>

               

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   xmlns:ns1="*" creationComplete="addListener()">

               

                  <mx:Script>
                      <![CDATA[
                          import mx.core.Container;
                          private function addListener():void {
                              myMenu.addEventListener('menuClick', handleMenuClick);
                          }
                         
                          private function handleMenuClick(event:CustomEvent):void {
                              for each (var cont:Container in viewstack1.getChildren()) {
                                  if (cont.id == event.childId) {
                                      viewstack1.selectedChild = cont;
                                      break;
                                  }
                              }
                             
                             
                          }
                      ]]>
                  </mx:Script>   
                 
                  <ns1:MenuBarComp id="myMenu" width="514" height="54">
                  </ns1:MenuBarComp>
                  <mx:ViewStack id="viewstack1" width="200" height="200">
                      <mx:Canvas id="child1" label="View 1" width="100%" height="100%">
                          <mx:Label x="10" y="10" text="Child 1"/>
                      </mx:Canvas>
                      <mx:Canvas id="child2" label="View 1" width="100%" height="100%">
                          <mx:Label x="10" y="10" text="Child 2"/>
                      </mx:Canvas>
                  </mx:ViewStack>

               

              </mx:Application>

               

              Andrew

              • 4. Re: Custom Event Help
                Whitetimer Level 1

                Hi Andrew ..

                 

                Ok thanks, have tried your suggestion and now i have an error at the Application level

                 

                Access of possibly undefined property selectedChildId through a reference with static type UWTH.Events:MenuClickEvent

                 

                 

                THIS IS MY CUSTOM EVENT

                 

                package UWTH.Events
                {
                    import flash.events.Event;

                 

                    public class MenuClickEvent extends Event
                    {
                        public var selectedChildID:String;
                       
                        public function MenuClickEvent(type:String, selectedChildID:String)
                        {
                            super(type);
                            this.selectedChildID = selectedChildID;
                        }
                       
                    }
                }

                 

                THIS IS MY CUSTOM MENUBAR

                 

                <mx:MenuBar
                    xmlns:mx="http://www.adobe.com/2006/mxml"
                    width="800" dataProvider="{menuBarCollection}"
                    labelField="@label"
                    itemClick="menuHandler(event)"
                    creationComplete="initCollections();">
                   
                    <mx:Script>
                        <![CDATA[
                           
                       
                            // COMPONENT IMPORTS
                            import UWTH.Events.MenuClickEvent;
                            import mx.events.MenuEvent;
                            import mx.collections.XMLListCollection;
                            // COMPONENT VARIABLES
                            [Bindable]
                            public var menuBarCollection:XMLListCollection;
                           
                            // COMPONENT METHODS
                           
                            // Event handler to initialize the MenuBar control.
                            private function initCollections():void
                            {
                                menuBarCollection = new XMLListCollection(appMenuData);
                            }
                           
                            // Event handler for the MenuBar control's itemClick event.
                            private function menuHandler(event:MenuEvent):void
                            {
                                var custEventObj:MenuClickEvent = new MenuClickEvent('menuClick',event.item.@id);
                                dispatchEvent(custEventObj);
                            }
                           
                        ]]>
                    </mx:Script>

                 


                    <mx:XMLList id="appMenuData">
                        <menuitem label="Home">
                            <submenu label="Home" id="vHome" />
                        </menuitem>

                 

                THIS IS MY APPLICATION

                 

                    initialize="initAPP()">
                   
                    <mx:Script>
                        <![CDATA[
                           
                           
                           
                            // APPLICATION IMPORTS
                            import mx.core.Container;
                            import UWTH.Events.MenuClickEvent;
                            import mx.events.MenuEvent;
                            import UWTH.components.ApplicationMenuBar;
                            // APPLICATION VARIABLES
                            [Bindable]
                            private var applicationLabelText:String;
                            [Bindable]
                            public var selectedChildID:String;
                            // APPLICATION METHODS
                           
                            private function initAPP():void
                            {
                                applicationMenu.addEventListener('menuClick', handleMenuClick);
                            }
                           
                            private function handleMenuClick(event:MenuClickEvent):void {
                                for each (var cont:Container in appVS.getChildren()) {
                                    if (cont.id == event.selectedChildId) {
                                        appVS.selectedChild = cont;
                                        break;
                                    }
                                }
                            }

                 

                 

                 

                        ]]>
                    </mx:Script>
                   
                    <mx:Style source="Assets/CSS/app.css" />
                   
                    <Comp:ApplicationMenuBar id="applicationMenu" />
                   
                    <mx:Spacer height="150" />
                   
                    <mx:Label id="appLabel" width="800" text="[ {appVS.selectedChild.label} ]" fontSize="18" />
                   
                    <mx:ViewStack id="appVS">
                        <Views:V_VHome id="vHome" />
                        <Views:V_About id="vAboutUs" />
                    </mx:ViewStack>

                 

                Many Thanks

                 

                Whitetimer

                • 5. Re: Custom Event Help
                  TheFlexGuy Level 2

                  It's case sensitive.  You have a lower-case 'd' in selectedChildId that should be upper-case

                   

                  private function handleMenuClick(event:MenuClickEvent):void {
                       for each (var cont:Container in appVS.getChildren()) {
                            if (cont.id == event.selectedChildId) {
                                 appVS.selectedChild = cont;
                                 break;
                            }
                       }
                  }     

                   

                  -Marty [ http://www.theflexguy.com ]

                  Helpful/Answered? Please mark it as such.

                  • 6. Re: Custom Event Help
                    Whitetimer Level 1

                    Hi FlexGuy

                     

                    I just spotted that, duh, after all it is Monday ... haha

                     

                    Anyway, thanks for pointing it out..

                     

                    Whitetimer