Flex4 practice-custom control skin

Design requirements:
1) For the textinput control on the interface, you need to set the 'mandatory 'and 'optional' statuses.

2) You want to give a special display style to the control in the 'mandatory 'status.

3) to simplify the code, you do not need to set the style for the textinput control every time.

 

Solution 1: Write style control to the CSS file and control the display of textinput through the style attribute.

Solution 2: Use the new features of flex4 to customize the control skin

 

This article will implement skin customization through solution 2
1) override the textinput Control
Package COM. custom. components <br/>{</P> <p> Import spark. components. textinput; </P> <p> public class customtextinput extends textinput <br/> {<br/> Public Function customtextinput () <br/>{< br/> super (); <br/>}</P> <p> private VaR _ isrequired: Boolean = true; </P> <p> Public Function get isrequired (): Boolean <br/>{< br/> return _ isrequired; <br/>}</P> <p> public function set isrequired (value: Boolean): void <br/>{< br/> _ isrequired = value; <br/>}</P> <p> override protected function getcurrentskinstate (): String <br/>{< br/> If (isrequired) <br/> return "require"; <br/> return "normal"; <br/>}< br/>}

 

2) Compile the skin file customtextinputskin. mxml

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <spark: textinputskin xmlns: FX = "http://ns.adobe.com/mxml/2009" <br/> xmlns: S = "Library: // ns.adobe.com/flex/spark" <br/> xmlns: MX = "Library: // ns.adobe.com/flex/halo" xmlns: spark = "spark. skins. spark. * "width =" 400 "Height =" 300 "<br/> contentbackgroundcolor. normal = "# fcfcfc" <br/> contentbackgroundcolor. require = "# f9ef84"> <br/> <spark: States> <br/> <s: State name = "normal"/> <br/> <s: state name = "require"/> <Br/> </spark: States> <br/> <FX: declarations> <br/> <! -- Place non-visual elements (e.g., services, value objects) Here --> <br/> </FX: declarations> <br/> </spark: textinputskin>

 

3) Main Application
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" <br/> xmlns: S = "Library: // ns.adobe.com/flex/spark" <br/> xmlns: MX = "Library: // ns.adobe.com/flex/halo" minwidth = "1024" minheight = "768" <br/> xmlns: components = "com. custom. components. * "> <br/> <FX: style source =" skinproject.css "/> <br/> <FX: SCRIPT> <br/> <! -- [CDATA [<br/> Import COM. custom. skin. *; <br/>] --> <br/> </FX: SCRIPT> <br/> <FX: declarations> <br/> <! -- Place non-visual elements (e.g ., services, value objects) Here --> <br/> </FX: declarations> <br/> <mx: formitem required = "true" label = "Name: "labelwidth =" 80 "Y =" 30 "x =" 80 "> <br/> <components: node skinclass =" com. custom. skin. customtextinputskin "width =" 200 "Height =" 20 "/> <br/> </MX: formitem> <br/> <mx: formitem label =" Description: "labelwidth =" 80 "Y =" 70 "x =" 80 "> <br/> <components: node skinclass =" com. custom. skin. customtextinputskin "width =" 200 "Height =" 20 "isrequired =" false "/> <br/> </MX: formitem> <br/> </S: Application>

 

Running effect:
Http://hi.csdn.net/space-202-do-album-picid-497866.html