Setting the bar color on the ProgressBar control in Flex

by Peter deHaan on February 1, 2009

in ProgressBar

The following example shows how you can set the bar color on a Flex ProgressBar control by setting the barColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/01/setting-the-bar-color-on-the-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="barColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="red" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            barColor="{colorPicker.selectedColor}"
            labelPlacement="center"
            height="100" />

</mx:Application>

You can also set the barColor 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/02/01/setting-the-bar-color-on-the-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ProgressBar {
            barColor: red;
        }
    </mx:Style>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            labelPlacement="center"
            height="100" />

</mx:Application>

If you’re setting the barColor style using CSS, you can also use the following syntax:

<mx:Style>
    ProgressBar {
        barColor: #FF0000;
    }
</mx:Style>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/01/setting-the-bar-color-on-the-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function colorPicker_change(evt:ColorPickerEvent):void {
                progressBar.setStyle("barColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="barColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="red"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            labelPlacement="center"
            height="100" />

</mx:Application>

When setting the barColor style using ActionScript, you can also use the following syntaxes:

<mx:Script>
    <![CDATA[
        private function change():void {
            progressBar.setStyle("barColor", 0xFF0000);
        }
    ]]>
</mx:Script>
<mx:Script>
    <![CDATA[
        private function change():void {
            progressBar.setStyle("barColor", "#FF0000");
        }
    ]]>
</mx:Script>

{ 3 comments… read them below or add one }

1 Berkowitz February 2, 2009 at 12:55 pm

Excuse me for putting this question here, but search on various forums for some time and I can not find the solution to my problem with the AdvancedDataGrid. Can you help me please?
Must make a function that lists the label of the groups of my ADG.
See the description of my problem: http://groups.google.com/group/flex_india/browse_thread/thread/ee76280629733273/d506c3b55beee1a6?lnk=gst&q=berkowitz#d506c3b55beee1a6

Thanks!

Reply

2 Peter deHaan February 4, 2009 at 6:49 pm

Berkowitz,

Sorry, I haven’t used the AdvancedDataGrid control yet. Try asking on the FlexCoders mailing list.

Peter

Reply

3 GreatStalin April 15, 2009 at 12:10 am

When setting the bar colour of an indertimate progress bar, the resulting colour seems way off – for example, if you set the barColor to be #FF0000, it turns out as a pinkish colour. Thought that might be a good thing to mention in this article (maybe even how one can ’solve’ this functionality!)!

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: