| | {section} |
| | {column:width=80%} |
| | |
| | h2. TileList |
| | |
| | The TileList control displays a number of items laid out in tiles. |
| | * The items are tiled in vertical columns or horizontal rows. |
| | * Specify the size of the tiles by using the rowHeight or columnWidth properties |
| | * The default item renderer displays text and an icon |
| | * Custom item renderers can be used for more complex item displays |
| | * The user can interact with the items being displayed |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Lists} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/3e.+Multi-page+applications} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | h6. Learn more |
| | * {adbe-popup:http://www.adobe.com/devnet/flex/articles/containers_09.html}Add a TileList and Populate it with an Array of Objects{adbe-popup} |
| | * {adbe-popup:http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.html}Reference page on LiveDocs{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0" |
| | horizontalAlign="left" |
| | verticalGap="15" horizontalGap="15"> |
| | |
| | <mx:Script> |
| | <![CDATA[ |
| | import mx.collections.ArrayCollection; |
| | import mx.rpc.events.ResultEvent; |
| | import mx.events.ListEvent; |
| | |
| | [Bindable] |
| | private var photoFeed:ArrayCollection = new ArrayCollection(); |
| | |
| | private function requestPhotos():void { |
| | var params:Object = new Object(); |
| | params.format = 'rss_200_enc'; |
| | params.tags = searchTerms.text; |
| | photoService.send(params); |
| | } |
| | |
| | private function photoHandler(event:ResultEvent):void { |
| | photoFeed = event.result.rss.channel.item as ArrayCollection; |
| | } |
| | |
| | //show text message when user selects image |
| | private function showMessage(event:Event):void { |
| | message.text = "You selected: " + event.currentTarget.selectedItem.title + "\nUploaded by: " + |
| | event.currentTarget.selectedItem.credit; |
| | } |
| | ]]> |
| | </mx:Script> |
| | |
| | <!-- photo service --> |
| | <mx:HTTPService id="photoService" |
| | url="http://api.flickr.com/services/feeds/photos_public.gne" |
| | result="photoHandler(event)" /> |
| | |
| | <!-- search --> |
| | <mx:Form> |
| | <mx:FormItem label="Search Term" |
| | direction="horizontal"> |
| | <mx:TextInput id="searchTerms" /> |
| | <mx:Button label="Search" |
| | click="requestPhotos()" /> |
| | </mx:FormItem> |
| | </mx:Form> |
| | |
| | <!-- result, data is passed to the itemRenderer by Flex through the data property --> |
| | <mx:TileList id="mylist" |
| | labelField="thumbnail" |
| | dataProvider="{photoFeed}" |
| | width="600" height="200" |
| | paddingTop="25" left="5" |
| | itemClick="showMessage(event)"> |
| | <mx:itemRenderer> |
| | <mx:Component> |
| | <mx:VBox width="125" height="125" |
| | paddingRight="5" paddingLeft="5" |
| | horizontalAlign="center"> |
| | <mx:Image |
| | height="75" width="75" |
| | source="{data.thumbnail.url}"/> |
| | </mx:VBox> |
| | </mx:Component> |
| | </mx:itemRenderer> |
| | </mx:TileList> |
| | |
| | <mx:Text id="message" |
| | paddingTop="20" /> |
| | |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Example |
| | |
| |  | !TileListExample.swf|width=600,height=450,id=media! |
| | | {test-flash:600|450|TileListExample.swf}TileListExample{test-flash} |
| | |
 | | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Lists} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/3e.+Multi-page+applications} |
