Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Flex Dataprovider TileList Control with Data Provider

Related Tutorials


 
 

Share on Google+Share on Google+

TileList Control with Data Provider

Advertisement
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

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 16, 2009

Related Tutorials

Discuss: TileList Control with Data Provider  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com