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);
}
}