Flex Examples » contentBackgroundColor 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 background alpha on the MX LinkBar control in Flex 4 http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/#comments Thu, 06 May 2010 18:14:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=2942 The following example shows how you can set the background alpha on an MX LinkBar control in Flex 4 by setting the contentBackgroundAlpha style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ --> <s:Application name="MX_LinkBar_contentBackgroundAlpha_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:controlBarContent> <mx:Form> <mx:FormItem label="contentBackgroundAlpha:"> <s:HSlider id="sldr" minimum="0.0" maximum="1.0" snapInterval="0.1" stepSize="0.1" change="sldr_changeHandler(event);" /> </mx:FormItem> <mx:FormItem label="contentBackgroundColor:"> <mx:ColorPicker id="clrPckr" change="clrPckr_changeHandler(event);" /> [...]]]> The following example shows how you can set the background alpha on an MX LinkBar control in Flex 4 by setting the contentBackgroundAlpha style.

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/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="contentBackgroundAlpha:">
                <s:HSlider id="sldr"
                        minimum="0.0" maximum="1.0"
                        snapInterval="0.1"
                        stepSize="0.1"
                        change="sldr_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        change="clrPckr_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
 
            protected function sldr_changeHandler(evt:Event):void {
                lBar.setStyle("contentBackgroundAlpha", sldr.value);
            }
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                lBar.setStyle("contentBackgroundColor", clrPckr.selectedColor);
            }
 
            protected function lBar_creationCompleteHandler(evt:FlexEvent):void {
                sldr.value = lBar.getStyle("contentBackgroundAlpha");
                clrPckr.selectedColor = lBar.getStyle("contentBackgroundColor");
            }
        ]]>
    </fx:Script>
 
    <s:TitleWindow id="tWin"
            title="Spark TitleWindow title"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <mx:LinkBar id="lBar"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven]"
                    creationComplete="lBar_creationCompleteHandler(event);" />
        </s:controlBarContent>
    </s:TitleWindow>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundAlpha style using MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:TitleWindow id="tWin"
            title="Spark TitleWindow title"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <mx:LinkBar id="lBar"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven]"
                    contentBackgroundAlpha="0.0" />
        </s:controlBarContent>
    </s:TitleWindow>
 
</s:Application>

Or you can set the contentBackgroundAlpha style in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/ -->
<s:Application name="MX_LinkBar_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";
 
        mx|LinkBar {
            contentBackgroundAlpha: 0.0;
        }
    </fx:Style>
 
    <s:TitleWindow id="tWin"
            title="Spark TitleWindow title"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <mx:LinkBar id="lBar"
                    dataProvider="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:controlBarContent>
    </s:TitleWindow>
 
</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/06/setting-the-background-alpha-on-the-mx-linkbar-control-in-flex-4/feed/ 0 Setting the content background alpha on a Spark Panel container in Flex 4 http://blog.flexexamples.com/2009/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/ http://blog.flexexamples.com/2009/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/#comments Sun, 06 Sep 2009 13:39:29 +0000 Peter deHaan http://blog.flexexamples.com/?p=1811 The following example shows how you can set the content background alpha on a Spark Panel container’s children in Flex 4 by setting the contentBackgroundAlpha style.

This example requires Flex SDK 4.0.0.10007 or later.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_contentBackgroundAlpha_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> <mx:Form> <mx:FormItem label="contentBackgroundAlpha:"> <s:HSlider id="slider" minimum="0.0" maximum="1.0" [...]]]> The following example shows how you can set the content background alpha on a Spark Panel container’s children in Flex 4 by setting the contentBackgroundAlpha style.

This example requires Flex SDK 4.0.0.10007 or later.

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/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_contentBackgroundAlpha_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>
        <mx:Form>
            <mx:FormItem label="contentBackgroundAlpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        stepSize="0.1" />
            </mx:FormItem>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            backgroundColor="red"
            contentBackgroundAlpha="{slider.value}"
            contentBackgroundColor="{colorPicker.selectedColor}"
            horizontalCenter="0" verticalCenter="0">
        <s:TextArea id="sTA" left="10" right="10" top="10" bottom="10">
            <s:text><fx:String source="lorem.txt" /></s:text>
        </s:TextArea>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundAlpha style in an external .CSS file or an <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_contentBackgroundAlpha_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Panel {
            backgroundColor: red;
            contentBackgroundAlpha: 0.3;
            contentBackgroundColor: blue;
        }
    </fx:Style>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            horizontalCenter="0" verticalCenter="0">
        <s:TextArea id="sTA" left="10" right="10" top="10" bottom="10">
            <s:text><fx:String source="lorem.txt" /></s:text>
        </s:TextArea>
    </s:Panel>
 
</s:Application>

Or you can set the contentBackgroundAlpha style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_contentBackgroundAlpha_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>
        <mx:Form>
            <mx:FormItem label="contentBackgroundAlpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        stepSize="0.1"
                        change="slider_changeHandler(event);"/>
            </mx:FormItem>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function slider_changeHandler(evt:Event):void {
                pnl.setStyle("contentBackgroundAlpha", evt.currentTarget.value);
            }
 
            protected function colorPicker_changeHandler(evt:ColorPickerEvent):void {
                pnl.setStyle("contentBackgroundColor", evt.color);
            }
 
            protected function init():void {
                pnl.setStyle("backgroundColor", "red");
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
             title="Spark Panel title"
             horizontalCenter="0" verticalCenter="0"
             initialize="init();">
        <s:TextArea id="sTA" left="10" right="10" top="10" bottom="10">
            <s:text><fx:String source="lorem.txt" /></s:text>
        </s:TextArea>
    </s:Panel>
 
</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/09/06/setting-the-content-background-alpha-on-a-spark-panel-container-in-flex-4/feed/ 1 Setting the content background color on an MX Accordion container in Flex 4 http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/#comments Sat, 15 Aug 2009 15:06:42 +0000 Peter deHaan http://blog.flexexamples.com/?p=1615 In a previous example, “Setting the base color on an MX Accordion container in Flex 4″, we saw how you could set the base color on an MX Accordion container in Flex 4 by setting the baseColor style.

The following example shows how you can set the content background color on an MX Accordion [...]]]> In a previous example, “Setting the base color on an MX Accordion container in Flex 4″, we saw how you could set the base color on an MX Accordion container in Flex 4 by setting the baseColor style.

The following example shows how you can set the content background color on an MX Accordion container in Flex 4 by setting the contentBackgroundColor style.

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/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_contentBackgroundColor_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">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            contentBackgroundColor="{colorPicker.selectedColor}"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundColor style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_contentBackgroundColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|Accordion {
            contentBackgroundColor: haloBlue;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or, you can set the contentBackgroundColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_contentBackgroundColor_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">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                accordion.setStyle("contentBackgroundColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</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/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/feed/ 0 Setting the background color on a Halo DataGrid control in Flex 4 http://blog.flexexamples.com/2009/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/ http://blog.flexexamples.com/2009/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/#comments Thu, 02 Jul 2009 06:59:16 +0000 Peter deHaan http://blog.flexexamples.com/?p=1396 The following example shows how you can set the content background color on a Halo DataGrid control (with default Spark skin) in Flex 4 by setting the contentBackgroundColor and alternatingItemColors styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/ --> <s:Application name="Halo_DataGrid_contentBackgroundColor_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">   <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem [...]]]> The following example shows how you can set the content background color on a Halo DataGrid control (with default Spark skin) in Flex 4 by setting the contentBackgroundColor and alternatingItemColors styles.

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/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_contentBackgroundColor_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">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{Font.enumerateFonts(true)}"
            contentBackgroundColor="{colorPicker.selectedColor}"
            alternatingItemColors="[]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.


You could also set the contentBackgroundColor style in an external .CSS file or <Script/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_contentBackgroundColor_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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|DataGrid {
            alternatingItemColors: ClassReference(null);
            contentBackgroundColor: haloBlue;
        }
    </fx:Style>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{Font.enumerateFonts(true)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you could set the contentBackgroundColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_contentBackgroundColor_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 mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                dataGrid.setStyle("contentBackgroundColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{Font.enumerateFonts(true)}"
            alternatingItemColors="[]"
            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/07/01/setting-the-background-color-on-a-halo-datagrid-control-in-flex-4/feed/ 0 Setting the background fill color on a Halo TextArea control in Flex 4 http://blog.flexexamples.com/2009/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/ http://blog.flexexamples.com/2009/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/#comments Thu, 18 Jun 2009 05:39:46 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/ The following example shows how you can set the background fill color on the Halo TextArea control (with default Spark skin) in Flex 4 by setting the contentBackgroundColor style (in Flex 3 and earlier this was done by setting the backgroundColor style).

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/ --> <s:Application [...]]]> The following example shows how you can set the background fill color on the Halo TextArea control (with default Spark skin) in Flex 4 by setting the contentBackgroundColor style (in Flex 3 and earlier this was done by setting the backgroundColor 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/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_contentBackgroundColor_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">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy Doug."
            contentBackgroundColor="{colorPicker.selectedColor}"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

You can also set the contentBackgroundColor style in an external .CSS file or <Script> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_contentBackgroundColor_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:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
 
        mx|TextArea {
            contentBackgroundColor: haloSilver;
        }
    </fx:Style>
 
    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy Doug."
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

Or, you can set the contentBackgroundColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_contentBackgroundColor_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 mx.events.ColorPickerEvent;
 
            private function colorPicker_change(evt:ColorPickerEvent):void {
                textArea.setStyle("contentBackgroundColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy Doug."
            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/06/17/setting-the-background-fill-color-on-a-halo-textarea-control-in-flex-4/feed/ 5 Setting a content background color on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/#comments Mon, 20 Apr 2009 06:59:38 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ The following example shows how you can set the content background color on a Spark DropDownList control in Flex 4 by setting the contentBackgroundColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_contentBackgroundColor_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">   <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="contentBackgroundColor:"> <mx:ColorPicker id="colorPicker" selectedColor="white" /> </mx:FormItem> [...]]]> The following example shows how you can set the content background color on a Spark DropDownList control in Flex 4 by setting the contentBackgroundColor 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/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_contentBackgroundColor_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">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:DropDownList id="dropDownList"
            prompt="Please select a thing..."
            labelField="label"
            contentBackgroundColor="{colorPicker.selectedColor}"
            horizontalCenter="0"
            top="60">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundColor style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_contentBackgroundColor_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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|DropDownList {
            contentBackgroundColor: red;
        }
    </fx:Style>
 
    <s:DropDownList id="dropDownList"
            prompt="Please select a thing..."
            labelField="label"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

Or, you can set the contentBackgroundColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_contentBackgroundColor_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 mx.events.ColorPickerEvent;
 
            private function colorPicker_change(evt:ColorPickerEvent):void {
                dropDownList.setStyle("contentBackgroundColor", evt.color);
                dropDownList.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <mx:ColorPicker id="colorPicker"
            change="colorPicker_change(event);"
            left="10"
            top="10" />
 
    <s:DropDownList id="dropDownList"
            prompt="Please select a thing..."
            labelField="label"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</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/19/setting-a-content-background-color-on-a-spark-dropdownlist-control-in-flex-gumbo/feed/ 0 Setting the content background color on a Spark NumericStepper control in Flex Gumbo http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/#comments Wed, 01 Apr 2009 06:58:09 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/ The following example shows how you can set the content background color on a Flex Gumbo Spark NumericStepper control by setting the contentBackgroundColor style.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more [...]]]> The following example shows how you can set the content background color on a Flex Gumbo Spark NumericStepper control by setting the contentBackgroundColor style.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/ -->
<s:Application name="Spark_NumericStepper_contentBackgroundColor_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">

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:NumericStepper id="numericStepper"
            contentBackgroundColor="{colorPicker.selectedColor}"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundColor style in an external .CSS file or <Style/> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/ -->
<s:Application name="Spark_NumericStepper_contentBackgroundColor_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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|NumericStepper {
            contentBackgroundColor: haloSilver;
        }
    </fx:Style>

    <s:NumericStepper id="numericStepper"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

Or, you can set the contentBackgroundColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/ -->
<s:Application name="Spark_NumericStepper_contentBackgroundColor_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 mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                numericStepper.setStyle("contentBackgroundColor", evt.color);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:NumericStepper id="numericStepper"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/03/31/setting-the-content-background-color-on-an-fxnumericstepper-control-in-flex-gumbo/feed/ 0 Setting the content background color of a Spark Panel container in Flex 4 http://blog.flexexamples.com/2009/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/#comments Sat, 28 Mar 2009 02:50:21 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/ The following example shows how you can set the content background color on a Spark Panel container’s children in Flex 4 by setting the contentBackgroundColor style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/ --> <s:Application name="Spark_Panel_contentBackgroundColor_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> <mx:Form> <mx:FormItem label="contentBackgroundColor:"> <mx:ColorPicker id="colorPicker" selectedColor="white" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   <s:Panel id="panel" title="Spark Panel title" [...]]]> The following example shows how you can set the content background color on a Spark Panel container’s children in Flex 4 by setting the contentBackgroundColor style.

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/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_contentBackgroundColor_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>
        <mx:Form>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel id="panel"
            title="Spark Panel title"
            contentBackgroundColor="{colorPicker.selectedColor}"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
        </s:layout>
        <s:TextInput id="sTI"
                text="The quick brown fox jumps over the lazy dog." />
        <s:TextArea id="sTA"
                text="The quick brown fox jumps over the lazy dog." />
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundColor style in an external .CSS file or an <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_contentBackgroundColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Panel {
            contentBackgroundColor: haloOrange;
        }
    </fx:Style>
 
    <s:Panel id="panel"
            title="Spark Panel title"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
        </s:layout>
        <s:TextInput id="sTI"
                text="The quick brown fox jumps over the lazy dog." />
        <s:TextArea id="sTA"
                text="The quick brown fox jumps over the lazy dog." />
    </s:Panel>
 
</s:Application>

Or you can set the contentBackgroundColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_contentBackgroundColor_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>
        <mx:Form>
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_changeHandler(evt:ColorPickerEvent):void {
                panel.setStyle("contentBackgroundColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="panel"
            title="Spark Panel title"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
        </s:layout>
        <s:TextInput id="sTI"
                text="The quick brown fox jumps over the lazy dog." />
        <s:TextArea id="sTA"
                text="The quick brown fox jumps over the lazy dog." />
    </s:Panel>
 
</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/03/27/setting-the-content-background-color-of-a-fxpanel-container-in-flex-gumbo/feed/ 0 Using the AnimateColor effect to animate the content background color of a Spark TextInput control in Flex 4 http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/#comments Sat, 07 Mar 2009 07:42:35 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ The following example shows how you can use the AnimateColor effect to animate the background color on a Spark TextInput control in Flex 4.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ --> <s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_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" viewSourceURL="srcview/index.html">   <fx:Script> <![CDATA[ private function textInput_focusIn(evt:FocusEvent):void { colorEffect.play([evt.currentTarget]); }   private function textInput_focusOut(evt:FocusEvent):void { colorEffect.stop(); evt.currentTarget.setStyle("contentBackgroundColor", "white"); } [...]]]> The following example shows how you can use the AnimateColor effect to animate the background color on a Spark TextInput control in Flex 4.

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/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_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" viewSourceURL="srcview/index.html">
 
    <fx:Script>
        <![CDATA[
            private function textInput_focusIn(evt:FocusEvent):void {
                colorEffect.play([evt.currentTarget]);
            }
 
            private function textInput_focusOut(evt:FocusEvent):void {
                colorEffect.stop();
                evt.currentTarget.setStyle("contentBackgroundColor", "white");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:AnimateColor id="colorEffect"
                colorPropertyName="contentBackgroundColor"
                colorFrom="0xFFFFFF"
                colorTo="0xFF0000"
                repeatBehavior="reverse"
                repeatCount="0"
                duration="500" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:TextInput id="textArea1"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
        <s:TextInput id="textArea2"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
        <s:TextInput id="textArea3"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.


You can also animate the content background color on a Spark TextInput control in Flex 4 by using validators, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_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">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.validators.Validator;
            import mx.events.ValidationResultEvent;
 
            private function validateAll():void {
                colorEffect.stop();
                var results:Array = Validator.validateAll(validatorArr);
                if (results.length == 0) {
                    Alert.show("SUCCESS");
                } else {
                    var targetArr:Array = [];
                    var result:ValidationResultEvent;
                    for each (result in results) {
                        targetArr.push(result.currentTarget.source);
                    }
                    colorEffect.play(targetArr);
                }
            }
 
            private function textInput_invalid(trgt:Object):void {
                trgt.setStyle("contentBackgroundColor", "red");
            }
 
            private function textInput_valid(trgt:Object):void {
                trgt.setStyle("contentBackgroundColor", "white");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:AnimateColor id="colorEffect"
                colorPropertyName="contentBackgroundColor"
                colorFrom="0xFFFFFF"
                colorTo="0xFF0000"
                repeatBehavior="reverse"
                repeatCount="0"
                duration="500" />
 
        <fx:Array id="validatorArr">
            <mx:StringValidator id="validator1"
                    source="{textInput1}"
                    property="text"
                    tooShortError="This string is shorter than the minimum allowed length of 4."
                    tooLongError="This string is longer than the maximum allowed length of 20."
                    minLength="4"
                    maxLength="20"
                    valid="textInput_valid(event.currentTarget.source);"
                    invalid="textInput_invalid(event.currentTarget.source);" />
            <mx:StringValidator id="validator2"
                    source="{textInput2}"
                    property="text"
                    tooShortError="This string is shorter than the minimum allowed length of 4."
                    tooLongError="This string is longer than the maximum allowed length of 20."
                    minLength="4"
                    maxLength="20"
                    valid="textInput_valid(event.currentTarget.source);"
                    invalid="textInput_invalid(event.currentTarget.source);" />
        </fx:Array>
    </fx:Declarations>
 
    <mx:Form id="frm"
             horizontalCenter="0"
             verticalCenter="0">
        <mx:FormItem label="Username:" required="true">
            <s:TextInput id="textInput1" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem label="Password:" required="true">
            <s:TextInput id="textInput2" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem label="Email:">
            <s:TextInput id="textInput3" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem>
            <s:Button id="btn"
                    label="Validate!"
                    click="validateAll();" />
        </mx:FormItem>
    </mx:Form>
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/feed/ 2