2 Replies Latest reply on Nov 2, 2006 11:07 AM by peterent

    Flex 2 Component communication

    ljonny18 Level 1
      Hi I am having trouble in my Flex 2 application in terms of calling a function of a component from another component etc….

      I have in my main MXML file an “ApplicationControlBar” containing a “LinkBar” that is populated by a “ViewStack” as shown:

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comps="components.*" layout="vertical">

      <mx:ApplicationControlBar id="acb" dock="true">
      <mx:LinkBar id="menu_lb" dataProvider="menu_vs"/>
      </mx:ApplicationControlBar>

      <mx:ViewStack id="menu_vs" resizeToContent="true" width="100%">
      <comps:homePage id="home_page" label="Home Page"/>
      <comps:menu1 id="menu_1" label="Menu 1"/>
      <comps:menu2 id="menu_2" label="Menu 2"/>
      <comps:menu3 id="menu_3" label="Menu 3"/>
      </mx:ViewStack>

      </mx:Application>


      I want to have a Button that is within the “homepage” component which when is “clicked” calls a function (testFunc() etc) that is in the “menu1” component…

      If the button was within the main MXML application file (as shown above) I could add the button which works fine and how is expected:

      <mx:Button label=”go to menu1” click=”menu_1.testFunc()”/>

      Although if I put this button in the “homePage” component then I get the error:

      1120: Access of undefined property menu_1

      as it is not defined within this component etc….

      is there a way of communicating to the route application file to get this to work… e.g. I have tried things such as:

      click=”parentDocument.menu_vs.menu_1.testFunc()” etc…….

      but have had no joy 

      Can anyone tell me how to get my button click to navigate to / run the testFunc() within a different component in the viewStack……


      Thanks,
      Jon.
        • 1. Re: Flex 2 Component communication
          FlightGuy Level 1
          The problem is that you're trying to go outside the chain of command, so to speak. If I'm correctly understanding what you're attempting, then my suggestion is that you raise an event from your 'homepage' component, and listen for that event in your application.

          So, in the homepage component, call dispatchEvent(new Event("doWhatever")), and then in your application you can do homepage.addEventListener("doWhatever", yourAction).

          If you want to do it all from MXML, remember to add an [Event(name="doWhatever", type="flash.events.Event")] at the top of your homepage component - this will allow you to just use doWhatever="..." in your MXML.
          • 2. Re: Flex 2 Component communication
            peterent Level 2
            There are 2 approaches to take here which are very similar. The first approach uses the "targeting phase" of the ActionScript 3 event system. Since you are using a Button you know that it has a "click" event. But did you know that you can place that event handler on any parent of the Button? For example, in your Main application file you could do this:

            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comps="components.*" layout="vertical" click="handleClickEvent(event)" >

            When the Button on the home_page is picked, the click event will go upward through the object heirarchy until it finds a handler. If you don't have a handler on the Button itself, then its parent is tried, if there's no handler there, then its parent is tried, etc.

            If you were to place the event handler on the Application itself, EVERY click event might possibly wind up there, so you need to look at the event itself to see which object sent the event.

            You might also be able to do this:

            <comps:homePage id="home_page" label="Home Page" click="handleClickEvent(event)" />

            but only if the homePage component is capable of dispatching a click event itself. You have to check the Flex documentation for that.

            See About the Event Flow in the Flex documentation for more details about the event flow.

            The second option is have your homePage component dispatch a custom event. You create a new class dervied from an event class, such as flash.event.Event, and when the Button in the homePage is picked, dispatch your custom event instead. To do that, you'll need to register the event in the homePage component using Metadata:

            [Event(name=" myCustomEvent",type="MyCustomEventType")]

            then you can do:

            <comps:homePage id="home_page" label="Home Page" myCustomEvent="handleMyEvent(event)"/>

            Those are the 2 recommended ways to communicate between components.