Flex PropertyGrid實現

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

　　　　 }