Flex Pasta

Modal Windows in MXML

Up until the other day, when using modal and/or pop up windows in Flex, I have always instantiated them in Actionscript.  Since I use relative layout, I couldn’t really add an mxml component that would be a modal without it being drawn on the screen.  The advantages of declaring a modal in mxml would be:

• Taking advantage of mx:Metadata tags that allow me to invoke methods when events occur without manually adding listeners
• Automatic binding the same way my other components work
• Less code; by declaring the pop up window in mxml, I don’t have to invoke a method that creates an instance of the pop-up

Here is how you can declare a modal/popup window in mxml:

<mx:ArrayCollection id=”modals”>

 <MyPopupWindowComponent id=”modal1″ someBindings=”{bindingAVariable}” anEventThisComponentDispatchesInMetaData=”doSomething(event)”/>

</mx:ArrayCollection>

Now when you want to open the modal, just do PopupManager.addPopup(modal1,true,DisplayObject(Application.application));

This allows you to use the ease and power of bindings/metadata in modal windows.