Home Flex Dataprovider TileList Control with Data Provider

TileList Control with Data Provider
Posted on: November 16, 2009 at 12:00 AM

TileList control is also a special list control that organizes data items into a vertical layout but when this exceeds the particular tilelist's width it breaks the list into another row.

TileList Control with Data Provider

TileList control is also a special list control that organizes data items into a vertical layout but when this exceeds the particular tilelist's width it breaks the list into another row. It can also be used in several conditions since it can have almost all kind of data( i.e anything from image to text). It can be used by the programmer in all application from a small application to large scale application.

In this example we have created two data objects that contains the employee list and color list . These are accessed into the application's TileList control with the property dataprovider. Here you can see that we have created two tile list items in which one shows all the data into one row and another shows that the data is tiled into vertical columns and horizontal rows.

Following is the full source code of the application :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="373" height="272">
  <mx:ArrayCollection id="employeeList">
  <mx:source>
  <mx:Object label="Amit" data="1001"/>
  <mx:Object label="Sumit" data="1002"/>
  <mx:Object label="Ranjeet" data="1003"/>
  <mx:Object label="Sanjeev" data="1004"/>
  <mx:Object label="Dileep" data="1005"/>
  </mx:source>
  </mx:ArrayCollection>
  <mx:ArrayCollection id="colorList">
  <mx:source>
  <mx:Object label="RED COLOR" data="RED"/>
  <mx:Object label="GREEN COLOR" data="GREEN"/>
  <mx:Object label="WHITE COLOR" data="WHITE"/>
  <mx:Object label="BLUE COLOR" data="BLUE"/>
  <mx:Object label="BROWN COLOR" data="BROWN"/>
  <mx:Object label="BLACK COLOR" data="BLACK"/>
  <mx:Object label="CHERRY COLOR" data="CHERRY"/>
  </mx:source>
  </mx:ArrayCollection>
  <mx:Panel x="10" y="10" width="353" height="252" layout="absolute"
title="Tile List with Data Provider Example">
  <mx:TileList x="19.5" y="27" width="294"
  height="73"
  dataProvider="{employeeList}"
  color="#FBFBFB"
  borderColor="#A06565"
  backgroundColor="#FFDFA0"
  backgroundAlpha="0.75">
  </mx:TileList>
  <mx:TileList x="19.5" y="99" width="294"
  height="79"
  dataProvider="{colorList}"
  color="#FFFBCC"
  borderColor="#A06565"
  backgroundColor="#FF9FA0"
  backgroundAlpha="0.65">
  </mx:TileList>
  </mx:Panel>
</mx:Application>

Output :

Watch in action :

Download Source Code

Related Tags for TileList Control with Data Provider:

«Previous Index Next»