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

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

2 голосов
/ 02 марта 2011

Я использовал свойство ' 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>

У меня есть3 цвета в классе кожи.Я хочу использовать этот цвет на основе значения progressBar.Не могли бы вы помочь в том же, как отображать разные цвета с помощью одного и того же скина в Progressbar.

Ответы [ 3 ]

1 голос
/ 22 апреля 2011

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

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>

и необходимо добавить класс скина в приложение.

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

Этот пример будет работать.

0 голосов
/ 18 ноября 2011

В дизайне Spark 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

0 голосов
/ 02 марта 2011

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

...