Keith Hair

I like using MXML because it is quicker than writing ActionScript for a lot tasks.
When you create a TitleWindow in MXML, it is not draggable.
To make a TitleWindow draggable you have to create the window in ActionScript using the PopUpManager methods "createPopUp" or "addPopUp"
I wanted this process simpler so that next time I wanted a draggable window, I could just use a simple MXML tag.

Here I extended the TitleWindow to make it be automatically added with the PopUpManager.
Also all the child components get carried over after PopUpManager is used.
I did this so I could lazily use MXML and all references to this component instance stay intact, because the PopUpManager is using the same instance of the MXML component.

The "Move Left" and "Move Right" buttons show that the references are ok.

MXML in "net/keithhair/FloatWindow.mxml"

 
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow creationComplete="init()"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   autoLayout="true"
			   width="400"
			   height="300">
	<fx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			import spark.components.Group;
			import spark.components.VGroup;
 
			protected var _vgroup:Group;
 
			protected function init():void
			{
				var p:String;
				var n:int;
				var a:Array=[];
				var _parent:DisplayObject=parent;
				//---------------------------------------------
				//Remove all the child elements store
				//the references in an Array
				//---------------------------------------------
				n=numElements - 1;
				while (n > -1)
				{
					a.push(removeElementAt(n));
					n--;
				}
				Group(parent).removeElement(this);
				//---------------------------------------------
				//Add a popup of a this TitleWindow instance,
				//Create a layout container and add all
				//the children back into it.
				//---------------------------------------------
				PopUpManager.addPopUp(this, _parent);
				n=a.length - 1;
				_vgroup=new VGroup();
				_vgroup.setStyle("top",5);
				_vgroup.setStyle("bottom",5);
				_vgroup.setStyle("left",5);
				_vgroup.setStyle("right",5);
				addElement(_vgroup);
				while (n > -1)
				{
					_vgroup.addElement(a[n]);
					n--;
				}
				addEventListener(CloseEvent.CLOSE, closer);
				PopUpManager.centerPopUp(this);
				p=null;
				n=0;
				a=null;
			}
 
			protected function closer(evt:CloseEvent):void
			{
                                removeEventListener(CloseEvent.CLOSE, arguments.callee);
				PopUpManager.removePopUp(this);
			}
		]]>
	</fx:Script>
</s:TitleWindow>
 

Now I can simply use MXML to make my draggable windows.
The window is draggable and all the
MXML children are there too.

 
	<keithhair:FloatWindow id="mywindow"
			       title="My Window"
			       width="250"
			       height="300">
		<mx:TabNavigator width="100%"
				 height="100%">
			<mx:VBox label="Buttons">
				<s:Button/>
				<s:Button/>
				<s:Button/>
			</mx:VBox>
			<mx:VBox label="Checkboxes">
				<s:CheckBox/>
				<s:CheckBox/>
				<s:CheckBox/>
			</mx:VBox>
			<mx:VBox label="TextAreas">
				<s:TextArea/>
				<s:TextArea/>
			</mx:VBox>
		</mx:TabNavigator>
	</keithhair:FloatWindow>
 

If you know of a more efficient way that does this or can make this better just add your comments to my blog.

This entry was posted on Thursday, November 18th, 2010 at 12:28 am and is filed under Flash Builder, Flex.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.