Communicating Between Components In Flex; TitleWindows

My last post went over some what not-to-dos and I guess that is still fresh in my head. Passing messages between class and components really is the preferably way to structure an application. Driving that point home to me fron another area, was in the handling of titleWindows. Once you add one, you are very likely going to be interested in removing it as some point.

My initial efforts had me delegating that task to the titleWindow itself:


<mx:TitleWindow showCloseButton="true" close="PopUpManager.removePopUp(this)">

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
]]>

</mx:Script>
            
</mx:TitleWindow>

In order for the parent to be privy to the close, you would need to add an eventListener and do something like the following:


<mx:Script>
<![CDATA[

private var _tw:TitleWindow = new TitleWindow();
_tw.addEventListener(CloseEvent.CLOSE,doCloseTitleWindow);

private function doCloseTitleWindow(e:CloseEvent):void {
// do something
}

]]>

</mx:Script>

This works in simple cases. However, the problem with this is that, while the parent gets notification of the event, it can't do a lot to manage it. If there are dependencies, additional functions that need to be performed or anything else, the option is pretty much not there.

A better way, as I described in the previous entry, would be for the titleWindow to dispatch an event and for the listening parent to perform the necessary actions. Not only does it allow a controller to managing the happenings of the application, but it lessens the load too. That is, the titleWindow doesn't need to load the mx.managers.PopUpManager library and it doesn't need to contemplate its role in the world. It is completely sufficient for it to just pass along the message and leave the thinking to the controller.

Anyway, all this looks like ...

In the parent:


<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;


private var _tw:TitleWindow = new TitleWindow();

private function doInit():void {
_tw.addEventListener(_tw.CLOSE_EVENT.CLOSE,doCloseTitleWindow,false,0,true);
PopUpManager.addPopUp(_tw);
}

private function doCloseTitleWindow(e:Event):void {
// do something
PopUpManager.removePopUp(_tw);
}



]]>

</mx:Script>

And in the titleWindow:


<mx:TitleWindow showCloseButton="true" close="closeMe()">
<mx:Metadata>
[Event(name="clsoeEvent", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[

private const CLOSE_EVENT:String = "closeEvent";

private function closeMe();
dispatchEvent(new Event(CLOSE_EVENT));
]]>

</mx:Script>
            
</mx:TitleWindow>

So, my reoccuring theme is to avoid trying to do much in your individual classes/components. If the component is doing anything beyond itself (and closing itself is included in that), then it is likely over-reaching itself.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
E?ref Atak's Gravatar Thanks for useful article and sample code.
# Posted By E?ref Atak | 3/14/10 10:25 AM
cbenjemia's Gravatar Hi

i have this message after coping code

in the main "Application"

doCloseModule
-1119: Access of possibly undefined property CLOSE_EVENT through a reference with static type spark.components:TitleWindow.
-Access of undefined property CLOSE_EVENT
# Posted By cbenjemia | 11/24/11 7:20 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.001. Contact Blog Owner