Flex Examples » enabled http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the background color of a disabled Spark TextArea control in Flex 4 http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/#comments Wed, 19 May 2010 01:00:57 +0000 Peter deHaan http://blog.flexexamples.com/?p=3128 In a previous example, “Changing the background color of a disabled TextArea control in Flex”, we saw how you can change the background color of a disabled MX TextArea control by setting the use the backgroundDisabledColor style.

The following example shows how you can change the background color of a disabled Spark TextArea control [...]]]> In a previous example, “Changing the background color of a disabled TextArea control in Flex”, we saw how you can change the background color of a disabled MX TextArea control by setting the use the backgroundDisabledColor style.

The following example shows how you can change the background color of a disabled Spark TextArea control in Flex 4 by setting the contentBackgroundColor style in 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_contentBackgroundColor_disabled_text"
        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:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="cb"
                label="enabled"
                selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|TextArea {
            contentBackgroundColor: haloGreen;
        }
 
        s|TextArea:disabled {
            contentBackgroundColor: red;
        }
    </fx:Style>
 
    <s:TextArea id="txtArea1"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
    <s:TextArea id="txtArea2"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
</s:Application>

If you want to change the contentBackgroundColor style on an individual Spark TextArea control instead of globally you can add an identifier to the CSS declaration, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_contentBackgroundColor_disabled_text"
        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:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="cb"
                label="enabled"
                selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|TextArea#txtArea1 {
            contentBackgroundColor: haloGreen;
        }
 
        s|TextArea:disabled#txtArea1 {
            contentBackgroundColor: red;
        }
    </fx:Style>
 
    <s:TextArea id="txtArea1"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
    <s:TextArea id="txtArea2"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/feed/ 0 Setting the disabled alpha on a Spark TextInput control in Flex 4 http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/ http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/#comments Thu, 08 Apr 2010 17:47:30 +0000 Peter deHaan http://blog.flexexamples.com/?p=2703 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 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

 
]]> http://blog.flexexamples.com/2010/04/08/setting-the-disabled-alpha-on-a-spark-textinput-control-in-flex-4/feed/ 0 Disabling the scrub bar on the Spark VideoPlayer control in Flex 4 http://blog.flexexamples.com/2009/12/08/disabling-the-scrub-bar-on-the-spark-videoplayer-control-in-flex-4/ http://blog.flexexamples.com/2009/12/08/disabling-the-scrub-bar-on-the-spark-videoplayer-control-in-flex-4/#comments Tue, 08 Dec 2009 15:17:55 +0000 Peter deHaan http://blog.flexexamples.com/?p=2241 In a previous example, “Disabling the mouse on the Spark VideoPlayer control scrub bar in Flex 4″, we saw how to disable the mouse on the Spark VideoPlayer control scrub bar in Flex 4 by setting the Boolean mouseEnabled and mouseChildren properties.

The following example shows how you can disable the scrub bar on [...]]]> In a previous example, “Disabling the mouse on the Spark VideoPlayer control scrub bar in Flex 4″, we saw how to disable the mouse on the Spark VideoPlayer control scrub bar in Flex 4 by setting the Boolean mouseEnabled and mouseChildren properties.

The following example shows how you can disable the scrub bar on the Spark VideoPlayer control in Flex 4 by setting the Boolean enabled property on the scrubBar skin part.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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"?>
<!--  -->
<s:Application name="Spark_VideoPlayer_scrubBar_enabled_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:controlBarContent>
        <s:CheckBox id="chBx"
                label="enabled"
                selected="true"
                change="chBx_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function chBx_changeHandler(evt:Event):void {
                vdPlyr.scrubBar.enabled = chBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:VideoPlayer id="vdPlyr"
            source="http://helpexamples.com/flash/video/caption_video.flv"
            muted="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/12/08/disabling-the-scrub-bar-on-the-spark-videoplayer-control-in-flex-4/feed/ 0 Disabling a Spark Application container in Flex 4 http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/ http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/#comments Fri, 14 Aug 2009 14:05:45 +0000 Peter deHaan http://blog.flexexamples.com/?p=1589 In a previous example, “Disabling an Application in Flex 3″, we saw how you could disable an entire Flex Application in Flex 3 by setting the Boolean enabled property on the application object.

The following example shows how you can disable an entire Spark Application in Flex 4 by setting the Boolean enabled property [...]]]> In a previous example, “Disabling an Application in Flex 3″, we saw how you could disable an entire Flex Application in Flex 3 by setting the Boolean enabled property on the application object.

The following example shows how you can disable an entire Spark Application in Flex 4 by setting the Boolean enabled property on the static FlexGlobals.topLevelApplication object.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/08/14/disabling-a-spark-application-in-flex-4/ -->
<s:Application name="Spark_Application_enabled_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.FlexGlobals;
 
            protected const tmr:Timer = new Timer(3000, 1);
 
            protected function init():void {
                tmr.addEventListener(TimerEvent.TIMER_COMPLETE, tmr_complete);
            }
 
            protected function tmr_complete(evt:TimerEvent):void {
                FlexGlobals.topLevelApplication.enabled = true;
                Alert.show("I'm back!", "Alert title");
            }
 
            protected function btn_click(evt:MouseEvent):void {
                FlexGlobals.topLevelApplication.enabled = false;
                tmr.start();
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <s:Button id="btn"
                label="Disable application (3 seconds)"
                chromeColor="red"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:TextInput id="txtInput" text="Spark TextInput" />
        <s:TextArea id="txtArea" text="Spark TextArea" />
        <s:List id="list">
            <s:dataProvider>
                <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
            </s:dataProvider>
        </s:List>
    </s:HGroup>
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/feed/ 7 Disabling an Application in Flex 3 http://blog.flexexamples.com/2009/08/14/disabling-an-application-in-flex-3/ http://blog.flexexamples.com/2009/08/14/disabling-an-application-in-flex-3/#comments Fri, 14 Aug 2009 13:57:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=1592 The following example shows how you can disable an entire Flex Application in Flex 3 by setting the Boolean enabled property on the application object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/14/disabling-an-application-in-flex-3/ --> <mx:Application name="Application_enabled_test" xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" verticalAlign="middle" initialize="init();">   <mx:Script> <![CDATA[ import mx.controls.Alert;   protected const tmr:Timer = new Timer(3000, [...]]]> The following example shows how you can disable an entire Flex Application in Flex 3 by setting the Boolean enabled property on the application object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/14/disabling-an-application-in-flex-3/ -->
<mx:Application name="Application_enabled_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white"
        verticalAlign="middle"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected const tmr:Timer = new Timer(3000, 1);
 
            protected function init():void {
                tmr.addEventListener(TimerEvent.TIMER_COMPLETE, tmr_complete);
            }
 
            protected function tmr_complete(evt:TimerEvent):void {
                application.enabled = true;
                appControlBar.enabled = true;
                Alert.show("I'm back!", "Alert title");
            }
 
            protected function btn_click(evt:MouseEvent):void {
                application.enabled = false;
                appControlBar.enabled = false;
                tmr.start();
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar id="appControlBar" dock="true">
        <mx:Button id="btn"
                label="Disable application (3 seconds)"
                themeColor="red"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:HBox horizontalCenter="0" verticalCenter="0">
        <mx:TextInput id="txtInput" text="Halo TextInput" />
        <mx:TextArea id="txtArea" text="Halo TextArea" />
        <mx:List id="list"
                dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
                verticalScrollPolicy="on"
                width="100" />
    </mx:HBox>
 
</mx:Application>

For an example of disabling a Flex 4 application, see “Disabling a Spark Application in Flex 4″.

 
]]> http://blog.flexexamples.com/2009/08/14/disabling-an-application-in-flex-3/feed/ 0 Accessing specific buttons in a Spark ButtonBar control in Flex 4 http://blog.flexexamples.com/2009/08/02/accessing-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ http://blog.flexexamples.com/2009/08/02/accessing-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/#comments Mon, 03 Aug 2009 03:20:05 +0000 Peter deHaan http://blog.flexexamples.com/?p=1290 In a suspiciously similar previous example, “Disabling specific buttons in a Spark ButtonBar control in Flex 4″, we saw how you could disable specific buttons in a Spark ButtonBar control in Flex 4 by using a custom skin and setting the skinClass style.

The following example shows you how you can modify specific buttons [...]]]> In a suspiciously similar previous example, “Disabling specific buttons in a Spark ButtonBar control in Flex 4″, we saw how you could disable specific buttons in a Spark ButtonBar control in Flex 4 by using a custom skin and setting the skinClass style.

The following example shows you how you can modify specific buttons at runtime using the Flex 4 Spark ButtonBar control’s dataGroup property and getElementAt() method.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/08/02/accessing-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:Application name="Spark_ButtonBar_dataGroup_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.components.ButtonBarButton;
 
            protected function btn1_click(evt:MouseEvent):void {
                var btnBarBtn:ButtonBarButton = btnBar.dataGroup.getElementAt(0) as ButtonBarButton;
                btnBarBtn.enabled = !btnBarBtn.enabled;
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn1"
                label="Toggle button 1"
                click="btn1_click(event);" />
    </mx:ApplicationControlBar>
 
    <s:ButtonBar id="btnBar"
            requireSelection="true"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[The quick brown,Fox jumps over,The lazy dog]" />
        </s:dataProvider>
    </s:ButtonBar>
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/08/02/accessing-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/feed/ 7 Disabling specific buttons in a Spark ButtonBar control in Flex 4 http://blog.flexexamples.com/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ http://blog.flexexamples.com/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/#comments Sat, 01 Aug 2009 14:07:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=1287 The following example shows how you can disable specific buttons in a Spark ButtonBar control in Flex 4 by using a custom skin and setting the skinClass style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ --> <s:Application name="Spark_ButtonBar_ButtonBarButton_enabled_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">   <s:ButtonBar id="btnBar" labelField="label" requireSelection="true" skinClass="skins.CustomButtonBarSkin" horizontalCenter="0" verticalCenter="0"> <s:dataProvider> <s:ArrayList> <fx:Object [...]]]> The following example shows how you can disable specific buttons in a Spark ButtonBar control in Flex 4 by using a custom skin and setting the skinClass style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:Application name="Spark_ButtonBar_ButtonBarButton_enabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:ButtonBar id="btnBar"
            labelField="label"
            requireSelection="true"
            skinClass="skins.CustomButtonBarSkin"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Button 1" />
                <fx:Object id="obj2" label="Button 2" enabled="false" />
                <fx:Object label="Button 3" enabled="true" />
                <fx:Object label="Button 4" enabled="false" />
            </s:ArrayList>
        </s:dataProvider>
    </s:ButtonBar>
 
</s:Application>

View source is enabled in the following example.


The custom Spark ButtonBar skin class, skins/CustomButtonBarSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:Skin name="CustomButtonBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.ButtonBar")]
        ]]>
    </fx:Metadata>
 
    <fx:Declarations>
        <fx:Component id="middleButton" >
            <s:ButtonBarButton skinClass="skins.CustomButtonBarMiddleButtonSkin" />
        </fx:Component>
    </fx:Declarations>
 
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>
 
</s:Skin>

And the custom Spark ButtonBarButton skin class, skins/CustomButtonBarMiddleButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarMiddleButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabledStates="0.5"
        creationComplete="init();">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.ButtonBarButton")]
        ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized.
        For toggle button, the graphics are colorized but the label is not. */
        static private const exclusions:Array = ["labelDisplay"];
 
        override public function get colorizeExclusions():Array {return exclusions;}
 
        protected function init():void {
            try {
                if (hostComponent.data.hasOwnProperty("enabled")) {
                    hostComponent.enabled = hostComponent.data.enabled;
                }
            } catch (err:*) {
                // ignore
            }
        }
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="0" right="0" bottom="-1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000"
                    color.downStates="0xFFFFFF"
                    alpha="0.07"
                    alpha.downStates="0.5" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                        color.selectedUpStates="0xBBBDBD"
                        color.overStates="0xBBBDBD"
                        color.downStates="0xAAAAAA"
                        alpha="0.85"
                        alpha.overAndSelected="1" />
                <s:GradientEntry color="0xD8D8D8"
                        color.selectedUpStates="0x9FA0A1"
                        color.over="0x9FA0A1"
                        color.overAndSelected="0x8E8F90"
                        color.downStates="0x929496"
                        alpha="0.85"
                        alpha.overAndSelected="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                    alpha="0.33"
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22"
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000"
                                 alpha="0.5625"
                                 alpha.down="0.6375"
                                 alpha.selectedStates="0.6375" />
                <s:GradientEntry color="0x000000"
                                 alpha="0.75"
                                 alpha.down="0.85"
                                 alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: text -->
    <!--- Defines the appearance of the label(s) for the middle button(s) in the ButtonBar component. -->
    <s:SimpleText id="labelDisplay"
                  textAlign="center"
                  verticalAlign="middle"
                  maxDisplayedLines="1"
                  horizontalCenter="0" verticalCenter="1"
                  left="10" right="10" top="2" bottom="2" />
 
</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.

 
]]> http://blog.flexexamples.com/2009/08/01/disabling-specific-buttons-in-a-spark-buttonbar-control-in-flex-4/feed/ 6 Disabling the play/pause button on the Spark VideoPlayer control in Flex 4 http://blog.flexexamples.com/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/#comments Thu, 14 May 2009 05:55:48 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/ The following example shows how you can disable/enable the play/pause button on the Spark VideoPlayer control in Flex 4 by setting the enabled property on the VideoPlayer control’s playPauseButton skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/ --> <s:Application name="Spark_VideoPlayer_playPauseButton_enabled_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { videoPlayer.playPauseButton.enabled = checkBox.selected; } ]]> </fx:Script> [...]]]> The following example shows how you can disable/enable the play/pause button on the Spark VideoPlayer control in Flex 4 by setting the enabled property on the VideoPlayer control’s playPauseButton skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_playPauseButton_enabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                videoPlayer.playPauseButton.enabled = checkBox.selected;
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar dock="true" width="100%" cornerRadius="0">
        <s:CheckBox id="checkBox"
                label="playPauseButton enabled"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <s:VideoPlayer id="videoPlayer"
            source="http://helpexamples.com/flash/video/water.flv"
            autoRewind="true"
            muted="true"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_playPauseButton_enabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">

    <fx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import spark.components.VideoPlayer;
            import spark.components.CheckBox;

            private var checkBox:CheckBox;
            private var videoPlayer:VideoPlayer;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.label = "playPauseButton enabled";
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.percentWidth = 100;
                appControlBar.setStyle("cornerRadius", 0);
                appControlBar.addChild(checkBox);
                addElementAt(appControlBar, 0);

                videoPlayer = new VideoPlayer();
                videoPlayer.source = "http://helpexamples.com/flash/video/water.flv";
                videoPlayer.autoRewind = true;
                videoPlayer.muted = true;
                videoPlayer.horizontalCenter = 0;
                videoPlayer.verticalCenter = 0;
                addElement(videoPlayer);
            }

            private function checkBox_change(evt:Event):void {
                videoPlayer.playPauseButton.enabled = checkBox.selected;
            }
        ]]>
    </fx:Script>

</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/05/13/disabling-the-playpause-button-on-the-spark-videoplayer-control-in-flex-gumbo/feed/ 3 Styling the disabled state on a Spark TextInput control in Flex 4 http://blog.flexexamples.com/2009/04/04/styling-the-disabled-state-on-a-spark-textinput-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/04/styling-the-disabled-state-on-a-spark-textinput-control-in-flex-gumbo/#comments Sun, 05 Apr 2009 06:59:17 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/04/styling-the-disabled-state-on-a-spark-textinput-control-in-flex-gumbo/ The following example shows how you can style the disabled state on a Spark TextInput control in Flex 4.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/04/styling-the-disabled-state-on-a-spark-textinput-control-in-flex-gumbo/ --> <s:Application name="Spark_TextInput_disabled_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:BasicLayout /> </s:layout> <s:controlBarContent> <s:CheckBox id="checkBox" label="enabled" selected="true" /> </s:controlBarContent>   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark";   s|TextInput:disabled { [...]]]> The following example shows how you can style the disabled state on a Spark TextInput control in Flex 4.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/04/04/styling-the-disabled-state-on-a-spark-textinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_disabled_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:BasicLayout />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="checkBox"
                label="enabled"
                selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|TextInput:disabled {
            borderColor: haloOrange;
            contentBackgroundColor: haloSilver;
        }
    </fx:Style>
 
 
    <s:TextInput id="textInput"
            enabled="{checkBox.selected}"
            horizontalCenter="0" verticalCenter="0"
            initialize="textInput.text = mx_internal::VERSION;" />
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/04/04/styling-the-disabled-state-on-a-spark-textinput-control-in-flex-gumbo/feed/ 3 Disabling a Spark RadioButtonGroup in Flex 4 http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/#comments Sat, 04 Apr 2009 06:58:07 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ The following example shows how you can disable a group of radio buttons by setting the Boolean enabled property on a Spark RadioButtonGroup control in Flex 4.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ --> <s:Application name="Spark_RadioButtonGroup_enabled_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" initialize="sdkVer.text = mx_internal::VERSION;"> <s:layout> <s:BasicLayout /> </s:layout> <fx:Declarations> <s:RadioButtonGroup id="radioBtnGroup" enabled="{checkBox.selected}" [...]]]> The following example shows how you can disable a group of radio buttons by setting the Boolean enabled property on a Spark RadioButtonGroup control in Flex 4.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/ -->
<s:Application name="Spark_RadioButtonGroup_enabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="sdkVer.text = mx_internal::VERSION;">
    <s:layout>
        <s:BasicLayout />
    </s:layout>

    <fx:Declarations>
        <s:RadioButtonGroup id="radioBtnGroup"
                enabled="{checkBox.selected}" />
    </fx:Declarations>

    <s:CheckBox id="checkBox"
            label="enabled"
            selected="true"
            x="10"
            y="10" />

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:RadioButton id="radioBtn1"
                label="Red"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn2"
                label="Orange"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn3"
                label="Yellow"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn4"
                label="Green"
                group="{radioBtnGroup}" />
        <s:RadioButton id="radioBtn5"
                label="Blue"
                group="{radioBtnGroup}" />
    </s:VGroup>

    <s:SimpleText id="sdkVer"
            right="10"
            bottom="10" />

</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/04/03/disabling-a-spark-radiobuttongroup-in-flex-gumbo/feed/ 0