TileList Control, Custom Item Renderer, and the Power of Flex's Data Provider

If you've been following my exploration of using the TileList control (see related blog entries below), you will know that I needed to add to the Flex 2.0 TileList demo application the ability for the user to specify the number of each book he/she wants to purchase. I've added that capability in this version of the TileList Flex 2.0 demo app (right click to view the source code).

My first step was to add a Numeric Stepper component to the custom item renderer (ThumbNailBrief.mxml) that is used to display items in the cart TileList. But I couldn't figure out how to get a change in the Numeric Stepper's value to be reflected in the quantity field of the objects in my cartArycol. I was using an Array Collection (cartAryCol) to hold each BookOrder object. One of the fields in the BookOrder class is qty. However, the custom item renderer could not "see" the cartAryCol which is only visible in the root application.

So then I experimented with having the cartAryCol as the data provider for the cart TileList. After doing this, when the user dragged a Book item from the book TileList to the cart TileList, two items for the same book were displayed in the cart TileList. The reason this happened is that I was creating a BookOrder object (see the previous blog entry and its demo app) and adding the BookOrder object to the cartAryCol. So this was the cause for one of the items being displayed. But what I discovered is that now that the cart TileList had a named data provider, Flex would take the object dropped onto the cartTileList and automatically add that object to the data provider. So that is how two items were appearing for each book dragged from the book TileList. One object I was adding manually and one object Flex was adding behind the scenes.

So I removed the code where I was creating the BookOrder object and adding it to the cartAryCol manually. Now only one item was being displayed by the cart TileList when a book was dragged from the book TileList and dropped in the cart TileList. But I still could not figure out how to get the change in the Numeric Stepper's value to update the qty field in the object stored in the cartAryCol.

Finally, after some trial and error, I changed the code in my updateQty function--the function that is called when the user changes the Numeric Stepper's value to this:

bookQty is the ID of the Numeric Stepper component. The data.qty refers to the qty field in the data object use to create this item in the cart TileList and is the same object stored automatically by Flex in the cartAryCol (the data provider for the cart TileList). I merely set data.qty to the value of the Numeric Stepper and the qty field of the object in the cartAryCol is updated also. This is proven by the checkOut function, which merely loops over the objects stored in the cartAryCol and displays the values stored in each object's itemID, price, and qty fields.

Since I've started using Flex 2.0, I've been WOW'D several times. The power of data providers, the List controls like TileList, and how Flex does so much of the work for the developer is just amazing. I had no idea that dropping an object onto a TileList would automatically add the object to the TileList's data provider. Removing the object from the TileList, removes it from the data provider.

So now I've built a small Flex 2.0 TileList demonstration app that includes displaying books (with cover images) pulled from amazon, displays additional information about a book when the user clicks on it, allows the user to drag a book to a cart, allows the user to increase/decrease the quantity for each book, and enables the user to remove a book from the cart. If you look at the number of lines in the source code, it's really not very much code that generates so much capability.

Of course more testing needs to be done to the Tilelist demo application. I have noticed a quirk in my logic and code if the user drags the same book to the cart more than once.

I look forward to experimenting with more of Flex and learning how to leverage its capabilities. The power and rapid design Flex 2.0 provides developers is tremendous.