Simple View Stack Event Management In Flex

In the course of exploration into world of flex some of our novice developers face so many problems which results flex for them is a complex stuff ! But its not, flex is simple simpler than development of AS2 Flash application.

So Now we are gonna discuss a common problem many of us face
Event management between view stack component and main mxml class.
So the scenario is like we have a ViewStack in main application and it has a child component i.e FirstView (com.nectflow.eventest.views.FirstView)

Here is the eventTest.mxml









code here:<mx:application mx="http://www.adobe.com/2006/mxml" views="com.nectflow.eventest.views.*" layout="absolute" minwidth="1024" minheight="768"> <mx:vbox> <mx:viewstack><views:firstview id="fv" backgroundcolor="#ffffff" backgroundalpha="0.3"></views:firstview><mx:textinput id="parentText" text="text field of main application" width="384"><mx:label id="status" width="100%" fontweight="bold" fontsize="16"></mx:label></mx:textinput></mx:viewstack></mx:vbox></mx:application>


And the component FirstView (com/nectflow/eventest/FirstView.mxml)

<?xml version="1.0" encoding="utf-8"?><br /><mx:canvas mx="http://www.adobe.com/2006/mxml" width="400" height="300"><mx:vbox label="this is the child"><mx:label id="status" width="384" fontstyle="italic" fontsize="14"><mx:textinput id="childText" text="text field of viewstack child" width="395" height="29"></mx:TextInput></mx:VBox></mx:Canvas>

Our task is to create an event in FirstView , dispatch it and listen it from main class i.e. eventTest ! Then we will do the reverse. create an event in main and do some changes in public variables in FirstView.


Now Lets create an event in FirstView
we have added a listener to TextInput named ChildText of FirstView called textUpdated()
here is the modified childText


<mx:textinput id="childText" text="text field of viewstack child" change="textUpdated()" width="395" height="29"></mx:textinput>



and here is the function definition

private function textUpdated():void
{
typedText = childText.text;

}

Next comes the core part - dispatching an event
First Declare events as Static Metadata tags

<mx:metadata> [Event(name="typed", type="flash.events.Event")] </mx:Metadata>



so here we have registered a custom event named "typed", and what we got is














A event for the view element of the view stack in main mxml i.e. eventTest.mxml
now lets dispatch the typed event and make it work !
here is the code :

dispatchEvent(new Event('typed'));


this need following import to be included

import flash.events.*;



So lets dispatch this event in the TextInput change listener we have created last time so that the event will be dispatched whenever the TextInput text is changed

public var typedText:String = "";
private function textUpdated():void
{
typedText = childText.text;

//the event "typed" is dispatched here
dispatchEvent(new Event('typed'));
}

and now lets add a listener in main to listen to this dispatched event

/// trigger of fv
public function updateTypedText():void
{
status.text = "stack child said :"+fv.typedText;
}

private function textUpdated():void
{

}



mxml code

<mx:viewstack><views:firstview id="fv" typed="updateTypedText()" backgroundcolor="#ffffff" backgroundalpha="0.3"></mx:ViewStack><mx:textinput id="parentText" text="text field of main application" change="textUpdated()" width="384"><mx:label id="status" width="100%" fontweight="bold" fontsize="16">

as typedText is a static text component of FirstView we can acess it directly from main as fv.typedText
similarly lets use another public function of FirstView

private function textUpdated():void
{

fv.parentListener(parentText.text);
}



Above we have successfully dispatched an event and listened to it in first phase and then we called a public function from dispatcher object to listener object
now showing complete code
Main MXML ( src/eventTest.mxml)
<?xml version="1.0" encoding="utf-8"?><mx:application mx="http://www.adobe.com/2006/mxml" views="com.nectflow.eventest.views.*" layout="absolute" minwidth="1024" minheight="768"><mx:script><![CDATA[ /// trigger of fv public function updateTypedText():void { status.text = "stack child said :"+fv.typedText; } private function textUpdated():void { fv.parentListener(parentText.text); }]]></mx:Script><mx:vbox> <mx:viewstack> <views:firstview id="fv" typed="updateTypedText()" backgroundcolor="#ffffff" backgroundalpha="0.3"></mx:ViewStack> <mx:textinput id="parentText" text="text field of main application" change="textUpdated()" width="384"> <mx:label id="status" width="100%" fontweight="bold" fontsize="16"> </mx:VBox></mx:Application>


And the component FirstView (src/com/nectflow/eventest/FirstView.mxml)
<?xml version="1.0" encoding="utf-8"?><mx:canvas mx="http://www.adobe.com/2006/mxml" width="400" height="300"> <!--the event "typed" is defined here--> <mx:metadata>[Event(name="typed", type="flash.events.Event")] </mx:Metadata> <mx:script> <![CDATA[ import flash.events.*; public var typedText:String = ""; private function textUpdated():void { typedText = childText.text; //the event "typed" is dispatched here dispatchEvent(new Event('typed')); } //this must be public to be acessed from parent public function parentListener(words:String):void { status.text = "my parent said :"+words; } ]]> </mx:Script> <mx:vbox label="this is the child"> <mx:label id="status" width="384" fontstyle="italic" fontsize="14"> <mx:textinput id="childText" text="text field of viewstack child" change="textUpdated()" width="395" height="29"> </mx:TextInput> </mx:VBox></mx:Canvas>


Hope this post gave you some clear concepts

please post comments

for better blog view and attachments switch to
http://sites.google.com/site/nectflowblog/home/eventtest