Question

I’m probably misusing bindable variables here, so please bear with me here while I try and explain what I’m trying to to.

I have a simple spark list where I allow people to select a background by clicking on one of the items. When a background is selected, I then save it to the SharedObject in order to use it when the user loads the application again later.

This list is populated by an ArrayCollection (binded variable) created as follows:

[Bindable] private var arrBG:ArrayCollection = new ArrayCollection();

This then gets populated the following way:

var objImage:Object;
var strSharedObjImage:String = sharedObj.sharedBackground.data.backgroundIndex;
// Background
objImage = new Object();
objImage.icon = ICONS_PATH + objImage.label;
objImage.label = "Titanium";
objImage.selected = (strSharedObjImage == objImage.fileName) ? true : false;
arrBG.addItem(objImage);

objImage = new Object();
objImage.icon = ICONS_PATH + objImage.fileName;
objImage.label = "Iron";
objImage.selected = (strSharedObjImage == objImage.label) ? true : false;
arrBG.addItem(objImage);

I then use it as the dataProvider on my spark list.

If you notice above, on my object I have a property called selected, which will get set to true, if the value of my shared object is the same as the value on the “label” property.

On the item renderer for my spark list, I have the following:

<s:ItemRenderer name="HorizontalListSkin"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                autoDrawBackground="false" 
                creationComplete="initMenuSkin(event)"
                >

    <fx:Script>
        <![CDATA[
        protected function initMenuSkin(event:Event):void
        {

            iconImage.source = data.icon;
            iconText.text = data.label;

            // Check to see if the item we're displying is selected. If it is make it stand out
            if(data.selected){
                iconText.setStyle("color", "Green")
            }
        }

        ]]>
    </fx:Script>

    <s:VGroup x="10" y="10" width="50" height="50" buttonMode="true" horizontalAlign="center">
        <s:Image id="iconImage" horizontalCenter="0"/>
        <s:Label id="iconText" fontFamily="Verdana" fontSize="11" fontWeight="bold" horizontalCenter="0" showTruncationTip="false"/>
    </s:VGroup> 

</s:ItemRenderer>

So as you can see, I’m simply changing the colour of the font on my selected item.

When I load it up, I can see that the item I have previously selected is marked in green, and if I select a new item, I would like it to now be marked as green instead.

Obviously there’s a big gap in here, since nowhere in my explanation above I mention updating my bindable variable so in theory it wold propagate to my spark list (being it a bindable variable I would of thought it would simultaneously update the item on my list(?)).

Well, I have tried doing it in a few different ways, and the debugger does “say” my array has been updated, however, my list isn’t being updated at all, and will only bring another item marked in green if I close the screen and open again (when it all gets reloaded)

The whole logic described above to create a new background is contained within a function, so whenever I select an item from my list of backgrounds I was triggering my “loadBackgrounds” method again, which would apply all the logic to know which is the selected background, and because the variable is binded with my spark list I’d have hoped would update the list. Thing is, it doesn’t.

What am I doing wrong here? Am I going totally bonkers and there’s a much easier way of doing this but only I can’t see it?

Any help here would be appreciated.

Thanks in advance

Answer 1

After you set the data ion the collection you need to refresh it.

arrBG.refresh();

[EDIT]
Ok I re-read your question.
I think I misunderstood what you were asking.
You want to know how to update the list so the item renderer will re-render the new list after you made changes to the data provider?

function newSelection( val:String ):void{
  for each( var item:Object in arrBG ){
    if( item.label == val ){
      item.selected = true;
    }else{
      item.selected = false;
    }
  }
  arrBG.refresh();
}

// use the commit properties on your renderer not the init
// commit properties will trigger whenever there is a dataprovider update/change

<s:ItemRenderer name="HorizontalListSkin"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                autoDrawBackground="false" 
                >

    <fx:Script>
        <![CDATA[
        override protected function commitProperties():void{
            super.commitProperties();
            iconImage.source = data.icon;
            iconText.text = data.label;

            // Check to see if the item we're displying is selected. If it is make it stand out
            if(data.selected){
                iconText.setStyle("color", "Green")
            }
        }

        ]]>
    </fx:Script>

    <s:VGroup x="10" y="10" width="50" height="50" buttonMode="true" horizontalAlign="center">
        <s:Image id="iconImage" horizontalCenter="0"/>
        <s:Label id="iconText" fontFamily="Verdana" fontSize="11" fontWeight="bold" horizontalCenter="0" showTruncationTip="false"/>
    </s:VGroup> 

</s:ItemRenderer>