views:

697

answers:

4

Hi community!

I have an ArrayCollection of objects. I'm passing this array to a horizontallist as a dataprovider and I'm using a custom itemRenderer.

When executing the application, the horizontallist is displaying

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

I've tried casting each object in the itemrenderer as following:

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

But it's not working...

Thanks for any help you can provide. Regards,

BS_C3


Edit - 09 March 2010

Let's go for some more code =)

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

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

FYI, the horizonalList dataprovider is an ArrayCollection of objects.

Now, the horizontallist is displaying empty items... with the correct width... The arraycollection is not empty (I'm using an alert on the click event on an item, and I do retrieve the expected data).

Hope this will help >_<

Regards, BS_C3

A: 

Have you tried

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

? (label1 being a property of your objects)

thelost
Hi!Yes, that was the first thing I did and it did not work. What I get is something like [object Object] [object Object] [object Object] ... Given that it didn't work, I used a casted "data" as an object of type "custom class". But it did not work either... -_-'
BS_C3
Interesting, then please make sure your data type is "printable".
thelost
Hi! what do you mean by "printable"?
BS_C3
A: 

Use the labelField field within your list, see here

<mx:List dataProvider="{myDataProvider}" labelField="label1"/>
Patrick
Hi!Thanks for your answer but your solution does not fit my problem... The item renderer that I've created has a lot of controls and I have the same issue with all the controls... (other labels, images, etc...)Any other ideas?
BS_C3
Without seeing more code for you design, no more idea ;)
Patrick
A: 

Try declaring your custom class as a variable somewhere in your component. Once you declare an instance of the class, Flex might have more success identifying the properties of the class.

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

thelost had it right with his code too. You should be able to use

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

to access your class's properties in your itemRenderer.

Edit: I'm sure you've done this, but also double check that you've set the dataProvider in your HorizontalList to a [Bindable] declaration of your CustomClass.

Jason Towne
A: 

Hi!

I managed to resolve my issue.

When I removed the width property of the itemrenderer's vbox, all data appeared in the horizontalList. Why? I wouldn't know why but it seems like it was positionning the data somewhere out of the visible scope of the horizontallist (huh??).

The thing is that everything is working now. And for the final code, there you have:

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>

Regards, BS_C3

BS_C3