Flex-Typed ArrayCollection en tant que dataProvider de Horizontallist

Question

J'ai une ArrayCollection d'objets. Je passe ce tableau à un horizontalallist en tant que fournisseur de données et j'utilise un itemRenderer personnalisé.

Lors de l'exécution de l'application, le HorizontalList affiche

[object CustomClass][object CustomClass][object CustomClass][object CustomClass] 

J'ai essayé casting chaque objet dans le itemRenderer comme suit:

<mx:Label text="{(data as CustomClass).label1}"/> 

Mais cela ne fonctionne pas ...

Merci pour toute aide que vous pouvez fournir. Cordialement,

BS_C3

---

Modifier - 09 Mars 2010

allons-y pour un peu plus de code =)

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:Component id="Item"> 
     <mx:VBox width="180"> 
      <mx:HBox width="100%"> 
       <mx:Spacer width="100%"/> 
       <mx:Button label="x"/> 
      </mx:HBox> 
      <mx:Image id="thumbnail"/> 
      <mx:Label width="100%" horizontalCenter="0" text="Collection"/> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="GIA"/> 
       <mx:Label text="{data.charg_st}"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Finger Size"/> 
       <mx:Label text="xxxxxx"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Carat"/> 
       <mx:Label text="{data.carats}"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Color"/> 
       <mx:Label text="{data.color}"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Clarity"/> 
       <mx:Label text="{data.clarity}"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Shop"/> 
       <mx:Label text="{data.lgort_fp}"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Resizing"/> 
       <mx:Label text="{data.resizing}"/> 
      </mx:HBox> 
      <mx:HBox width="100%"> 
       <mx:Label width="100" text="Price Excl. VAT"/> 
       <mx:Label text="{data.net_price_fp}"/> 
      </mx:HBox> 
     </mx:VBox> 
    </mx:Component> 


    <mx:HorizontalList 
     dataProvider="{GlobalData.instance.tray}" 
     columnCount="4" 
     rowCount="1" 
     horizontalScrollPolicy="off" 
     itemRenderer="{Item}" 
    /> 
</mx:Canvas> 

Pour votre information, le dataprovider horizonalList est un ArrayCollection d'objets.

Maintenant, l'horizontallist affiche des éléments vides ... avec la largeur correcte ... La collection de tableaux n'est pas vide (j'utilise une alerte sur l'événement click sur un élément, et je récupère les données attendues).

Espérons que cela aidera> _ <

Cordialement, BS_C3

Answer 1

J'ai réussi à résoudre mon problème.

Lorsque j'ai supprimé la propriété width de la vbox de l'itemrenderer, toutes les données apparaissaient dans horizontalList. Pourquoi? Je ne saurais pas pourquoi mais il semble que ce soit en positionnant les données quelque part hors de la portée visible de l'horizontalliste (hein?).

La chose est que tout fonctionne maintenant. Et pour le code final, il vous:

HorizontalList:

<mx:HorizontalList id="hlist" 
    dataProvider="{TrayData.instance.itemsCollection}" 
    columnCount="{TrayData.instance.hlistColumns}" 
    rowCount="1" 
    itemRenderer="components.TrayItem" 
    horizontalScrollPolicy="off" 
    horizontalCenter="0" verticalCenter="0" 
    borderStyle="none" 
    horizontalScrollPosition="{TrayData.instance.hsPosition}" 
    /> 

ItemRenderer:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" > 

    <mx:HBox width="100%"> 
     <mx:Spacer width="100%"/> 
     <mx:Button label="x"/> 
    </mx:HBox> 
    <mx:HBox width="100%"> 
     <mx:Spacer width="15%"/> 
     <mx:VBox width="70%"> 
      <mx:Image id="thumbnail" horizontalAlign="center"/> 
      <mx:Label width="100%" textAlign="center" text="Collection"/> 
      <mx:HBox width="100%"> 
       <mx:VBox id="labelBox" width="100"> 
        <mx:Label width="100" text="GIA"/> 
        <mx:Label width="100" text="Finger Size"/> 
        <mx:Label width="100" text="Carat"/> 
        <mx:Label width="100" text="Color"/> 
        <mx:Label width="100" text="Clarity"/> 
        <mx:Label width="100" text="Shop"/> 
        <mx:Label width="100" text="Resizing"/> 
        <mx:Label width="100" text="Price"/> 
       </mx:VBox> 
       <mx:VBox id="dataBox" width="100%" horizontalAlign="left"> 
        <mx:Label text="{data.resizingCode + ' ' + data.charg_st}"/> 
        <mx:Label text="{data.fingerSize}"/> 
        <mx:Label text="{((new Number(data.carats))/100).toString()}"/> 
        <mx:Label text="{data.color}"/> 
        <mx:Label text="{data.clarity}"/> 
        <mx:Label text="{data.lgort_fp}"/> 
        <mx:Label text="{data.net_price_fp}"/> 
       </mx:VBox> 
      </mx:HBox> 
      <mx:Button label="Order" enabled="{data.product_type == 'C'}" width="50%"/> 
     </mx:VBox> 
     <mx:Spacer width="15%"/> 
    </mx:HBox> 

</mx:VBox> 

Cordialement, BS_C3

Answer 2

Avez-vous essayé

<mx:Label text="{data.label1}"/> 

? (label1 étant une propriété de vos objets)

Answer 3

Utilisez le champ labelField au sein de votre liste, consultez here

<mx:List dataProvider="{myDataProvider}" labelField="label1"/> 

Answer 4

Essayez de déclarer votre classe personnalisée comme une variable quelque part dans votre composant. Une fois que vous avez déclaré une instance de la classe, Flex peut avoir plus de succès pour identifier les propriétés de la classe.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
    <![CDATA[ 
     private var myClass:CustomClass; 
    ]]> 
    </mx:Script> 
    <mx:Component id="Item"> 
     <mx:VBox width="180"> 
     ... 

thelost avait droit avec son code aussi. Vous devriez pouvoir utiliser

<mx:Label text="{data.label1}"/> 

pour accéder aux propriétés de votre classe dans votre itemRenderer.

Edit: Je suis sûr que vous avez fait cela, mais aussi vérifiez que vous avez défini le dataProvider dans votre HorizontalList une déclaration [Bindable] de votre CustomClass.