Custom Dialog via PopupManager and TitleWindow (2)

第二種方式，我認為比較適合我們這種大型程式架構。
將TitleWindow，也就是欲彈出的視窗獨立寫成一個MXML Component，
在Flex Builder中, New一個新的MXML Component時，可以在下方選擇"Base on"，選TitleWindow。
接著，所產生的mxml檔，會以<mx:TitleWindow>框起來，裡面的內容就跟一般寫mxml一樣囉!
而在mainFrame中只要將mxml檔案名稱當作參數設在PopUpManager.createPopUp()就可以了!
(有種朝我們的目標：只有一個url入口，又更接近的感覺 XD, 這是上禮拜有聊到的)
DEMO: http://140.112.31.185/flextest/popUpMain.swf

popUpMain.mxml
<br />import mx.containers.TitleWindow;<br />import mx.managers.PopUpManager;<br /><br />private var titleWindow:TitleWindow;<br /><br />private function popUp():void {<br /> titleWindow = PopUpManager.createPopUp(this, CustomTitleWindow, true) as TitleWindow;<br /> PopUpManager.centerPopUp(titleWindow);<br />}<br />CustomTitleWindow.mxml
<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"<br /> title="A Popup Window for Additional Task" <br /> backgroundAlpha="1.0" <br /> borderColor="white" <br /> borderAlpha="1.0" <br /> cornerRadius="0" <br /> dropShadowEnabled="false" <br /> showCloseButton="true" <br /> close="titleWindow_close(event)"><br /><br /> <mx:Script><br /> <![CDATA[<br /> import mx.controls.Alert;<br /> import mx.events.CloseEvent;<br /> import mx.managers.PopUpManager;<br /><br /> private function titleWindow_close(evt:CloseEvent):void {<br /> PopUpManager.removePopUp(this)<br /> }<br /> private function titleWindow_continue():void {<br /> Alert.show("You got it!");<br /> PopUpManager.removePopUp(this);<br /> }<br /> ]]><br /> </mx:Script><br /><br /> <mx:Style><br /> .titleText {<br /> fontSize: 14px;<br /> }<br /> .headingText {<br /> paddingTop: 10px;<br /> paddingBottom: 10px;<br /> fontSize: 10px;<br /> }<br /> </mx:Style><br /><br /> <mx:Text text="You can add any components (children) here for your tasks." <br /> width="100%" <br /> styleName="headingText" /><br /> <mx:TextArea text="Like this textarea. Let your system more flexible." <br /> width="100%" <br /> height="100%" /><br /> <mx:HBox width="100%"><br /> <mx:CheckBox id="checkBox" <br /> label="Click here to make sure you got it." <br /> width="100%" /><br /> <mx:Button label="Continue" <br /> enabled="{checkBox.selected}"<br /> click="titleWindow_continue()" /><br /> </mx:HBox><br /></mx:TitleWindow><br />