Flex Examples
In a previous example, “Setting a specific number of columns in a TileList control in Flex”, we saw how to resize a TileList control based on a specific number of columns by setting the columnCount property.
The following example shows how you can resize a Flex TileList control to a certain number of rows by setting the rowCount property in MXML or ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowCount_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="rowCount:">
<mx:HSlider id="slider"
minimum="1"
maximum="3"
value="3"
snapInterval="1"
tickInterval="1"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="4"
columnWidth="100"
rowCount="{slider.value}"
rowHeight="50"
verticalScrollPolicy="on"
dragEnabled="true"
dragMoveEnabled="true"
dropEnabled="true" />
</mx:Application>
View source is enabled in the following example.
You can also set the rowCount property using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowCount_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
tileList.rowCount = evt.value;
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="rowCount:">
<mx:HSlider id="slider"
minimum="1"
maximum="3"
value="3"
snapInterval="1"
tickInterval="1"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="4"
columnWidth="100"
rowCount="3"
rowHeight="50"
verticalScrollPolicy="on" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/08/setting-a-specific-number-of-rows-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowCount_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.HSlider;
import mx.controls.TileList;
import mx.core.ScrollPolicy;
import mx.events.SliderEvent;
private var arrColl:ArrayCollection;
private var slider:HSlider;
private var tileList:TileList;
private function init():void {
arrColl = new ArrayCollection();
arrColl.addItem({label:"One"});
arrColl.addItem({label:"Two"});
arrColl.addItem({label:"Three"});
arrColl.addItem({label:"Four"});
arrColl.addItem({label:"Five"});
arrColl.addItem({label:"Six"});
arrColl.addItem({label:"Seven"});
arrColl.addItem({label:"Eight"});
arrColl.addItem({label:"Nine"});
arrColl.addItem({label:"Ten"});
slider = new HSlider();
slider.minimum = 1;
slider.maximum = 3;
slider.value = 3;
slider.snapInterval = 1;
slider.tickInterval = 1;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, slider_change);
var formItem:FormItem = new FormItem();
formItem.label = "rowCount:";
formItem.addChild(slider);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem);
var appControlBar:ApplicationControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);
tileList = new TileList();
tileList.dataProvider = arrColl;
tileList.columnCount = 4;
tileList.columnWidth = 100;
tileList.rowCount = 3;
tileList.rowHeight = 50;
tileList.verticalScrollPolicy = ScrollPolicy.ON;
addChild(tileList);
}
private function slider_change(evt:SliderEvent):void {
tileList.rowCount = evt.value;
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
More Gumbo :)
Great tutorial ! Thanks a lot !