TileList with styleFunction

english mobile

Recently I had a requirement to have buttons displayed in a grid with different color backgrounds based on the underlying data. Thus, the TileList_withStyle was born. The TileList_withStyle is simply a TileList extended to have a styleFunction. Note that I mostly just copied and modified the styleFunction code from the AdvancedDataGrid control. You can probably use the same technique to add a style function to pretty much any List-based control.

At the same time, I also needed to set the icon on the button based on the iconFunction that TileList already had. Unfortunately, the Button class does not have hte inherent capability to use the icon as it is passed in through the iconFunction. Thus, the IconFunctionableButton was born. I've posted an example file demo-ing these two classes. Right-click and select View Source to get the source code.


Mike said...

Thanks for this Amy! I was wondering if you know how to make the buttons sized dynamically in the itemrenderer and center them in the tilelist? So for example I want 20 buttons in 2 rows and each should be 30 high and 40 wide.

Amy B said...

If you look at the GroupingCollection example http://flexdiary.blogspot.com/search/label/HierarchicalCollectionView, you'll see that the main thing you need to do is select a direction for the tilelist, tell it how big to be, and then set the appropriate number of rows (or columns). Flex then does the layout for you. If you set the labelPlacement style to "top" or "bottom", the icon will be centered http://www.adobe.com/livedocs/flex/3/langref/mx/controls/Button.html#styleSummary.