Flex之旅：第一部分：flex必备基础知识积累(10)---弹出窗口以及位置控制

弹出窗口

要注意几点（我个人的理解）：

• PopUpManager负责创建，删除，居中，前置弹出窗口。
  
• 要弹出的窗口，最好是以TitleWindow为基础自定义components
• 基于其它的类也可以，比如Box，Group,Canvas, 可可以通过PopUpManager创建出来，但是后续的功能就没有了！比如标题栏拖动，标题栏关闭按钮等。

上代码（基本来自flex cookbook ）

CustomPopUp.mxml:

<?xml version="1.0" encoding="utf-8"?><s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" width="150" height="100"  close="handleClose(event)"><fx:Script><![CDATA[import mx.managers.PopUpManager;import mx.events.CloseEvent;[Bindable]public var message:String;private function handleClose(evt:CloseEvent):void {PopUpManager.removePopUp(this);}]]></fx:Script><mx:Text width="100%" height="100%" text="{message}"/></s:TitleWindow>

PopupTest.mxml:

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"  ><fx:Script><![CDATA[import mx.managers.PopUpManager;private const POPUP_OFFSET:int = 10;private function showDetail(evt:MouseEvent):void {// create the popupvar popup:CustomPopUp =CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false));popup.message = "This is the detail for " +evt.target.label;}]]></fx:Script><mx:Canvas minWidth="249" minHeight="221" borderStyle="solid"><mx:LinkButton label="Top" x="100" y="10"   click="showDetail(event)"/><mx:LinkButton label="Left" x="10" y="100"   click="showDetail(event)"/><mx:LinkButton label="Bottom" x="100" y="200"   click="showDetail(event)"/><mx:LinkButton label="Right" x="200" y="100"   click="showDetail(event)"/><mx:Canvas x="125" y="40" width="100" height="100" backgroundColor="#ff0000"   rotation="45"></mx:Canvas></mx:Canvas></s:Application>

几点说明：

• var popup:CustomPopUp = CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false));   这句话在执行之后，其实popup页面就已经弹出了！
  
• 只不过弹出的位置，好像一直都是swf所覆盖区域的左上角：（0.0）点坐标。
• PopUpManager.createPopUp(this,CustomPopUp,false) 第一个参数是设置popup的parent
  
• 我觉得，设置第一个参数的意义在于，使用PopUpManager.centerPopUp(popup);  让popup在哪里居中！
  
• popup的parent如果是Application，那么就在整个屏幕居中弹出
  
• popup的parent如果是Group，那就就在这个Group居中弹出
  
• 下面来看看具体例子：

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"  ><fx:Script><![CDATA[import mx.managers.PopUpManager;private const POPUP_OFFSET:int = 10;private function showDetail(evt:MouseEvent):void {// create the popupvar popup:CustomPopUp =CustomPopUp(PopUpManager.createPopUp(buttomB,CustomPopUp,false));popup.message = "This is the detail for " +evt.target.label;PopUpManager.centerPopUp(popup);}]]></fx:Script><s:VGroup horizontalAlign="center" width="100%" height="100%" ><s:BorderContainer id="topB" width="100%" height="100%" ></s:BorderContainer><s:BorderContainer id="centerB" width="100%" height="100%" minHeight="225"><s:layout><s:VerticalLayout horizontalAlign="center" verticalAlign="middle"></s:VerticalLayout></s:layout><mx:Canvas minWidth="249" minHeight="221" borderStyle="solid"><mx:LinkButton label="Top" x="100" y="10"   click="showDetail(event)"/><mx:LinkButton label="Left" x="10" y="100"   click="showDetail(event)"/><mx:LinkButton label="Bottom" x="100" y="200"   click="showDetail(event)"/><mx:LinkButton label="Right" x="200" y="100"   click="showDetail(event)"/><mx:Canvas x="125" y="40" width="100" height="100" backgroundColor="#ff0000"   rotation="45"></mx:Canvas></mx:Canvas></s:BorderContainer><s:BorderContainer id="buttomB" width="100%" height="100%"  ></s:BorderContainer></s:VGroup></s:Application>

几点说明

• 分了三个区域：上面，中间，和下面
• PopUpManager.createPopUp(buttomB,CustomPopUp,false)  ，设置了popup的parent是buttomB（下面区域）
  
• 那么popup就会在buttomB区域居中显示

弹出窗口位置控制！

除了居中弹出之外，还是需要指定窗口的弹出位置的。

直接上代码。

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   ><fx:Script><![CDATA[import mx.controls.LinkBar;import mx.managers.PopUpManager;private const POPUP_OFFSET:int = 10;private function showDetail(evt:MouseEvent):void {// create the popupvar popup:CustomPopUp =CustomPopUp(PopUpManager.createPopUp(buttomB,CustomPopUp,false));popup.message = "This is the detail for " +evt.target.label;// position the popupvar pt:Point = new Point(0, 0);var lb:LinkButton = evt.target as LinkButton;trace(lb.x);trace(lb.y);trace("----------------");pt = lb.localToGlobal(pt);trace(pt.x);trace(pt.y);popup.x = pt.x + POPUP_OFFSET;popup.y = pt.y + evt.target.height;}]]></fx:Script><s:VGroup horizontalAlign="center" width="100%" height="100%" ><s:BorderContainer id="topB" width="100%" height="100%" ></s:BorderContainer><s:BorderContainer id="centerB" width="100%" height="100%" minHeight="225"><s:layout><s:VerticalLayout horizontalAlign="center" verticalAlign="middle"></s:VerticalLayout></s:layout><mx:Canvas minWidth="249" minHeight="221" borderStyle="solid"><mx:LinkButton label="Top" x="100" y="10"   click="showDetail(event)"/><mx:LinkButton label="Left" x="10" y="100"   click="showDetail(event)"/><mx:LinkButton label="Bottom" x="100" y="200"   click="showDetail(event)"/><mx:LinkButton label="Right" x="200" y="100"   click="showDetail(event)"/><mx:Canvas x="125" y="40" width="100" height="100" backgroundColor="#ff0000"   rotation="45"></mx:Canvas></mx:Canvas></s:BorderContainer><s:BorderContainer id="buttomB" width="100%" height="100%"  ></s:BorderContainer></s:VGroup></s:Application>

运行截图（我点击了right bottom）：

好吧，关键的代码就是，

• pt = evt.target.localToGlobal(pt);  把当前传入的linkButton的坐标（就是linkButton在canvas里面的坐标）转成，application内的全局坐标。
  
• 可以看看trace打印的值。
• popup.x = pt.x + POPUP_OFFSET; popup.y = pt.y + evt.target.height;
  
• popup在设置了x，y坐标之后，自己就移动过去啦~~~~~