Setting the disabled alpha on a Spark TextInput control in Flex 4

In a previous example, “Styling the disabled state on a Spark TextInput control in Flex 4”, we saw how you could style the disabled state on a Spark TextInput control in Flex 4 using CSS.

The following example shows how you can set the alpha of the disabled state of a Spark TextInput control in Flex 4 by creating a custom Spark TextInput skin and setting the alpha property on the disabled skin state.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ -->
<s:Application name="Spark_TextInput_skin_alpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="enabled" selected="true" />
    </s:controlBarContent>
 
    <s:TextInput id="txtInp1"
            text="Default Spark TextInput"
            enabled="{chckBx.selected}"
            width="300" />
 
    <s:TextInput id="txtInp2"
            text="Spark TextInput w/ custom skin"
            enabled="{chckBx.selected}"
            skinClass="skins.CustomTextInputSkin"
            width="300" />
 
</s:Application>

And the custom Spark TextInput skin, skins/CustomTextInputSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ -->
<s:SparkSkin name="CustomTextInputSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.2"
        blendMode="normal">
    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.TextInput")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            private var paddingChanged:Boolean;
 
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background", "textDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {
                return contentFill;
            }
 
            override protected function commitProperties():void
            {
                super.commitProperties();
 
                if (paddingChanged)
                {
                    updatePadding();
                    paddingChanged = false;
                }
            }
 
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                if (getStyle("borderVisible") == true)
                {
                    border.visible = true;
                    shadow.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
                }
                else
                {
                    border.visible = false;
                    shadow.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function updatePadding():void
            {
                if (!textDisplay)
                    return;
 
                // Push padding styles into the textDisplay
                var padding:Number;
 
                padding = getStyle("paddingLeft");
                if (textDisplay.getStyle("paddingLeft") != padding)
                    textDisplay.setStyle("paddingLeft", padding);
 
                padding = getStyle("paddingTop");
                if (textDisplay.getStyle("paddingTop") != padding)
                    textDisplay.setStyle("paddingTop", padding);
 
                padding = getStyle("paddingRight");
                if (textDisplay.getStyle("paddingRight") != padding)
                    textDisplay.setStyle("paddingRight", padding);
 
                padding = getStyle("paddingBottom");
                if (textDisplay.getStyle("paddingBottom") != padding)
                    textDisplay.setStyle("paddingBottom", padding);
            }
 
            override public function styleChanged(styleProp:String):void
            {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";
 
                super.styleChanged(styleProp);
 
                if (allStyles || styleProp.indexOf("padding") == 0)
                {
                    paddingChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            private static const focusExclusions:Array = ["textDisplay"];
 
            override public function get focusSkinExclusions():Array {
                return focusExclusions;
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1" />
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <!--- Defines the background fill color. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- text -->
    <s:RichEditableText id="textDisplay"
            verticalAlign="middle"
            widthInChars="10"
            left="1" right="1" top="1" bottom="1" />
 
</s:SparkSkin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.