Displaying List of flex progressbar using itemrenderer

Question

Hi all,

I want to create a list of progress bars and update the list accordingly. I have group data in an Array as

 <mx:Array id="arr">
        <mx:Object label="Group One" min="0" max="200" currentValue="60" />
        <mx:Object label="Group Two" min="0" max="300" currentValue="50" />
 </mx:Array>

The values in the array object indicate name of group,minimum,maximum and current value for the group (to be used in progressbar).

I used the list with "mx.controls.ProgressBar" as itemRenderer as

<mx:List width="100%" dataProvider="{arr}"
        itemRenderer="mx.controls.ProgressBar"/>

Now what I need is whenever currentValue field of Array "arr" changes i want to update the progressbar "progress" value to currentValue (where min and maximum value of progressbar are stored in Array "arr")

How can i do the same.

Thanks all

Answer 1

I guess your ProgressBars are displaying nothing, because all that is wrong. Item renderer is a class which is getting single item from data provider via function set data(value:Object):void. To get values inside ProgressBar, you can subclass it, add data function (getter and setter) and set properties from there - this class will be item renderer.

Next, itemRenderers aren't guaranteed to be instantiated at all times. List creates them as they needed to be shown, and stores unused in a pool. This means you cannot talk to particular list item - any item from pool could play its role (getting its data). To change progress, you need to update data provider, and set it again.

Answer 2

The trick is to set the mode of progressbar to manual since you are not automatically listening to any progress of a downloaded data. You want to set a value so progress bar could update itself so manual is the way to go. Moreover, check this out :

<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
    <s:HorizontalLayout/>
</s:layout>
<fx:Declarations>
    <s:ArrayCollection id="arr">
        <fx:Object label="Group One" currentValue="20" max="200" min="0"/>
        <fx:Object label="Group Two" currentValue="50" max="300" min="0"/>
    </s:ArrayCollection>
</fx:Declarations>
<fx:Script>
    <![CDATA[
        private function updateArr():void {
            arr.getItemAt(0).currentValue = ns.value;
        }
    ]]>
</fx:Script>
<s:List dataProvider="{arr}"  itemRenderer="ProgressBarWithCurrentValue"/>
<s:NumericStepper id="ns" maximum="200" minimum="0" stepSize="10" value="20" change="updateArr()"/></s:Application>

Here is the itemrenderer code, you'll see the mode as manual :

<s:ItemRenderer autoDrawBackground="true" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
    <![CDATA[
        private function updateCurrentValue():void {
            pb.setProgress(data.currentValue, data.max);
        }
    ]]>
</fx:Script>
<mx:ProgressBar id="pb" maximum="{data.max}" minimum="{data.min}" mode="manual" updateComplete="updateCurrentValue()"/></s:ItemRenderer>

When you simply set itemrenderer to a progressbar, it automatically tries to find a datasource but in your case you'll be feeding and updating yourself. So, you'll need an itemrenderer where you do some operations maybe.

Answer 3

hi all
thanks for the answers..
After googling thr more I found something similar to what i need here
http://www.flex-blog.com/progressbar-in-datagrid-example/

Pretty similar to the 2 answers above.. by @kubarium and by @alxx ..
1. Use an ItemRenderer to show the ProgressBar inside the DataGrid .
2. Create a DataProvider for the DataGrid .
3. Create an action to start the ProgressBar
4. Make sure the ArrayCollection is updated on every progress of the ProgressBar.