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 />

Custom Dialog via PopupManager and TitleWindow (1)

客製化與使用者互動的彈出視窗的方法，有兩種。
第一種方式為直接在主框架下透過PopUpManager將設置好的children加入TitleWindow，
也就是被客製的彈出視窗。
DEMO: http://140.112.31.185/flextest/popUpFrame.swf

<br />import mx.controls.Label;<br />import mx.events.CloseEvent;<br />import mx.containers.TitleWindow;<br />import mx.managers.PopUpManager;<br /><br />private var titleWindow:TitleWindow;<br /><br />private function init():void {<br /> var label:Label = new Label();<br /> label.text = "Hello world";<br /><br /> titleWindow = new TitleWindow();<br /> titleWindow.title = "Custom title";<br /> titleWindow.showCloseButton = true;<br /> titleWindow.width = 240;<br /> titleWindow.height = 180;<br /> titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);<br /> titleWindow.addChild(label);<br /><br /> PopUpManager.addPopUp(titleWindow, this, true);<br /> PopUpManager.centerPopUp(titleWindow);<br />}<br /><br />private function titleWindow_close(evt:CloseEvent):void {<br /> PopUpManager.removePopUp(titleWindow);<br />}<br />