Question sur les variables pouvant être lissées dans AS3

Question

Je suis probablement en train de faire un mauvais usage des variables liables ici, alors veuillez m'accompagner ici pendant que j'essaie d'expliquer ce que j'essaie de faire.

J'ai une liste d'étincelles simple où je permets aux gens de sélectionner un arrière-plan en cliquant sur l'un des éléments. Lorsqu'un arrière-plan est sélectionné, je l'enregistre ensuite dans SharedObject afin de l'utiliser lorsque l'utilisateur charge à nouveau l'application ultérieurement.

Cette liste est par une ArrayCollection (Variable binded) créée comme suit:

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

Cela devient alors peuplé de la manière suivante:

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); 

J'utilise alors comme le fournisseur de données sur mon liste des étincelles.

Si vous remarquez ci-dessus, sur mon objet j'ai une propriété appelée selected, qui sera définie sur true, si la valeur de mon objet partagé est la même que la valeur de la propriété "label".

Sur le rendu d'élément pour ma liste d'allumage, je donne les résultats suivants:

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

Comme vous pouvez le voir, je change simplement la couleur de la police sur mon élément sélectionné.

Lorsque je le charge, je peux voir que l'élément que j'ai précédemment sélectionné est marqué en vert, et si je choisis un nouvel élément, je voudrais qu'il soit maintenant marqué comme vert à la place. Évidemment il y a un grand écart ici, puisque nulle part dans mon explication ci-dessus je mentionne mettre à jour ma variable bindable donc en théorie il se propagerait à ma liste d'étincelles (étant une variable liable je penserais que cela mettrait à jour simultanément l'item sur ma liste (?)). Eh bien, j'ai essayé de le faire de différentes manières, et le débogueur "dit" que mon tableau a été mis à jour, mais ma liste n'est pas mise à jour du tout, et n'apportera qu'un autre élément marqué dans vert si je ferme l'écran et réouvre (quand tout est rechargé)

Toute la logique décrite ci-dessus pour créer un nouveau fond est contenue dans une fonction, donc chaque fois que je sélectionne un élément de ma liste d'arrière-plans je déclenchais ma méthode "loadBackgrounds" à nouveau, qui appliquerait toute la logique pour savoir quel est l'arrière-plan sélectionné, et parce que la variable est liée à ma liste d'étincelles que j'aurais espéré mettre à jour la liste. Chose est, ce n'est pas.

Qu'est-ce que je fais mal ici? Est-ce que je vais complètement fous et il y a une façon beaucoup plus facile de le faire mais seulement je ne peux pas le voir?

Toute aide ici serait appréciée.

Merci à l'avance

Answer 1

Après avoir défini les données de la collection ion dont vous avez besoin pour le rafraîchir.

arrBG.refresh(); 

[EDIT]
Ok je relis votre question.
Je pense que j'ai mal compris ce que vous demandiez.
Vous souhaitez savoir comment mettre à jour la liste afin que le rendu d'élément rende la nouvelle liste après avoir apporté des modifications au fournisseur de données?

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(); 
} 

// utiliser les propriétés commettras sur votre moteur de rendu non init
// engager des propriétés déclenchera chaque fois qu'il ya une mise à jour dataprovider/changement

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