Home Tutorial Flex Flex4 Components TileList Control in Flex4

 
 

TileList Control in Flex4
Posted on: May 31, 2010 at 12:00 AM
The TileList control displays a component in tile form vertically. The item will be displayed in vertical columns or horizontal rows.

TileList control in Flex4:

The TileList control displays a component in tile form vertically. The item will be displayed in vertical columns or horizontal rows. The Canvas layout Container is a MX component. There is no spark component. You can display a list of items and images in it. The items will be displayed from top to bottom. It looks like a VBox control and Tile Container. But it can be better than a Tile container. You can set the maxcolumn property value for showing a item. It contains a vertical scrollbar.
The tag of Tilelist control is <mx:TileList>.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<s:Panel title="TileList Control Example" width="265" height="249">

<mx:TileList x="13" y="11"

maxColumns="2"

width="235" height="193">

<mx:dataProvider>

<fx:Array>

<fx:Object label="Java" icon="@Embed('C:/work/bikrant/flex4component/tilelist/java.jpg')"/>

<fx:Object label="iphone" icon="@Embed('/C:/work/bikrant/flex4component/tilelist/iphone.gif')"/>

<fx:Object label="PHP" icon="@Embed('/C:/work/bikrant/flex4component/tilelist/php.jpg')"/>

<fx:Object label="HTML" icon="@Embed('/C:/work/bikrant/flex4component/tilelist/html.png')"/>

<fx:Object label="Flex" icon="@Embed('/C:/work/bikrant/flex4component/tilelist/flex.jpg')"/>

</fx:Array>

</mx:dataProvider>

</mx:TileList>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for TileList Control in Flex4:


Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.