Adobe Flex 4.5 Spark: liaison du composant ItemRenderer au parent

Question

Dans Flex 3, il était auparavant possible de lier une propriété de composant dans un itemRenderer via outerDocument. Ainsi, par exemple, s'il y avait une image à l'intérieur d'un itemRenderer qui n'a été affiché sur une condition donnée du parent, quelque chose comme cela fonctionne parfaitement:

<mx:itemRenderer> 
<mx:Component> 
    <mx:Label text="{data}"/> 
    <mx:Image id="img" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/> 
</mx:Component> 
</mx:itemRenderer> 

où le document externe (pas la liste, mais le MXML la liste est) contenu quelque chose comme

[Bindable] 
public function get ShowImage():void 
{ 
return showImage; 
} 
public function set ShowImage(val:Boolean):void 
{ 
showImage = val; 
} 

J'ai essayé de faire la même chose dans Flex 4.5 en utilisant renderers élément Spark en utilisant parentDocument, mais il ne semble pas être au courant de la liaison. Lorsque je fais cela dans Flex 4.5, le itemRenderer ne semble pas savoir quand le parentDocument ShowImage change.

Quelqu'un at-il vu ce problème et est en mesure d'offrir une solution?

EDIT: Ajouter Spark Source Comme l'a demandé ici est ma source d'allumage:

MyItemRenderer.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx"> 
<s:Label id="myLabel" text="{data}/> 
<s:Image src="something.png" visible="{parentDocument.ShowImage}" includeInLayout="{parentDocument.ShowImage}"/> 
</s:ItemRenderer> 

RendererContainer.mxml

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Script> 
<![CDATA[ 

private var showImage:Boolean = false; 

[Bindable] 
public function set ShowImage(val:Boolean):void 
{ 
    showImage = val; 
} 
public function get ShowImage():Boolean 
{ 
    return showImage; 
} 
]]> 
    </fx:Script> 
    <!-- Content Group --> 
    <s:List id="lstCell" width="100%" height="100%" itemRenderer="MyItemRenderer">  
    </s:List> 
</s:Panel> 

Ok, donc il y a une case à cocher dans un wrapper en dehors de RendererContainer.mxml qui distribue un événement personnalisé qui est géré en modifiant un Boolean Bindable. La modification de var modifie alors la propriété ShowImage sur mon composant RendererContainer. Je m'attendrais à ce que MyItemRenderer récupère la liaison, mais cela ne semble pas fonctionner.

Donc, mon enveloppe extérieure accéderait ShowImage comme celui-ci

<comp:RendererContainer id="myId" ShowImage="{myCheckbox.selected}"/> 

Answer 1

Votre getter semble avoir le type de retour comme vide. Un changement qui Boolean

[Bindable] 
public function get ShowImage():Boolean 
{ 
return showImage; 
} 
public function set ShowImage(val:Boolean):void 
{ 
showImage = val; 
} 

Answer 2

Je pense que cela devrait faire l'affaire pour vous, YourTypeHere serait la classe de l'objet contenant , assurez-vous que la propriété ShowImage est public et peut être liée.

<mx:itemRenderer> 
    <mx:Component> 
    <mx:Script> 
     <![CDATA[ 
      import YourTypeHere; 
     ]]> 
    </mx:Script> 
     <mx:Label text="{data}"/> 
     <mx:Image id="img" 
     visible="{YourTypeHere(this.parent.ShowImage)}" 
     includeInLayout="{YourTypeHere(this.parent.ShowImage)}"/> 
    </mx:Component> 
</mx:itemRenderer> 

P.s. s'il vous plaît ne pas nommer les propriétés avec une lettre majuscule de départ, y compris les getters, envisager de le nommer showImage et votre var privé à quelque chose comme _showImage à la place: D

Answer 3

Cela aidera.

<s:Image src="something.png" visible="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}" includeInLayout="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}"/> 

Answer 4

Après fonctionne parfaitement bien:

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"> 
    <s:layout> 
     <s:VerticalLayout/> 
    </s:layout> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
     ]]> 
    </fx:Script> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"> 
     <s:layout> 
      <s:VerticalLayout/> 
     </s:layout> 
     <fx:Script> 
      <![CDATA[ 

       private var showImage:Boolean = false; 

       [Bindable] 
       public function set ShowImage(val:Boolean):void 
       { 
        showImage = val; 
       } 
       public function get ShowImage():Boolean 
       { 
        return showImage; 
       } 
      ]]> 
     </fx:Script> 
     <s:CheckBox label="Select" change="{ShowImage = !ShowImage}"/> 
     <!-- Content Group --> 
     <s:List id="lstCell" width="100%" height="100%" dataProvider="{new ArrayCollection(['A','B'])}"> 
      <s:itemRenderer> 
       <fx:Component> 
        <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true"> 
         <s:layout> 
          <s:HorizontalLayout/> 
         </s:layout> 
         <s:Label id="myLabel" text="{data}"/> 
         <s:Button label="something.png" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/> 
        </s:ItemRenderer> 
       </fx:Component> 
      </s:itemRenderer> 
     </s:List> 
    </s:Panel> 

</s:WindowedApplication>