Ever wondered how to add CSS attributes on to your own custom components, this can be useful if you have a large range of generic components used in different projects as you can take advantage of skinning your applications using CSS.
The example below is a simple component that highlights the border colour of a textinput control. If the set text has been changed, the border colour will change colour. This component would be useful for form editing.
package indecentmonkey.controls
{
import flash.events.Event;
import mx.controls.TextInput;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;
/**
* Colour of the outline of changed text
*
* @default 0x03ce02
*/
[Style(name="itemConfigChanged", type="uint", format="Color", inherit="no")]
/**
* Colour of the outline of unchanged text
*
* @default 0xb7babc
*/
[Style(name="itemConfigDefault", type="uint", format="Color", inherit="no")]
public class TextInputColour extends TextInput
{
public function TextInputColour() {
addEventListener(Event.CHANGE,handleColour);
}
/**
* @private
*
* We initialize the default styles for outline and fill styles by calling
* initStyles() when the component is instantiated.
*/
private static var stylesInitialised:Boolean = initStyles();
/**
* @private
*
* The default styes are defined here.
*/
private static function initStyles():Boolean {
var sd:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TextInputColour");
if (!sd) {
sd = new CSSStyleDeclaration();
StyleManager.setStyleDeclaration("TextInputColour", sd, false);
}
sd.defaultFactory = function():void {
this.itemConfigChanged = 0x03ce02;
this.itemConfigDefault = 0xb7babc;
}
return true;
}
/**
* string to hold set text
*/
private var _setText:String = "";
/**
* Handles initialization of this component.
*/
override public function initialize():void {
super.initialize();
}
override public function set text(value:String):void {
super.text = value;
_setText = value;
handleColour(new Event(Event.CHANGE));
}
private function handleColour(e:Event):void {
if ( _setText == text ) {
setStyle("borderColor",getStyle("itemConfigDefault"));
}
else {
setStyle("borderColor",getStyle("itemConfigChanged"));
}
}
}
}
example
viewsource
