Flex4Fun

Following example show how use spark list become to TileList.

MyList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="true"
				alternatingItemColors="[0x000000]"
				rollOverColor="0x302f2f">
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected"/>
		<s:State name="default"/>
	</s:states>
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"/>
	</s:layout>
	<mx:Image source="listimages/{data.photo}"
			  width="150"
			  height="150"/>
	<s:Label text="{data.label}"
			 color="0xFFFFFF"
			 color.hovered="0xfd9604"
			 color.selected="0x000000"/>

</s:ItemRenderer>

TileListExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--created:Sep 14, 2010 file:VerticalListExample.mxml  author:Michael -->
<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" viewSourceURL="srcview/index.html">
	<s:layout>
		<s:VerticalLayout verticalAlign="middle"
						  horizontalAlign="center"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import comp.MyList;

			import mx.collections.ArrayCollection;
			[Bindable]
			private var listDB:ArrayCollection=new ArrayCollection([{label: "images1", photo: "image1.png"},
				{label: "images2", photo: "image2.png"},
				{label: "images3", photo: "image3.png"},
				{label: "images4", photo: "image4.png"},
				{label: "images5", photo: "image5.png"},
				{label: "images6", photo: "image6.png"},
				{label: "images7", photo: "image7.png"},
				{label: "images8", photo: "image8.png"},
				{label: "images9", photo: "image9.png"}]);
		]]>
	</fx:Script>

	<s:List dataProvider="{listDB}"
			itemRenderer="comp.MyList"
			width="300"
			height="358">
		<s:layout>
			<s:TileLayout rowHeight="170"
						  columnWidth="150"
						  requestedColumnCount="3"
						  horizontalGap="0"
						  verticalGap="0"/>
		</s:layout>
	</s:List>
</s:Application>

Demo and Source

Originally posted 2010-09-14 04:04:41.