Adobe AIR Development

[bigmokujin]

I know I know...  Cutting it kind of close here.  So any help is very much appreciated.

I am having trouble rendering my last UI element.  I am trying to utilize the following:

qnx.ui.listClasses.TileList

As I have created an array that holds a result set to the end user.  I have tried a number of things to no avail.  Can someone please shed some light on how this might be done.

I have created an array using the following convention:

for (var i:uint = 0; i < endResult; i++){

    myArray.push({id:i + 1, fName:var1, lName:var2, address:var3, city:var4, state:var5});

}

The problem is when I use the following:

var myTileList:TileList = new TileList();            
            myTileList.setPosition(100, 200);
            myTileList.width = 330;
            myTileList.height = 300;
            myTileList.columnCount = 6;
            myTileList.cellPadding = 5;
            myTileList.dataProvider = new DataProvider(myArray);
            
            this.addChild(myTileList);

NOTHING HAPPENS.

Actually I shouldn't say nothing happens, but the only thing I see is a list of BLANK tiles.  Why isn't the individual data elements from the array actually visible?  Please help?

[JRab]

hey,

you need to have at least one label property in your list items. so far you dont have any. whatever is your label value, thats what will show up in the list.

[bigmokujin]

JRab,

Thank you for the reply.  So are you saying it is possible to provide a label for each dimension of my array?  And that label will be used as the header for the data set that is loaded from the array?  Cause it looks like each tile in the list of data would have it's own discrete lable associate with the cell.  Is that right? 

Cause if that is the case, perhaps I am going down the wrong path.  I am simply trying to create something similar to the datagrid component that you can normally find within a FLEX project.  I have rows of data that I am trying to present in a viewable fashion.

Thanks,

Bigmokujin

[JRab]

hey,

when you are using a TileList or any kind of list, assume that each item in the dataprovider (or array) is going to have its own cell. So when you push a new object into the array, consider that a cell you are pushing into the array. So each object that you push into the array must have a label property. Much like how you are adding id, fName, lName, etc into your object, you have to add in a label: as well. And even though you are adding other properites to the item that you are pushing into the array, only the label property will be visible in the cell. All other properties like the fName and id will exist, just not visible in the TileList. hope that helps. good luck!

[studiochris]

You'll need to write a renderer that includes a display element for all of the data in your DataProvider you'd like to be visible.

The basic idea is here: http://blog.digitalbackcountry.com/2011/01/creating-custom-list-skins-for-the-blackberry-playbook/

The article is older, so some of the names may have been changed here and there, but the idea is still the same and the code is still mostly good.

In the most basic sense, here's what needs to be accomplished at a minimum:

1. Create a new class extending UISkin and implementing the ICellRenderer interface to create a new cell renderer (or extend one of the existing skins)
2. Create display objects (text fields, image blocks, etc) to hold your data and position them as needed in the cell renderer's constructor (in your case this would be a Label object for each of the bits of your data: First and Last Name, Address, City & State)
3. Add the objects to the cell renderer's stage in the onAdded()method and remove them in onRemoved()
4. Set the data for each of the data display objects/update the display objects in the set data() method
5. In initializeStates(), define at least the _upSkin mentioned and show it using showSkin(_upSkin)

[bigmokujin]

Thanks for the input everyone.  But I am a newbie to this and everything you guys are suggesting is simply flying over my head.  Which is sad, since I can see my array in the debug console window.  I cannot believe that i am unable to actually render it on the freakin screen.

JRab, you mentioned that I need to add a label.  Do you have the syntax for adding multiple objects.  Every example I have seen basically shows the following:

// an array being populated with a single label value.

arrMonth.push({label:"someString"})

// and a TileList object using that simple array.

myTileList.dataProvider = new DataProvider(arrMonth);

Which is great, but how am I supposed to use an array that has like 5 data points??

arrMonth[0].data1, arrMonth[0].data2 arrMonth[0].data3, arrMonth[0].data4, arrMonth[0].data5

I suspect I am missing something rather simple.  But i am unable to reach that ah ha moment.

[Brandon_Appetizer · Accepted solution]

Sorry, I'm not sure exactly what you mean. If you have five pieces of data, you can do:

arrMonth.push({label: "data1"}]

arrMonth.push({label: "data2"}]

arrMonth.push({label: "data3"}]

arrMonth.push({label: "data4"}]

arrMonth.push({label: "data5"}]

myTileList.dataProvider = new DataProvider(arrMonth);

The syntax would also work like this for dynamic values:

var num:Number = 8.4;

arrMonth.push({label: num)});

myTileList.dataProvider = new DataProvider(arrMonth);

In this context, the label should have the text on it which corresponds to the output of num.toString().

Source:

http://docs.blackberry.com/en/developers/deliverables/23959/Creating_a_section_tile_list_1446777_11....

[cycletronic]

I think what JRab was saying is that you can take this for loop:

for (var i:uint = 0; i < endResult; i++){

    myArray.push({id:i + 1, fName:var1, lName:var2, address:var3, city:var4, state:var5});

}

And include a label:"something" in the stuff between the curly braces {}.

If you want to stitch all those vars together to be the label, assuming they are all strings, you can do something like this:

for (var i:uint = 0; i < endResult; i++){

    var myLabel:string = var1 + " " + var2 + " " + var3 + " " + var4 + " " + var5;

    myArray.push({id:i + 1, fName:var1, lName:var2, address:var3, city:var4, state:var5, label:myLabel});

}

Notice the "label:myLabel" stuck on in the end of the push() call.  All the other vars you have between the curly braces are still there, but they are not displayed.  Only the label is displayed.

[bigmokujin]

Thanks for the response....

You were right.  That's definitely direction I went in.  Once I was able to get my head around the fact that there should be only ONE label.  I reworked it and voila the TileList started showing the data. 

Thanks to all that responded.  Now all I have to do is add a button and an event handler, and I can finally put a fork in it...cause it will be done.

bigmokujin