cairngorm3工具类库Popup

最后更新日期：2010-07-30
1.Popup类库简介
Popup 类库可以用来代替PopUpManager。演示代码如下：
       
               
       

Popup 类可以简化MXML视图组件代码，我们就不再需要使用PopUpManager 类了。Popup 类也可以很好的与Presentation Model.协同工作。

Popup 类也可以派发一个Event.CLOSE事件，这个事件将由PopUpWrapper 自己抓住并处理，关闭窗体。

2.标签PopUpWrapper
作用
      标签PopUpWrapper 是一个非可视化的组件，用来打开和关闭pupup(弹出窗体)。
      当popup 窗体第一次打开，才进行初始化，然后每次都使用同一个窗体，而不是释放子窗体给垃圾回收器。
      当属性open 设置为True，则打开一个popup，里面包含一个自定义组件，上例中自定义组件只有一个Lable控件。
     当属性open设置为false，则关闭popup。

属性说明   
                open="true/false"
           center="true"
           modal="false"
           childList="{PopUpManagerChildList.POPUP}"
           opening="openingHandler()"
           opened="openedHandler()"
           closing="closingHandler()"
           closed="closedHandler()">
         
    
1.open：打开/关闭
2.center：是否居中
3.modal：未知
4.childList：未知
5. PopUpEvent.OPENING，当popup 视图创建完成，但是在添加到显示列表之前派发这个事件，由opening属性指定的openingHandler()函数接收并处理
6. PopUpEvent.OPENED，当popup 视图已经添加到显示列表之后，派发这个事件，由opened属性指定openedHandler()函数接收并处理。
7. PopUpEvent.CLOSING，当popup 视图从显示列表移除之前派发这个事件，由closing属性指定closingHandler()函数接收并处理。
8. PopUpEvent.CLOSED ，当popup 视图从显示列表移除之后派发这个事件，由closed属性指定closedHandler()函数接收并处理。

举例
例1：在as中使用PopUpWrapper
      private var wrapper:PopUpWrapper; 

      wrapper = new PopUpWrapper();   //定义一个PopUpWrapper对象
      wrapper.popup = new DeferredInstanceFromClass(MyPopup);  //设置popup的引用为类Mypop创建的对象
      wrapper.parent = box1;    //设置Mypop的父窗体为box1

     
     

     

MyPop.mxml

               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="300" height="200"
               title="Hello World!" close="handleClose()"
               >
   
       
   
   
   
        [Event(name="close", type="mx.events.CloseEvent")]
   
   
   
                    import mx.events.CloseEvent;
            import mx.controls.Alert;
            private function handleClose():void
            {
                Alert.show("handleClose");
            }
        ]]>
   
            width="100%"
        text="This is my super pop-up!"/>
            height="40"
        horizontalAlign="right"
        verticalAlign="middle">
                    label="Close"
            click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"/>
   


    代码说明：当wrapper.open = true时，在box1容器内显示子窗体
                   当wrapper.open = false时，在box1容器内关闭子窗体
                   当子窗体派发CloseEvent.CLOSE事件，父窗体一旦监听到，则自动关闭子窗体
    代码详见：PopUpASExample.mxml

例2：在Mxml中使用PopUpWrapper

      
		
      
      "Open" click="popup1.open = true"/>
      "Close" click="popup1.open = false"/>

      代码说明：通过设置popup1.open属性，打开或关闭MyPopup窗体
      代码详见：PopUpMXMLExample.mxml

3.标签PopUpFactory
标签PopUpFactory 使用了另外一种机制去管理popup窗体。属性factory可以设置popup视图类名或者声明一个内部自定义组件。代码举例如下：
                       open="true"
               factory="my.package.MyPopupView"
               reuse="false"/>

属性说明
      PopUpFactory 与PopUpWrapper 除了factory和reuse，其它相同，因为都继承一个父类。

每次打开popup窗体，PopUpFactory 都创建一个新的popup窗体。如果将reuse设置为false，popup窗体在关闭时由垃圾回收器回收。如果将reuse设置为true，则重复使用popup窗体。
如果应用程序只使用popup窗体仅一次，则就没必要将其保存到内存中。如果popup窗体需要反复显示和隐藏，比如菜单，就可以将reuse设置为true。

例1：在as中使用PopUpFactory
         private var factory:PopUpFactory;
         factory = new PopUpFactory();
         factory.popup = new ClassFactory(MyPopup);//设置popup的引用为类Mypop创建的对象
         factory.reuse = false;//不可重复使用弹出窗体
         factory.parent = box2;//设置Mypop的父窗体为box1

        
        
        

          MyPopup.mxml见上例
          代码说明：当factory.open = true时，在box2容器内显示子窗体
                         当factory.open = false时，在box2容器内关闭子窗体
                         当子窗体派发CloseEvent.CLOSE事件，父窗体一旦监听到，则自动关闭子窗体
          代码详见：PopUpASExample.mxml

例2：在mxml中使用PopUpFactory
                                        reuse="false"
                                popup="sample.MyPopup"
                                parent="{ box3 }"/>
       
       
        代码说明：在box3容器中弹出MyPopup窗体
        代码详见：PopUpMXMLExample.mxml

4.动画行为
我们在使用popup窗体时，可能需要定义一些类去描述popup窗体的动画行为。比如打开过程中显示一个动画，让popup窗体始终显示在父窗体的中间。
通过IPopUpBehavior 接口，可以创建自己的行为，而且行为之间相互独立。例子如下
                  open="{model.showPopUp}"
            factory="my.package.MyPopUpView">
          
                 
                       
                       
                 
          
      

实现自定义的popup行为，可实现IPopUpBehavior 接口：
       public interface IPopUpBehavior
       {
             function apply(opener:PopUpBase):void;
       }

例：演示动画行为
PlayEffectsPopUpBehavior.as
必须继承IPopUpBehavior接口，这里监听了PopUpEvent.OPENING和PopUpEvent.CLOSING事件，执行动画效果。
    public class PlayEffectsPopUpBehavior implements IPopUpBehavior
    {
       
        private var closingEvent:PopUpEvent;
       
        public function PlayEffectsPopUpBehavior()
        {
        }
       
        /** 作为popup窗体打开的动画效果. */
        public var openEffect:Effect;
       
        /** 作为popup窗体关闭的动画效果. */
        public var closeEffect:Effect;
       
        /** 从IPopUpBehavior接口继承并实现. */
        public function apply(base:PopUpBase):void
        {
            base.addEventListener(PopUpEvent.OPENING, onOpening);
            base.addEventListener(PopUpEvent.CLOSING, onClosing);
        }
       
        private function onOpening(event:PopUpEvent):void
        {
            if (openEffect)
            {
                openEffect.play([ event.popup ]);
            }
        }
       
        private function onClosing(event:PopUpEvent):void
        {
            //如果closeEffect存在
            if (closeEffect)
            {
                //将closingEvent先挂起，再执行动画，并监听动画效果结束事件
                closingEvent = event;
                closingEvent.suspendClosure();
               
                closeEffect.play([ event.popup ]);
                closeEffect.addEventListener(
                    EffectEvent.EFFECT_END,
                    onCloseEffectEnd);
            }
        }
       
        private function onCloseEffectEnd(event:EffectEvent):void
        {
            closeEffect.removeEventListener(
                EffectEvent.EFFECT_END,
                onCloseEffectEnd);
           
            //恢复结束事件的执行
            closingEvent.resumeClosure();
            closingEvent = null;
        }
    }
   
ZoomAndFadePopUpBehavior.mxml
将PlayEffectsPopUpBehavior.as的动画效果注册到组件中

    xmlns:mx=""
    xmlns:example="sample.*">
   
   
       
                                 alphaTo="1"/>
       
   
   
       
                                 alphaTo="0"/>
       
   


PopUpMXMLExample.mxml
在PopUpWrapper 中使用动画行为
                                        parent="{ box2 }"  reuse="true">
           
           
               
                   
               
           
       

在PopUpFactory 中使用动画行为
                                    reuse="false"
                            parent="{ box4 }">
           
               
           
           
               
                   
               
           

5.在Module中使用popup
在module模块里使用popup，与一般写法相同。
例
ModulePopups.mxml
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           layout="vertical"
           xmlns:popup="com.adobe.cairngorm.popup.*"
           xmlns:samples="sample.*">
   
   
                                    parent="{ box1 }">
           
       
       
       
   
   
   
           
                    label="1"
            click="popup1.open = true"/>
   
   
           
                    label="1"
            click="popup1.open = false"/>
   
            width="100%" height="100%">
                        width="25%" height="100%"
                backgroundColor="0x660099"/>
       


调用module
PopupInModule.mxml
   
                    import com.adobe.cairngorm.popup.PopUpWrapper;
           
            //这句话必须有，否则module弹出子窗体出错，是bug
            //显示无法访问空对象引用的属性或方法，应该是没有发现这个类引发
            private var wrapper:PopUpWrapper;

        ]]>
   
   
           
   

6.通过parsley调用popup窗体
如果popup窗体上存在parsley注入的对象，则必须通过parsley调用popup，必须引入popupParsley-1.7.swc，其代码如下

PopUpParsleyExample.mxml
        addedToStage="buildContext()"

        private function buildContext():void
        {
                FlexContextBuilder.build(ParsleyContext, this);
                //如果要在popup窗体中通过parsley注入对象，必须在此派发configureView事件
                //The configureView event tells Parsley that the view should be added to the IOC Container at runtime.
                dispatchEvent(new Event('configureView', true));
        }

        [Inject]
        [Bindable]
        public var context:Context;
        代码说明：parsley的上下文的根由系统自动注入

       
           
           
               
                   
               
           
       
        代码说明：通过AddPopUpToParsleyContext 引入parsley的上下文根

ParsleyPopup.mxml

               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:spicefactory=""
               title="Hello World!"
               width="400" height="300">
   
       
   
   
       
   
   
   
        [Event(name="close", type="mx.events.CloseEvent")]
   
   
   
                import mx.events.CloseEvent;
       
        [Inject]
        [Bindable]
        public var model:ParsleySharedObject;
        ]]>
   
  
                  text="Parsley injected { model.message }"/>
                       horizontalAlign="right"
                   verticalAlign="middle">
                           click="dispatchEvent( new CloseEvent( CloseEvent.CLOSE ) )"/>
   

    代码说明：这个弹出窗体由parsley注入一个ParsleySharedObject
    代码详见：PopUpParsleyExample.mxml

总结
所有代码详见项目CairnPopupProject.rar
项目开发环境：flex_sdk_4.0.0.14159,popup1.7.swc,popupParsley-1.7.swc,parsley-flex4-2.3.M2.swc,spicelib-flex-2.3.M2.swc

参考文献
1.How to use the Cairngorm Popup Library.