TileList Control Click and Drag-and-Drop

In a previous blog entry , I provided an introduction on using the TileList control. In this entry, I'll describe how a user may interact with the TileList. Specifically, I'll provide an example of the click event and how to enable drag-and-drop operations for the TileList.

In the Flex example for this blog entry I've added some components to the right of the original TileList. The first two components to the right are a Text and TextArea component. When the user clicks on a specific book in the TileList, these components are updated with that item's title and description. All I had to do was bind the text and htmlText values to the bookList (the id value for the TileList) selectedItem and then the name of the field (note that these fields must exist in my Book class).

The next user interaction feature I added was drag-and-drop. Chapter 29 in the Flex Developer's Guide provides a good overview on how to enable drag-and-drop operations. TileList (like the other List controls) includes built-in support for drag-and-drop. To enable the user to drag a book item from the TileList I just had to set dragEnabled="true". Note that I did not set dragMoveEnabled to true (false is the default) as I want the user to copy the item to the drop target, but still have the same item remain in the original TileList control.

I added a second TileList control to be the recipient of the drag-and-drop operation. To enable a TileList to be a "drop target" you just need to set dropEnabled="true". I am also using a different custom item renderer (see ThumNailBrief.mxml in the source) for this drop TileList. This item renderer just shows the title and price, so that is all that appears in the drop TileList.

When the user drop's an item into the second TileList, a dropEvent is generated (there are many other drag-and-drop events, see chapter 29). When the dropEvent is triggered I call function addToCart(). This function merely creates a Book object using the ActionScript Book class, sets the value for some of the Book objects instance fields, and then adds the Book object to different ArrayCollection (cartAryCol).

When the user clicks on the check out button, I call a checkOut function. In the checkOut function the program loops through the cartAryCol and shows the user the items in the cartAryCol using an Alert component.

Of course, I'm missing several key functions. I need to add a way for the user to specify the quantities of a book he/she wants to order and I also need a way for the user to remove a book item from the cart TileList. I'll add those capabilities in the next iteration of my research on using the TileList control.

Check out the demo Flex example, right click to view its source. Feel free to provide any comments or links to other good examples of using the TileList control.