Flex PropertyGrid实现

Flex PropertyGrid实现2011-04-10 博客园镜涛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）;
         }

     }