Flex Examples » swatchPanelStyleName http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the text field width for the ColorPicker control in Flex 3 http://blog.flexexamples.com/2008/01/01/changing-the-text-field-width-for-the-colorpicker-control-in-flex-3/ http://blog.flexexamples.com/2008/01/01/changing-the-text-field-width-for-the-colorpicker-control-in-flex-3/#comments Wed, 02 Jan 2008 07:38:04 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/01/changing-the-text-field-width-for-the-colorpicker-control-in-flex-3/ In a previous example, “Changing the preview color width for the ColorPicker control in Flex 3″, we saw how you can change the preview color width for a ColorPicker control.

The following example shows how you can change the text field width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName [...]]]> In a previous example, “Changing the preview color width for the ColorPicker control in Flex 3″, we saw how you can change the preview color width for a ColorPicker control.

The following example shows how you can change the text field width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and textFieldWidth styles in Flex 3.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/changing-the-text-field-width-for-the-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            private function slider_change(evt:SliderEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("textFieldWidth", evt.value);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:Style>
        ColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textFieldWidth:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="172"
                        value="72"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true"
                        dataTipPrecision="0"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker" />

</mx:Application>

View source is enabled in the following example.

If you want to remove the text field completely, you can set the showTextField property to false. For more information, see “Toggling the text field in a Flex ColorPicker control”.

 
]]> http://blog.flexexamples.com/2008/01/01/changing-the-text-field-width-for-the-colorpicker-control-in-flex-3/feed/ 0 Changing the preview color width for the ColorPicker control in Flex 3 http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/ http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/#comments Wed, 02 Jan 2008 06:57:50 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/ The following example shows how you can change the preview color width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and previewWidth styles in Flex 3.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.SliderEvent; [...]]]> The following example shows how you can change the preview color width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and previewWidth styles in Flex 3.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            private function slider_change(evt:SliderEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("previewWidth", evt.value);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:Style>
        ColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="previewWidth:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="145"
                        value="45"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true"
                        dataTipPrecision="0"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker" />

</mx:Application>

View source is enabled in the following example.

You can also set the previewWidth style directly in an external .CSS file or <mx:Style /> block using something similar to the following snippet:

<mx:Style>
    ColorPicker {
        swatchPanelStyleName: myCustomSwatchPanelStyleName;
    }

    .myCustomSwatchPanelStyleName {
        previewWidth: 145;
    }
</mx:Style>
 
]]> http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/feed/ 0 Changing the ColorPicker control’s nested text field styles in Flex 3 http://blog.flexexamples.com/2007/12/30/changing-the-colorpicker-controls-nested-text-field-styles-in-flex-3/ http://blog.flexexamples.com/2007/12/30/changing-the-colorpicker-controls-nested-text-field-styles-in-flex-3/#comments Sun, 30 Dec 2007 16:29:27 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/30/changing-the-colorpicker-controls-nested-text-field-styles-in-flex-3/ The following example shows how you can customize the appearance of the ColorPicker control’s nested text field in Flex 3 by setting the textFieldStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/30/changing-the-colorpicker-controls-nested-text-field-styles-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" creationComplete="init();"> <mx:Style> .myCustomSwatchPanelStyleName { textFieldStyleName: redBold; } .redBold { [...]]]> The following example shows how you can customize the appearance of the ColorPicker control’s nested text field in Flex 3 by setting the textFieldStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/30/changing-the-colorpicker-controls-nested-text-field-styles-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        .myCustomSwatchPanelStyleName {
            textFieldStyleName: redBold;
        }

        .redBold {
            color: red;
            fontFamily: Courier;
            fontWeight: bold;
            letterSpacing: 1;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="editable:">
                <mx:CheckBox id="checkBox"
                        selected="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="default:">
            <mx:ColorPicker editable="{checkBox.selected}" />
        </mx:FormItem>
        <mx:FormItem label="textFieldStyleName:">
            <mx:ColorPicker id="colorPicker"
                    editable="{checkBox.selected}"
                    swatchPanelStyleName="myCustomSwatchPanelStyleName" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/30/changing-the-colorpicker-controls-nested-text-field-styles-in-flex-3/feed/ 1 Changing the swatch grid background color for a ColorPicker control in Flex 3 http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/ http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/#comments Sun, 30 Dec 2007 07:14:14 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/ The following example shows how you can set the swatch grid background color on a Flex 3 ColorPicker control by setting the swatchGridBackgroundColor style. You can also see how you can set the horizontalGap, and verticalGap styles using CSS.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/ --> [...]]]> The following example shows how you can set the swatch grid background color on a Flex 3 ColorPicker control by setting the swatchGridBackgroundColor style. You can also see how you can set the horizontalGap, and verticalGap styles using CSS.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        .myCustomSwatchPanelStyleName {
            /* border */
            swatchBorderColor: white;
            swatchBorderSize: 1;

            /* highlight */
            swatchHighlightColor: black;
            swatchHighlightSize: 2;

            /* gap */
            horizontalGap: 2;
            verticalGap: 2;

            /* background */
            swatchGridBackgroundColor: red;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormItem label="default:">
            <mx:ColorPicker />
        </mx:FormItem>
        <mx:FormItem label="horizontalGap/verticalGap = 2:">
            <mx:ColorPicker id="colorPicker"
                    swatchPanelStyleName="myCustomSwatchPanelStyleName" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/feed/ 0 Changing the swatch highlight size for a ColorPicker control in Flex 3 http://blog.flexexamples.com/2007/12/29/changing-the-swatch-highlight-size-for-a-colorpicker-control-in-flex-3/ http://blog.flexexamples.com/2007/12/29/changing-the-swatch-highlight-size-for-a-colorpicker-control-in-flex-3/#comments Sun, 30 Dec 2007 06:45:12 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/29/changing-the-swatch-highlight-size-for-a-colorpicker-control-in-flex-3/ The following example shows how you can set the swatch highlight size on a Flex 3 ColorPicker control by setting the swatchHighlightSize style. You can also see how you can set the swatchBorderColor, swatchBorderSize, and swatchHighlightColor styles using CSS.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-highlight-size-for-a-colorpicker-control-in-flex-3/ --> [...]]]> The following example shows how you can set the swatch highlight size on a Flex 3 ColorPicker control by setting the swatchHighlightSize style. You can also see how you can set the swatchBorderColor, swatchBorderSize, and swatchHighlightColor styles using CSS.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-highlight-size-for-a-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        ColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
            /* border */
            swatchBorderColor: white;
            swatchBorderSize: 1;
            /* highlight */
            swatchHighlightColor: red;
            swatchHighlightSize: 1;
        }
    </mx:Style>

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

            private var cssObj:CSSStyleDeclaration;

            private function init():void {
                cssObj = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                colorPicker.open();
            }

            private function borderSlider_change(evt:SliderEvent):void {
                cssObj.setStyle("swatchBorderSize", evt.value);
                colorPicker.open();
            }

            private function highlightSlider_change(evt:SliderEvent):void {
                cssObj.setStyle("swatchHighlightSize", evt.value);
                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="swatchBorderSize:">
                <mx:HSlider id="borderSlider"
                        minimum="0"
                        maximum="5"
                        value="1"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="borderSlider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="swatchHighlightSize:">
                <mx:HSlider id="highlightSlider"
                        minimum="0"
                        maximum="5"
                        value="1"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="highlightSlider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/29/changing-the-swatch-highlight-size-for-a-colorpicker-control-in-flex-3/feed/ 0 Changing the swatch border size for a ColorPicker control in Flex 3 http://blog.flexexamples.com/2007/12/29/changing-the-swatch-border-size-for-a-colorpicker-control-in-flex-3/ http://blog.flexexamples.com/2007/12/29/changing-the-swatch-border-size-for-a-colorpicker-control-in-flex-3/#comments Sun, 30 Dec 2007 06:09:09 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/29/changing-the-swatch-border-size-for-a-colorpicker-control-in-flex-3/ The following example shows how you can set the swatch border size on a Flex 3 ColorPicker control by setting the swatchBorderSize style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-border-size-for-a-colorpicker-control-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> ColorPicker { swatchPanelStyleName: myCustomSwatchPanelStyleName; } .myCustomSwatchPanelStyleName { swatchBorderSize: 1; } [...]]]> The following example shows how you can set the swatch border size on a Flex 3 ColorPicker control by setting the swatchBorderSize style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-border-size-for-a-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        ColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
            swatchBorderSize: 1;
        }
    </mx:Style>

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

            private function slider_change(evt:SliderEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("swatchBorderSize", evt.value);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="swatchBorderSize:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="5"
                        value="1"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/29/changing-the-swatch-border-size-for-a-colorpicker-control-in-flex-3/feed/ 0 Changing the Flex ColorPicker control’s swatch panel background color http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/#comments Thu, 27 Dec 2007 18:45:29 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ The following example shows you how you can change the ColorPicker control’s background color in Flex 3 by setting the backgroundColor style using CSS and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> .myColorPicker { swatchPanelStyleName: myCustomSwatchPanelStyleName; } .myCustomSwatchPanelStyleName { [...]]]> The following example shows you how you can change the ColorPicker control’s background color in Flex 3 by setting the backgroundColor style using CSS and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .myColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
            backgroundColor: haloBlue;
        }
    </mx:Style>

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

            private function backgroundColor_change(evt:ColorPickerEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("backgroundColor", evt.color);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker change="backgroundColor_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker"
            styleName="myColorPicker"
            editable="false" />

</mx:Application>

View source is enabled in the following example.

As you can see, the background color uses a gradient from the specified color to a medium gray color (0xC4CCCC). If you want to have a solid colored swatch panel background that doesn’t use a gradient, you can set the highlightColor style to the same value as the backgroundColor style, as shown in the following example (new code in red):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .myColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
            backgroundColor: haloBlue;
            highlightColor: haloBlue;
        }
    </mx:Style>

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

            private function backgroundColor_change(evt:ColorPickerEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("backgroundColor", evt.color);
                cssObj.setStyle("highlightColor", evt.color);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker change="backgroundColor_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker"
            styleName="myColorPicker"
            editable="false" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/feed/ 0 Styling the ColorPicker control in Flex 3 http://blog.flexexamples.com/2007/10/12/styling-the-colorpicker-control-in-flex-3/ http://blog.flexexamples.com/2007/10/12/styling-the-colorpicker-control-in-flex-3/#comments Fri, 12 Oct 2007 19:00:20 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/12/styling-the-colorpicker-control-in-flex-3/ I saw this come up on a list recently, so thought I’d share the answer with my loyal readership. Styling the ColorPicker control changed somewhat between Flex 2.0.1 and Flex 3. Now, instead of applying certain styles directly to the ColorPicker itself, you create a new custom style and assign the swatchPanelStyleName style on the [...]]]> I saw this come up on a list recently, so thought I’d share the answer with my loyal readership. Styling the ColorPicker control changed somewhat between Flex 2.0.1 and Flex 3. Now, instead of applying certain styles directly to the ColorPicker itself, you create a new custom style and assign the swatchPanelStyleName style on the ColorPicker. But enough of my rambling, code is worth 1000 words.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/styling-the-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        horizontalAlign="left"
        backgroundColor="white">

    <mx:Style>
        ColorPicker {
            swatchPanelStyleName: mySwatchPanel;
        }

        .mySwatchPanel {
            backgroundColor: haloSilver;
            columnCount: 40;
            horizontalGap: 1;
            verticalGap: 1;
            previewHeight: 50;
            previewWidth: 200;
            swatchHeight: 8;
            swatchWidth: 12;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/12/styling-the-colorpicker-control-in-flex-3/feed/ 0