Skin in flex4 (1): Custom skinnablecomponent

Flex4 provides a set of spark components to implement the new component skin customization (gumbo skinning
) To completely separate the component light display from the functional logic.
This document uses petrinet
For example, flex4 facilitates programming.

 

Nodes in petrinet

Is an example of petrinet. Petrinet has two types of nodes: Place and transition ). Both the library and change can accommodateToken
(Token ). If every changeInput Library
(Input place) all have tokens, and the change isEnable)
.

 

 

In flex3, to implement these two nodes, we usually adopt the inheritance method:

 

As we all know, inheritance and class expansion will bring about some problems. It is not a good solution to implement two different component classes just because of the different display.

In flex4, we can define only one component class to implement functional logic, and hand over the display to skin for processing:

 

 

Display and logic Separation

Spark components are inherited from skinnablecomponent, while skinnablecomponent inherits the sub-uicomponent and extends skin-related functions. Similarly, the skin class also inherits from uicomponent.

In this way, the spark component achieves the separation of display and logic based on the original component architecture.

 

Build Custom skinnablecomponent and skin

Directly inherit skinnablecomponent to implement a custom component:

 

Node.

Package skinsample <br/>{< br/> Import spark. components. supportclasses. skinnablecomponent; </P> <p> public class node extends skinnablecomponent <br/> {<br/> Public Function node () <br/>{< br/> super (); <br/>}< br/>}

 

When using skinnablecomponent, you must define the skinclass style. Otherwise, an error occurs. Skinclass is defined as follows:

/** <Br/> * Name of the skin class to use for this component. the skin must be a class that extends <br/> * the spark. components. supportclasses. skin Class. <br/> * @ langversion 3.0 <br/> * @ playerversion flash 10 <br/> * @ playerversion air 1.5 <br/> * @ productversion flex 4 <br/> */<br/> [style (name = "skinclass ", type = "class")] <br/>

 

Therefore, before using custom components, you must first define the skin class. Two skins are defined here:

 

Placeskin. mxml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: Skin xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/halo "width =" 400 "Height =" 300 "> <br/> <s: ellipse id = "ellipse" Top = "0" Right = "0" Bottom = "0" Left = "0"> <br/> <s: fill> <br/> <s: solidcolor color = "0x77cc22"/> <br/> </S: Fill> <br/> <s: stroke> <br/> <s: solidcolorstroke color = "0x131313" Weight = "2"/> <br/> </s: stroke> <br/> </S: ellipse> <br/> </S: Skin> <br/>

 

Transitionskin. mxml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: Skin xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/halo "width =" 400 "Height =" 300 "> <br/> <s: rect id = "rect" radiusx = "4" radiusy = "4" Top = "0" Right = "0" <br/> bottom = "0" Left = "0"> <br/> <s: fill> <br/> <s: solidcolor color = "0x131313"/> <br/> </S: Fill> <br/> <s: stroke> <br/> <s: solidcolorstroke color = "0x131313" Weight = "2"/> <br/> </s: stroke> <br/> </S: rect> <br/> </S: Skin>

 

The S: ellipse, S: rect and other elements are from fxg in flex4.
.

 

 

With skin, you can use the skinnablecomponent component:

 

Nodesample. mxml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: Drawing wedapplication xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/halo" xmlns: skinsample = "skinsample. * "> <br/> <FX: SCRIPT> <br/> <! -- [CDATA [<br/> Import skinsample. transitionskin; <br/>] --> <br/> </FX: SCRIPT> <br/> <skinsample: node skinclass = "skinsample. transitionskin "x =" 10 "Y =" 30 "width =" 50 "Height =" 50 "/> <br/> <skinsample: node skinclass =" skinsample. placeskin "x =" 80 "Y =" 30 "width =" 50 "Height =" 50 "/> <br/> </S: Drawing wedapplication> <br/>

 

The running effect is as follows: