Flex Examples » baseColor http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the base color on a Halo MenuBar control in Flex 4 http://blog.flexexamples.com/2009/08/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/ http://blog.flexexamples.com/2009/08/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/#comments Sat, 22 Aug 2009 14:01:51 +0000 Peter deHaan http://blog.flexexamples.com/?p=1700 The following example shows how you can set the base background color on a Halo MenuBar control in Flex 4 by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/ --> <s:Application name="Halo_MenuBar_baseColor_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="baseColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" /> </mx:FormItem> [...]]]> The following example shows how you can set the base background color on a Halo MenuBar control in Flex 4 by setting the baseColor 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/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/ -->
<s:Application name="Halo_MenuBar_baseColor_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="baseColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            baseColor="{colorPicker.selectedColor}"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:XML>
                <root>
                    <parent label="File">
                        <node label="a) File" />
                        <node label="b) File" />
                        <node label="c) File" />
                        <node label="d) File" />
                        <node label="e) File" />
                    </parent>
                    <parent label="Edit">
                        <node label="a) Edit" />
                        <node label="b) Edit" />
                    </parent>
                    <parent label="View">
                        <parent label="a) View" />
                        <parent label="b) View" />
                        <parent label="c) View" />
                    </parent>
                    <parent label="Favorites">
                        <parent label="a) Favorites" />
                    </parent>
                    <parent label="Tools">
                        <node label="a) Tools" />
                        <node label="b) Tools" />
                        <node label="c) Tools" />
                    </parent>
                    <parent label="Help">
                        <node label="a) Help" />
                        <node label="b) Help" />
                        <node label="c) Help" />
                        <node label="d) Help" />
                    </parent>
                </root>
            </fx:XML>
        </mx:dataProvider>
    </mx:MenuBar>
 
</s:Application>

You can also set the baseColor 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/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/ -->
<s:Application name="Halo_MenuBar_baseColor_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|MenuBar {
            baseColor: haloBlue;
        }
    </fx:Style>
 
    <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:XML>
                <root>
                    <parent label="File">
                        <node label="a) File" />
                        <node label="b) File" />
                        <node label="c) File" />
                        <node label="d) File" />
                        <node label="e) File" />
                    </parent>
                    <parent label="Edit">
                        <node label="a) Edit" />
                        <node label="b) Edit" />
                    </parent>
                    <parent label="View">
                        <parent label="a) View" />
                        <parent label="b) View" />
                        <parent label="c) View" />
                    </parent>
                    <parent label="Favorites">
                        <parent label="a) Favorites" />
                    </parent>
                    <parent label="Tools">
                        <node label="a) Tools" />
                        <node label="b) Tools" />
                        <node label="c) Tools" />
                    </parent>
                    <parent label="Help">
                        <node label="a) Help" />
                        <node label="b) Help" />
                        <node label="c) Help" />
                        <node label="d) Help" />
                    </parent>
                </root>
            </fx:XML>
        </mx:dataProvider>
    </mx:MenuBar>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/ -->
<s:Application name="Halo_MenuBar_baseColor_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 {
                menuBar.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:XML>
                <root>
                    <parent label="File">
                        <node label="a) File" />
                        <node label="b) File" />
                        <node label="c) File" />
                        <node label="d) File" />
                        <node label="e) File" />
                    </parent>
                    <parent label="Edit">
                        <node label="a) Edit" />
                        <node label="b) Edit" />
                    </parent>
                    <parent label="View">
                        <parent label="a) View" />
                        <parent label="b) View" />
                        <parent label="c) View" />
                    </parent>
                    <parent label="Favorites">
                        <parent label="a) Favorites" />
                    </parent>
                    <parent label="Tools">
                        <node label="a) Tools" />
                        <node label="b) Tools" />
                        <node label="c) Tools" />
                    </parent>
                    <parent label="Help">
                        <node label="a) Help" />
                        <node label="b) Help" />
                        <node label="c) Help" />
                        <node label="d) Help" />
                    </parent>
                </root>
            </fx:XML>
        </mx:dataProvider>
    </mx:MenuBar>
 
</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/22/setting-the-base-color-on-a-halo-menubar-control-in-flex-4/feed/ 1 Creating an animated base color effect on a Spark Button control in Flex 4 http://blog.flexexamples.com/2009/08/16/creating-an-animated-base-color-effect-on-a-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2009/08/16/creating-an-animated-base-color-effect-on-a-spark-button-control-in-flex-4/#comments Sun, 16 Aug 2009 14:52:01 +0000 Peter deHaan http://blog.flexexamples.com/?p=1628 The following example shows how you can create an animating background effect on a Spark Button control in Flex 4 by using the AnimateColor effect on the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/16/creating-an-animated-base-color-effect-on-a-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_AnimateColor_baseColor_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:Declarations> <s:AnimateColor id="animatr" target="{btn}" colorFrom="haloSilver" colorTo="haloBlue" colorPropertyName="baseColor" duration="400" [...]]]> The following example shows how you can create an animating background effect on a Spark Button control in Flex 4 by using the AnimateColor effect on the baseColor 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/16/creating-an-animated-base-color-effect-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_AnimateColor_baseColor_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:Declarations>
        <s:AnimateColor id="animatr"
                target="{btn}"
                colorFrom="haloSilver"
                colorTo="haloBlue"
                colorPropertyName="baseColor"
                duration="400"
                repeatCount="0" 
                repeatBehavior="reverse" />
    </fx:Declarations>
 
    <s:Button id="btn"
            label="Spark Button"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="animatr.play();"/>
 
</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/08/16/creating-an-animated-base-color-effect-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_AnimateColor_baseColor_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 spark.effects.animation.RepeatBehavior;
            import spark.effects.AnimateColor;
            import spark.components.Button;
 
            private var btn:Button;
            private var animatr:AnimateColor;
 
            private function init():void {
                btn = new Button();
                btn.label = "Spark Button";
                btn.horizontalCenter = 0;
                btn.verticalCenter = 0;
                addElement(btn);
 
                animatr = new AnimateColor();
                animatr.target = btn;
                animatr.colorFrom = StyleManager.getColorName("haloSilver");
                animatr.colorTo = StyleManager.getColorName("haloBlue");
                animatr.colorPropertyName = "baseColor";
                animatr.duration = 400;
                animatr.repeatCount = 0;
                animatr.repeatBehavior = RepeatBehavior.REVERSE;
                animatr.play();
            }
        ]]>
    </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/08/16/creating-an-animated-base-color-effect-on-a-spark-button-control-in-flex-4/feed/ 1 Setting the base theme color on a Halo Accordion container in Flex 4 http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/#comments Wed, 12 Aug 2009 13:57:26 +0000 Peter deHaan http://blog.flexexamples.com/?p=1576 The following example shows how you can set the base theme color on a Halo Accordion container in Flex 4 by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ --> <s:Application name="Halo_Accordion_baseColor_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|VBox { paddingLeft: 10; [...]]]> The following example shows how you can set the base theme color on a Halo Accordion container in Flex 4 by setting the baseColor 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/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            baseColor="{colorPicker.selectedColor}"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.


You can also set the baseColor 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/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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|Accordion {
            baseColor: haloBlue;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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 {
                accordion.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Since the baseColor style inherits, you can see in the previous examples that not only is the Halo Accordion container itself changing base colors, but also the child components.

The following example shows how you can only set the Accordion header base color by setting the headerStyleName and baseColor styles:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
 
        .headerStylez {
        }
 
        mx|Accordion {
            headerStyleName: headerStylez;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                var stylez:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".headerStylez");
                stylez.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script> 
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

You can also set the baseColor 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/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
 
        .headerStylez {
            baseColor: haloBlue;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="headerStylez" 
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or, you can set both the headerStyleName and baseColor styles 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/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
 
        .headerStylez {
            baseColor: haloBlue;
        }
 
        mx|Accordion {
            headerStyleName: headerStylez;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </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/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/feed/ 3 Applying styles to different states on a Spark Button control in Flex 4 http://blog.flexexamples.com/2009/08/10/applying-styles-to-different-states-on-a-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2009/08/10/applying-styles-to-different-states-on-a-spark-button-control-in-flex-4/#comments Tue, 11 Aug 2009 06:59:29 +0000 Peter deHaan http://blog.flexexamples.com/?p=1597 The following example shows you how you can use the advanced CSS features in Flex 4 to apply different state-specific styles to a Spark Button control using CSS.

For more information on using advanced CSS, see the “CSS Advanced Selectors” specification on the Adobe Flex Open Source site.

Full code after the jump.

[...]]]> The following example shows you how you can use the advanced CSS features in Flex 4 to apply different state-specific styles to a Spark Button control using CSS.

For more information on using advanced CSS, see the “CSS Advanced Selectors” specification on the Adobe Flex Open Source site.

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/10/applying-styles-to-different-states-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_CSS_states_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|Button {
            baseColor: haloBlue;
            color: white;
        }
 
        s|Button:down,
        s|Button:over {
            baseColor: haloGreen;
            color: black;
        }
 
        s|Button:disabled {
            baseColor: haloSilver;
            color: red;
        }
    </fx:Style>
 
    <s:CheckBox id="checkBox"
            label="enabled"
            selected="true"
            left="10" top="10" />
 
    <s:Button id="btn"
            label="Spark Button"
            enabled="{checkBox.selected}"
            buttonMode="true"
            horizontalCenter="0" verticalCenter="0" />
 
</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/10/applying-styles-to-different-states-on-a-spark-button-control-in-flex-4/feed/ 2 Setting the base theme color on the Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2009/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/#comments Wed, 24 Jun 2009 06:59:29 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/ The following example shows how you can set the base theme color on a Spark DropDownList control in Flex 4 by setting the baseColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_baseColor_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark"> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="baseColor:"> <mx:ColorPicker id="colorPicker" [...]]]> The following example shows how you can set the base theme color on a Spark DropDownList control in Flex 4 by setting the baseColor 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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark">

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

    <s:DropDownList id="dropDownList"
            baseColor="{colorPicker.selectedColor}"
            requireSelection="true"
            horizontalCenter="0"
            top="50">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>(1) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(2) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(3) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(4) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(5) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(6) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(7) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(8) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(9) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>

</s:Application>

You can also set the baseColor 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/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|DropDownList {
            baseColor: red;
        }
    </fx:Style>

    <s:DropDownList id="dropDownList"
            requireSelection="true"
            horizontalCenter="0"
            top="50">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>(1) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(2) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(3) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(4) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(5) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(6) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(7) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(8) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(9) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>

</s:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

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

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

    <s:DropDownList id="dropDownList"
            requireSelection="true"
            horizontalCenter="0"
            top="50">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>(1) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(2) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(3) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(4) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(5) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(6) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(7) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(8) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
                <fx:String>(9) The Quick Brown Fox Jumps Over the Lazy Dog</fx:String>
            </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/06/23/setting-the-base-theme-color-on-the-spark-dropdownlist-control-in-flex-4/feed/ 1 Setting the base color on the full screen button on a Spark VideoPlayer control in Flex 4 http://blog.flexexamples.com/2009/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/#comments Sun, 10 May 2009 06:59:56 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ The following example shows you how you can set the base color on a Spark VideoPlayer control full screen button in Flex 4 by setting the baseColor style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ --> <s:Application name="Spark_VideoPlayer_fullScreenButton_baseColor_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 { videoPlayer.fullScreenButton.setStyle("baseColor", evt.color); } ]]> </fx:Script> <mx:ApplicationControlBar cornerRadius="0" [...]]]> The following example shows you how you can set the base color on a Spark VideoPlayer control full screen button in Flex 4 by setting the baseColor 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/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_fullScreenButton_baseColor_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 {
                videoPlayer.fullScreenButton.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar cornerRadius="0" width="100%">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        left="20"
                        top="20"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

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

</s:Application>

View source is enabled in the following example.

You can also set the baseColor style using 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/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_fullScreenButton_baseColor_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|VideoPlayer #fullScreenButton {
            baseColor: haloGreen;
        }
    </fx:Style>

    <s:VideoPlayer id="videoPlayer"
            source="http://helpexamples.com/flash/video/cuepoints.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/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/feed/ 3 Setting the base color on the Spark VideoPlayer playhead thumb in Flex 4 http://blog.flexexamples.com/2009/05/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/#comments Thu, 07 May 2009 04:22:37 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/ The following example shows how you can set the base color on the Spark VideoPlayer thumb in Flex 4 by setting the baseColor style using CSS.

<?xml version='1.0' encoding='UTF-8'?> <!-- http://blog.flexexamples.com/2009/05/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/ --> <s:Application name="Spark_VideoPlayer_thumb_baseColor_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|VideoPlayer #thumb { baseColor: red; } </fx:Style> <s:VideoPlayer id="videoPlayer" source="http://helpexamples.com/flash/video/water.flv" autoRewind="true" muted="true" horizontalCenter="0" verticalCenter="0" [...]]]> The following example shows how you can set the base color on the Spark VideoPlayer thumb in Flex 4 by setting the baseColor style using CSS.

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/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_thumb_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|VideoPlayer #thumb {
            baseColor: red;
        }
    </fx:Style>

    <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.

You can also set the Spark VideoPlayer control’s thumb baseColor style using ActionScript, as seen in the following example:

<?xml version='1.0' encoding='UTF-8'?>
<!-- http://blog.flexexamples.com/2009/05/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_thumb_baseColor_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 {
                 videoPlayer.scrubBar.thumb.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:ColorPicker id="colorPicker"
                selectedColor="white"
                change="colorPicker_change(event);" />
        <s:VideoPlayer id="videoPlayer"
                source="http://helpexamples.com/flash/video/water.flv"
                autoRewind="true"
                muted="true"
                horizontalCenter="0"
                verticalCenter="0" />
    </s:VGroup>

</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/06/setting-the-base-color-on-the-spark-videoplayer-playhead-thumb-in-flex-gumbo/feed/ 2 Setting the base theme color on a Spark VideoPlayer control in Flex 4 http://blog.flexexamples.com/2009/05/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/#comments Tue, 05 May 2009 06:59:27 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/ The following example shows how you can set the theme color on the Spark VideoPlayer control in Flex 4 by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/ --> <s:Application name="Spark_VideoPlayer_baseColor_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"> <s:VGroup horizontalCenter="0" verticalCenter="0"> <mx:ColorPicker id="colorPicker" selectedColor="red" /> <s:VideoPlayer id="videoPlayer" source="http://helpexamples.com/flash/video/water.flv" baseColor="{colorPicker.selectedColor}" /> </s:VGroup> </s:Application> [...]]]> The following example shows how you can set the theme color on the Spark VideoPlayer control in Flex 4 by setting the baseColor 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/05/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_baseColor_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">

    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:ColorPicker id="colorPicker" selectedColor="red" />
        <s:VideoPlayer id="videoPlayer"
                source="http://helpexamples.com/flash/video/water.flv"
                baseColor="{colorPicker.selectedColor}" />
    </s:VGroup>

</s:Application>

View source is enabled in the following example.

You can also set the baseColor 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/05/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_baseColor_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|VideoPlayer {
            baseColor: haloBlue;
        }
    </fx:Style>

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

</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/04/setting-the-base-theme-color-on-a-spark-videoplayer-control-in-flex-gumbo/feed/ 0 Setting the base color on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/04/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/#comments Sat, 18 Apr 2009 06:59:57 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ The following example shows how you can set the base color on a Spark DropDownList control in Flex 4 by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_baseColor_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="baseColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" /> </mx:FormItem> </mx:Form> [...]]]> The following example shows how you can set the base color on a Spark DropDownList control in Flex 4 by setting the baseColor 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/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_baseColor_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="baseColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:DropDownList id="dropDownList"
            prompt="Please select a thing..."
            labelField="label"
            baseColor="{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 baseColor style using 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/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="DropDownList_baseColor_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 {
            baseColor: haloBlue;
        }
    </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 baseColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="DropDownList_baseColor_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 btn_click(evt:Event):void {
                dropDownList.setStyle("baseColor", "haloBlue");
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Set baseColor"
            click="btn_click(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/17/setting-the-base-color-on-a-spark-dropdownlist-control-in-flex-gumbo/feed/ 0 Setting the base color on a Spark CheckBox control in Flex 4 http://blog.flexexamples.com/2009/03/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/#comments Tue, 31 Mar 2009 06:35:58 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/ In a previous example, “Setting the icon color on a Spark CheckBox control in Flex 4″, we saw how you can set the icon (check mark) color on a Spark CheckBox control in Flex 4 by setting the symbolColor style.

The following example shows how you can set the base (background) color on a [...]]]> In a previous example, “Setting the icon color on a Spark CheckBox control in Flex 4″, we saw how you can set the icon (check mark) color on a Spark CheckBox control in Flex 4 by setting the symbolColor style.

The following example shows how you can set the base (background) color on a Spark CheckBox control in Flex 4 by setting the baseColor 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/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/ -->
<s:Application name="Spark_CheckBox_baseColor_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">

    <s:CheckBox id="checkBox"
            label="Spark CheckBox"
            selected="true"
            baseColor="black"
            symbolColor="red"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

View source is enabled in the following example.

You can also set the baseColor 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/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/ -->
<s:Application name="Spark_CheckBox_baseColor_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";

        s|CheckBox {
            baseColor: black;
            symbolColor: red;
        }
    </fx:Style>

    <s:CheckBox id="checkBox"
            label="Spark CheckBox"
            selected="true"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/ -->
<s:Application name="Spark_CheckBox_baseColor_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 btn_click(evt:Event):void {
                checkBox.setStyle("baseColor", "black");
                checkBox.setStyle("symbolColor", "red");
            }
        ]]>
    </fx:Script>

    <s:Button id="btn"
            label="Set base color"
            click="btn_click(event);"
            x="10"
            y="10" />

    <s:CheckBox id="checkBox"
            label="Spark CheckBox"
            selected="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/03/30/setting-the-base-color-on-an-fxcheckbox-control-in-flex-gumbo/feed/ 1