Flex Examples
In a previous example, “Setting the column width of a tile in a TileList control in Flex”, we saw how you could change the width of a tile in a Flex TileList control by setting the columnWidth property.
The following example shows how you can set the row height of a tile in a Flex TileList control by setting the rowHeight property in MXML and ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowHeight_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="rowHeight:">
<mx:HSlider id="slider"
minimum="50"
maximum="100"
value="100"
snapInterval="1"
tickInterval="5"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="5"
columnWidth="100"
rowCount="2"
rowHeight="{slider.value}"
alternatingItemColors="[#FFFFFF,#EEEEEE]" />
</mx:Application>
View source is enabled in the following example.
You can also set the rowHeight property using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/09/setting-the-row-height-of-a-tile-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_rowHeight_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.rowHeight = 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="rowHeight:">
<mx:HSlider id="slider"
minimum="50"
maximum="100"
value="100"
snapInterval="1"
tickInterval="5"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="5"
columnWidth="100"
rowCount="2"
rowHeight="100"
alternatingItemColors="[#FFFFFF,#EEEEEE]" />
</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
