CODEWITHSUNDEEP
apache-flexadobetextareatextinput
user1916817
user1916817

Reputation: 83

Set style for uneditable textinput and textarea flex components

Is there a way to change the style (background color) for all textinput and textarea components in a flex program with the 'editable' property set to false?

Thanks

Upvotes: 0

Views: 1787

Answers (1)

RIAstar
RIAstar

Reputation: 11912

Create a custom skin

Since there is no specific style for this, you'll have to create a custom skin. Just follow these steps:

  • Create a custom skin for TextInput. First create a new mxml file (for instance called MyTextInputSkin.mxml). The easiest approach now is to simply copy all of the code from spark.skins.spark.TextInputSkin into your new class.
  • Override the updateDisplayList() method and apply the necessary changes to the skin's classes based on the host component's editable property. For instance:

.

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);
    //when editable the background will be red and otherwise it'll be blue
    background.color = hostComponent.editable ? 0xff0000 : 0x0000ff;
}
  • Apply this skin to all TextInputs through a CSS selector, like this:

.

@namespace s "library://ns.adobe.com/flex/spark";

s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
}
  • Repeat for the TextArea component

Make it more generic

You can make it more generic by doing somethin like the following.
In the updateDisplayList() method:

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var bgColorStyle:String = "backgroundColor";
    if (!hostComponent.editable) = "nonEditableBackgroundColor";
    background.color = getStyle(bgColorStyle);
}

And in CSS:

@namespace s "library://ns.adobe.com/flex/spark";

s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
    backGroundColor: #ff0000;
    nonEditableBackgroundColor: #0000ff;
}

This way you can reuse the custom skin everywhere and apply differnt colors through styling.
Note that you will not be able to set nonEditableBackgroundColor through MXML because the host component doesn't have that style declared in its metadata. This does not apply to backGroundColor because it is a default style and is declared in TextInput's metadata.

Upvotes: 2

Related Questions