<< Triad Flex User Group public

Discussion Area

ask questions, discuss topics, solve problems

This is a public Discussion Area  publicRSS

Thread

    • Passing event to sub-component module from...
      Thread posted Feb 03 by papalpha58
      591 Views, 2 Comments
      Title:
      Passing event to sub-component module from parent module
      Content:

      I’m a newbie and trying to solve this problem.  Any help will be appreciated.

       I have a parent module that needs to trigger an event (button pressed on ButtonBar). I need a component module to see the event and be able to tell which button was pressed and do something based upon which button was pressed. In my parent module, I have:

      [Event(name="navButtonClicked", type="mx.events.ItemClickEvent")]

      and a function:
      public function navButtonsEvent():void {
      dispatchEvent(evt);
      }

      and the buttonbar:

      <mx:ButtonBar id="navButtonBar" itemClick="navButtonsEvent(event);">

      In my component module I have in the init function

      discrepancyForm.addEventListener(ItemClickEvent.ITEM_CLICK,processNavButtons);  

      and the function processNavButtons:

      public function processNavButtons(event:ItemClickEvent):void {
      var whichButton:int = event.index;
      switch(whichButton) {
      case 0:
      focusManager.setFocus(discrepancyItems[0]);
      break;
      case 1:
      focusManager.setFocus(discrepancyItems[0]);
      break;
      case 2:
      focusManager.setFocus(discrepancyItems[0]);
      break;
      case 3:
      focusManager.setFocus(discrepancyItems[discrepancyCount]);
      break;
      }
      }

      The variable evt (in the dispatchEvent) has the correct information in it for the button pressed, but the processNavButtons function is never triggered.

      What do I need to change so the component module to see the button click?

       

    Comments

    • If Im reading this right, you are wanting to have an event fire downward into a module, correct?  To my knowledge, you won't be able to make this work.  The Flex event flow consists of 3 phases and in order for any component to react, it must be in the event flow of the component that created the event.  Since the module is a child of the parent component, its not in the event flow of the parent module.  When I've needed the parent to communicate into the module, usually I create a public function inside the child that is able to react to the event and then pass the entire event (when fired) downwards into the module.

      Hope this helps.

    • I was asked to provide a quick example of passing an event downward into a sub-component.  I personally think is a borderline practice since it does involve a little coupling between components, but it does work so sometimes you gotta do what you gotta do.  So the event flow consists of 3 phases: capture, target and bubbling.  Capture is where the event moves from the application down to the level of the component, target is the event firing component itself, and bubbling is from target component back to the application level.  this is greatly simplified, but hopefull you get the jist.  For more extensive explanation, http://livedocs.adobe.com/flex/3/html/help.html?content=events_02.html.  Ok so what this means is that even though two components might be on the same level (aka siblings inside a parent) they may not necessarily be in each others event flow and one way to handle communication between them is to allow the parent to act as mediator between them.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" applicationComplete="initApp()">
          <mx:Script>
              <![CDATA[
                  private function initApp():void
                  {
                      // You can add a listener or use the component A metadata
                      /* this.addEventListener("ComponentAClick", handleComponentA);  */
                  }
                 
                  private function handleComponentA(event:Event):void
                  {
                      compB.handleSiblingEvent(event);
                  }
              ]]>
          </mx:Script>
         
         
         
          <ns1:ComponentA id="compA" x="10" y="97" ComponentAClick="handleComponentA(event)">
          </ns1:ComponentA>
          <ns1:ComponentB id="compB" x="418" y="97">
          </ns1:ComponentB>
         
      </mx:Application>



      // Component A

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
          <mx:Metadata>
              [Event(name="ComponentAClick", type="flash.events.Event")]
          </mx:Metadata>
         
          <mx:Script>
              <![CDATA[
                 
                  private function clickHandler(event:MouseEvent):void
                  {
                      var myEvent:Event = new Event("ComponentAClick");
                      dispatchEvent(myEvent);
                  }
              ]]>
          </mx:Script>
         
          <mx:Button x="10" y="10" label="Component A Button" click="clickHandler(event)"/>
         
      </mx:Canvas>



      //Component B

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
         
          <mx:Script>
              <![CDATA[
                  public function handleSiblingEvent(event:Event = null):void
                  {
                      if(event != null)
                      {
                          lblCompB.text = event.type;
                      }
                  }
              ]]>
          </mx:Script>
         
          <mx:Label x="10" y="10" text="Nothing happened yet" id="lblCompB"/>
         
      </mx:Canvas>

      Hope this helps.