Alternative to barColor property in progress bar + Flex 4

Question

I had used a property 'barColor' in ProgressBar component for showing performance with filling colours. Now I am moving the application to Flex 4. So this property is not available in Flex 4. Can you please any one known about the alternative for the barColor property. Spark is not supporting this property.

<mx:ProgressBar xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    width="100%" x="0" y="0" 
                              height="20"
                              label=""
                              labelPlacement="center"     
                              minimum="0"
                              id="iops"
                              maximum="1000"                                  
                              mode="manual"
                  barSkin="{progressSkin}">

And ProgressSkin class:-

<fx:Metadata>
    [HostComponent("progressBarComponent")]
</fx:Metadata>

<fx:Script>
    <![CDATA[
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    ]]>
</fx:Script>

<s:Rect top="0" right="0" left="0" bottom="0"  id="green" includeInLayout="{hostComponent.color==0x94CF65}">        
    <s:fill >
        <s:SolidColor color="0x94CF65" />
    </s:fill>
</s:Rect>

<s:Rect top="0" right="0" left="0" bottom="0"  includeInLayout="{hostComponent.color==0xFFDE53}">       
    <s:fill>
        <s:SolidColor color="0xFFDE53" />
    </s:fill>
</s:Rect>

<s:Rect top="0" right="0" left="0" bottom="0" includeInLayout="{hostComponent.color==0xFF9428}">        
    <s:fill>
        <s:SolidColor color="0xFF9428" />
    </s:fill>
</s:Rect>

I have 3 colors in the skin class. I want to use this color based on the progressBar value. Can you please help on the same, how to display the different color by using same skin in Progressbar.

Answer 1

First we need to write a progressbar class and extend the progress bar class

ColorChangingProgressBar.as

package
{
    import mx.controls.ProgressBar;

    [Style(name="progressBarColor", type="Number", format="Color")]
    public class ColorChangingProgressBar extends ProgressBar
    {
        public function ColorChangingProgressBar()
        {
            super();
        }
    }

}

And next Write a skin class for the progress bar.

ColorChangingProgressBarBarSkin.mxml

<!-- states -->
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

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

        private var _barColor:Number = 0;

        [Bindable]
        public function get barColor():Number
        {
            return _barColor;
        }

        public function set barColor(value:Number):void
        {
            _barColor = value;
        }


        /**
         * Listen for any changes to the style so we can update our progres bar skin if needed
         */
        override public function styleChanged(styleProp:String):void
        {
            super.styleChanged(styleProp);
        }


        /**
         * Initialize the skin by setting up the bar color
         */
        protected function initSkin(event:FlexEvent):void
        {
            barColor = this.getStyle("progressBarColor") as Number;
        }

    ]]>
</fx:Script>

<s:Rect top="0" right="0" left="0" bottom="0">
    <s:fill>
        <s:SolidColor color="{barColor}" />
    </s:fill>
</s:Rect>

and need to add the skin class to the application.

ProgressBarExample.mxml

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

    local|ColorChangingProgressBar
    {
        barSkin: ClassReference("ColorChangingProgressBarBarSkin"); 
    }

</fx:Style>

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


        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            progressBar.setProgress(50, 100);
            progressBar2.setProgress(75, 100);
            progressBar3.setProgress(85, 100);
        }

    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout paddingLeft="10" paddingRight="10" />
</s:layout>

<local:ColorChangingProgressBar id="progressBar" progressBarColor="#ff0000" label="" width="300" mode="manual"  />
<local:ColorChangingProgressBar id="progressBar2" progressBarColor="#00ff00" label="" width="300" mode="manual"  />
<local:ColorChangingProgressBar id="progressBar3" progressBarColor="#0000ff" label="" width="300" mode="manual"  />

This example will work.

Answer 2

Create a new Skin based on mx.skins.spark.ProgressBarSkin and change the color directly in the MXML Skin and affect it to the component (barSkin="YourNewSkin")

Answer 3

In spark design the ProgressBar Track by default uses the chrome color. (defined in ProgressBarTrackSkin) So you just can set it:

<mx:ProgressBar width="200" trackHeight="20" chromeColor="#00FF00" />

You also can create your own skin for the track

<mx:ProgressBar trackSkin="myCustomTrackSkin" />

So you can copy the original skin and implement your changes if you don't want to start from scretch The original skin can be found at:

Path to your SDK/frameworks/projects/sparkskins/src/mx/skins/spark/ProgressBarTrackSkin.mxml