I spend the last few days trying to create a comunication between a Component and the main Application. My goal is to create for every State a individual component. Something like this:

I needed to tell the main application to change the State when the user clicked on the button on the component.

This is the final file:

1. Step

So I started with this as my main Application file:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 

 initialize="currentState='State1'" xmlns:components="components.*" 

 viewSourceURL="srcview/index.html" width="257" height="167" borderStyle="solid" 

 borderColor="#192C35" borderThickness="2" themeColor="#1800FF" 

 backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

 

 <mx:states>

  <mx:State name="State1" id="state1" >

   <mx:AddChild>

    <mx:VBox horizontalCenter="0" top="10">

     <mx:Label text="This is the State 1" id="label1" />

     <components:myComponent id="componentID"  

                                                  width="224" height="94"/>

    </mx:VBox>

   </mx:AddChild>

  </mx:State>



  <mx:State name="State2" id="state2" >

   <mx:AddChild>

    <mx:VBox horizontalCenter="0" top="10">

     <mx:Label text="This is the State 2" />

     <mx:Button label="Return" click="currentState='State1'" />

    </mx:VBox>

   </mx:AddChild>

  </mx:State>

 </mx:states>



</mx:Application>

And here my component based on a TitleWindow:

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

 height="300" title="This is a Component">



 <mx:Label text="Click on the button to switch state"  x="10" y="36"/>

 <mx:Button label="This is a Button Component" x="10" y="62"/>



</mx:TitleWindow>

2. Step

Now you have to create a custom Event in the Component within a Metatag like this:

3. Step

We create a ClickEvent in the Button in the Component. The Button ends up looking like this:

And the ClickHandler which dispaches the Event in the same component like this.

4. Step

Finally the only thing left to do is to call the event in our main application in the component tag, like this:

To resume: I create an Event which is inserted in the component tag in the application (in this case, the Event is called switchState) to connect this event with the click Event on the Button, you create a EventHandler in the component that dispaches the Event. Thats all.

Download the sourcecode in RAR Format

Christian