Альтернатива свойству barColor в индикаторе выполнения + Flex 4

Я использовал свойство barColor в компоненте ProgressBar для демонстрации производительности с цветом заливки. Теперь я перемещаю приложение на Flex 4. Таким образом, это свойство недоступно в Flex 4. Не могли бы вы рассказать кому-нибудь об альтернативе для свойства barColor. Spark не поддерживает это свойство.

<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}">

И класс ProgressSkin: -

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


progress-bar skin flex4 flex-spark
person RKCY    schedule 02.03.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Сначала нам нужно написать класс индикатора выполнения и расширить класс индикатора выполнения.

ColorChangingProgressBar.as

package
{
    import mx.controls.ProgressBar;

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

}

А затем Напишите класс скина для индикатора выполнения.

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.

person RKCY    schedule 22.04.2011

arrow_upward
0
arrow_downward

Создайте новую тему оформления на основе mx.skins.spark.ProgressBarSkin и измените цвет непосредственно в теме оформления MXML и примените его к компоненту (barSkin = "YourNewSkin")

person Florian F    schedule 02.03.2011
comment
У меня 3 цвета (зеленый, красный, желтый). если приложение работает хорошо, необходимо заливать зеленым цветом, если отображаются некоторые предупреждения, заливка желтым цветом, если производительность плохая, заливка красным цветом. при использовании снятия шкур, возможно ли использование кожи Flex 4 uisng? - person RKCY; 03.03.2011
comment
Класс скинов также не работает с этой проблемой. Может ли кто-нибудь из вас помочь мне в этом. Это очень срочно. - person RKCY; 20.04.2011
comment
бабочки и жучки .wordpress.com / 2011/04/22 / - person Florian F; 23.04.2011

arrow_upward
0
arrow_downward

В дизайне искры ProgressBar Track по умолчанию использует цвет хрома. (определено в ProgressBarTrackSkin) Итак, вы можете просто установить его:

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

Вы также можете создать свой скин для трека.

<mx:ProgressBar trackSkin="myCustomTrackSkin" />

Таким образом, вы можете скопировать исходный скин и внести изменения, если не хотите начинать с нуля. Исходный скин можно найти по адресу:

Путь к вашему SDK / frameworks / projects / sparkskins / src / mx / skins / spark / ProgressBarTrackSkin.mxml

person Dirk Leuther    schedule 18.11.2011