Flex PropertyGrid Implementation

PropertyGrid in the interface design tool is a more common component, in the. NET WinForm design, PropertyGrid as a built-in component to implement the button, label and other components of the property settings, not only to meet the design requirements, It is also able to provide aesthetically useful help at runtime, but Flex is not provided as a mainstream technology in the current interface design presentation direction. To make up for this shortcoming, this article will introduce and implement the Flex PropertyGrid component model.

The PropertyGrid model can be divided into two parts, namely behavioral model and data presentation model.

The so-called behavioral model is the event that PropertyGrid contains and the way it is displayed in different states. In the event section we only support PropertyGrid selectedobjectchanged events. The display mode is mainly suspended, the Mini tab is turned on, the mouse moves to the Mini tab when the PropertyGrid main panel pops up, the mouse moves out of the PropertyGrid, the PropertyGrid automatically closes, and the Mini tab is displayed; non-suspended state , PropertyGrid docked in container, and the Mini tab closes.

The data presentation model is the metadata definition of the content displayed by PropertyGrid, and after using these well-defined metadata to mark the data type, the PropertyGrid can automatically read the metadata definition from the data type instance and automatically display it according to the category, description and other information.

The relevant code for the event model processing is as follows:

[Event (Name= "selectedobjectchanged", type= "PropertyGrid.") Propertygridevent ")]
[Event (Name= "floatstatechanged", type= "PropertyGrid.") Propertygridevent ")];
public class Ipropertygrid extends Canvas
{
Whether suspension
private Var Isfloat:boolean=false;
Mini Property card with suspension status required
private Var minipropertygird:canvas=null;
Current Selection Object
private Var selectedobject:object=null;

Properties Window Container
public Var container:displayobjectcontainer=null;
Properties Window content display Area
public Var content:vbox=null;
Suspend State Toggle Picture
public Var title_img_pin:image=null;
Minimize picture
public Var title_img_min:image=null;

/**
* Constructor
*　*/
Public Function Ipropertygrid ()
{
This.addeventlistener (Flexevent.creation_complete,init);
This.addeventlistener (Propertygridevent.float_state_changed,floatestatechangedhandler);
}

/**
* The processing function of the suspension state switch
*
* Logic: Suspend state, remove Property window from container, add mini Property window to container, add rollout handler function for property window
* Inline state, add the Property window to the container, from the Mini Property window in the container, remove the rollout handler function of the property window
*　*/
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);
}
}

/**
* Get the currently selected object
*　*/
Public function Get Selectedobj (): Object
{
return this.selectedobject;
}

/**
* Change the currently selected object and trigger the Selected_object_changed event
*　*/
Public function set Selectedobj (obj:object): void
{
if (this.selectedobject!=obj)
{
This.selectedobject=obj;
Dispatchevent (New Propertygridevent (propertygridevent.selected_object_changed));
}
}

/**
* Initialization function
*　*/
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 ();
}

/**
* Change the Suspend state function
*　*/
Public Function Changefloatstate (e:mouseevent): void
{
This.isfloat=!this.isfloat;
Dispatchevent (New Propertygridevent (propertygridevent.float_state_changed));
}

/**
* Display Properties Window function in suspended state
*　*/
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 ();
}

/**
* Initialize the Mini Properties window
*　*/
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);
}

/**
* Minimize Property Window functions
*　*/
Public Function Minpropertygrid (e:mouseevent): void
{
Popupmanager.removepopup (this);
}

/**
* Close the Suspension State Properties window handler function
*　*/
Public Function Mouseclosepropgrid (e:mouseevent): void
{
var pg:ipropertygrid=e.target as Ipropertygrid;
if (pg!=null)
{
Popupmanager.removepopup (PG);
}
}

/**
* Add Properties Window unit
*
* @param title: Unit Header
*　*/
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: Properties Window Events
* Selected_object_changed: Events triggered when the current selected object changes
* Float_state_changed: Events triggered when the suspension state changes
*
* @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);
}

}