当前位置: > 网站建设 > Flex教程 >

Flex PropertyGrid实现

时间:2012-03-24 | 栏目:Flex教程 | 点击:

PropertyGrid在界面设计工具中是比较常用的组件,在.NET的WinForm设计中, PropertyGrid作为内置的组件来实现对 button、label等组件的属性设置,不仅满足了设计 时的需要,还能够在运行时提供美观实用的帮助;但是Flex作为目前界面设计展现方向上的 主流技术,并没有提供该组件。为了弥补这一不足,本文将介绍并实现Flex PropertyGrid组 件模型。

PropertyGrid模型可以分为两个部分,即行为模型和数据展现模型。

所谓的行为模型就是PropertyGrid所包含的事件及其在不同状态下的展示方式。事件部分 我们暂且只支持PropertyGrid的 selectedObjectChanged事件。展示方式主要是悬浮状态下 ,Mini选项卡开启,鼠标移到Mini选项卡的时候 PropertyGrid主面板弹出,鼠标移出 PropertyGrid时,PropertyGrid自动关闭,同时显示出Mini选项卡,;非悬浮状态下, PropertyGrid停靠在Container中,Mini选项卡关闭。

数据展现模型就是PropertyGrid所展示内容的元数据定义,用这些定义好的元数据标记数 据类型后,PropertyGrid可以自动的从数据类型实例中读取元数据定义,并根据类别、描述 等信息自动展示。

事件模型处理相关代码如下:

[Event (name="selectedObjectChanged",type="propertygrid.PropertyGridEvent")]
     [Event (name="floatStateChanged",type="propertygrid.PropertyGridEvent")];
     public class IPropertyGrid extends Canvas 
     {
         //是否悬浮 
         private var isFloat:Boolean=false;
         //悬浮状态需要的mini属性卡 
         private var miniPropertyGird:Canvas=null;
         //当前选择对象
         private var selectedObject:Object=null;

         //属性窗口容器 
         public var container:DisplayObjectContainer=null;
         //属性窗口内容展示区 
         public var content:VBox=null;
         //悬浮状态切换图片 
         public var title_img_pin:Image=null;
         //最小化图片 
         public var title_img_min:Image=null;

         /**
          * 构造函数
          * */
         public function IPropertyGrid()
         {
             this.addEventListener (FlexEvent.CREATION_COMPLETE,init);
             this.addEventListener (PropertyGridEvent.FLOAT_STATE_CHANGED,floateStateChangedHandler);
         }

         /**
          * 悬浮状态切换的处理函数
          *
          * 逻辑:悬浮状态,从容器中移除属性窗口,将mini属性窗口增加 到容器中,同时为属性窗口增加Rollout处理函数
          *         内嵌状态,将属性窗口增加到容器,从容器中 mini属性窗口,移除属性窗口的Rollout处理函数
          * */
         public function floateStateChangedHandler (e:PropertyGridEvent):void
         {
             if(isFloat)
             {
                 this.container.removeChild(this);
                 this.container.addChild(miniPropertyGird);
                 this.addEventListener (MouseEvent.ROLL_OUT,mouseClosePropGrid);
             }
             else 
             {
                 this.container.addChild(this);
                 this.container.removeChild (miniPropertyGird);
                 this.removeEventListener (MouseEvent.ROLL_OUT,mouseClosePropGrid);
             }
         }

         /**
          * 获取当前选中对象
          * */
         public function get SelectedObj():Object
         {
             return this.selectedObject;
         }

         /**
          * 更改当前选中对象,并触发SELECTED_OBJECT_CHANGED事件
          * */
         public function set SelectedObj(obj:Object):void
         {
             if(this.selectedObject!=obj)
             {
                 this.selectedObject=obj;
                 dispatchEvent(new PropertyGridEvent (PropertyGridEvent.SELECTED_OBJECT_CHANGED));
             }
         }

         /**
          * 初始化函数
          * */
         public function init(e:FlexEvent):void
         {
             Assert.notNull(container,"container");
             Assert.notNull(content,"content");
             Assert.notNull(title_img_pin,"title_img_pin");
             Assert.notNull(title_img_min,"title_img_min");
             title_img_pin.addEventListener (MouseEvent.CLICK,changeFloatState);
             title_img_min.addEventListener (MouseEvent.CLICK,minPropertyGrid);
             initMiniPropertyGrid();
         }

         /**
          * 更改悬浮状态函数
          * */
         public function changeFloatState(e:MouseEvent):void
         {
             this.isFloat=!this.isFloat;
             dispatchEvent(new PropertyGridEvent (PropertyGridEvent.FLOAT_STATE_CHANGED));
         }

         /**
          * 悬浮状态下显示属性窗口函数
          * */
         public function showPropertyGrid(e:MouseEvent):void
         {
             var point:Point=new Point (container.x+container.width-this.width,container.y);
             var targetPoint:Point=container.localToGlobal (point);
             this.x=targetPoint.x;
             this.y=targetPoint.y;
             this.height=container.height;
             PopUpManager.addPopUp(this,container,false);
             var effect:WipeLeft=new WipeLeft();
             effect.duration=300;
             effect.target=this;
             effect.play();
         }

         /**
          * 初始化mini属性窗口
          * */
         public function initMiniPropertyGrid():void
         {
             miniPropertyGird=new Canvas();
             miniPropertyGird.height=100;
             miniPropertyGird.width=25;
             miniPropertyGird.setStyle("top",0);
             miniPropertyGird.setStyle("right",0);
             var img:Image=new Image();
             img.source="assets/propertygrid.png";
             img.percentHeight=100;
             img.percentWidth=100;
             img.addEventListener (MouseEvent.MOUSE_OVER,showPropertyGrid);

             miniPropertyGird.addChild(img);
         }

         /**
          * 最小化属性窗口函数
          * */
         public function minPropertyGrid(e:MouseEvent):void
         {
             PopUpManager.removePopUp(this);
         }

         /**
          * 关闭悬浮状态属性窗口处理函数
          * */
         public function mouseClosePropGrid(e:MouseEvent):void
         {
             var pg:IPropertyGrid=e.target as IPropertyGrid;
             if(pg!=null)
             {
                 PopUpManager.removePopUp(pg);
             }
         }

         /**
          * 增加属性窗口单元
          *
          * @param title:单元标题
          * */
         public function addGridUnit(title:String):GridUnit
         {
             var tgrid:GridUnit=new GridUnit();
             PopUpManager.addPopUp (tgrid,Application.application.document);
             tgrid.title_content.text=title;
             this.content.addChild(tgrid);
             return tgrid;
         }
     }

     /**
      * @desc:    属性窗口事件
      *     SELECTED_OBJECT_CHANGED    :    当前选中对象改变 时触发的事件
      *     FLOAT_STATE_CHANGED        :    悬浮状态发生 改变时触发的事件
      *
      * @author:    sunjingtao
      * */
     public class PropertyGridEvent extends Event
     {
         public static const  SELECTED_OBJECT_CHANGED:String="selectedObjectChanged";
         public static const  FLOAT_STATE_CHANGED:String="floatStateChanged";
         public function PropertyGridEvent(type:String,  bubbles:Boolean=false, cancelable:Boolean=false)
         {
             super(type, bubbles, cancelable);
         }

     }

您可能感兴趣的文章:

相关文章