Flex4Fun

Following example show Tile Style slide show and changeValueByPage usage.

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>

SparkListTileSlidershow.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--created:Sep 14, 2010 file:SparkListTileSlidershow.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;
			import mx.events.FlexEvent;
			[Bindable]
			public var totalPages:Number;
			[Bindable]
			public var currentPage:Number=1;
			[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"}, {label: "images10", photo: "image10.png"}, {label: "images11", photo: "image11.png"}, {label: "images12", photo: "image12.png"}, {label: "images13", photo: "image13.png"}, {label: "images14", photo: "image14.png"}, {label: "images15", photo: "image15.png"}, {label: "images16", photo: "image16.png"}, {label: "images17", photo: "image17.png"}, {label: "images18", photo: "image18.png"}]);

			protected function list1_creationCompleteHandler(e:FlexEvent):void
			{
				myList.scroller.setStyle("horizontalScrollPolicy", "off");
				myList.scroller.setStyle("verticalScrollPolicy", "off");
				myList.scroller.horizontalScrollBar.setStyle("smoothScrolling", true);
				myList.scroller.horizontalScrollBar.setStyle("repeatInterval", 600);
				totalPages=Math.ceil(myList.scroller.viewport.contentWidth / myList.scroller.horizontalScrollBar.pageSize);
			}

			protected function button1_clickHandler(event:MouseEvent):void
			{
				if (currentPage == 1)
					return;
				currentPage--;
				myList.scroller.horizontalScrollBar.changeValueByPage(false);
			}

			protected function button2_clickHandler(event:MouseEvent):void
			{
				if (currentPage == totalPages)
					return;

				currentPage++;

				myList.scroller.horizontalScrollBar.changeValueByPage(true);
			}
		]]>
	</fx:Script>

	<s:List id="myList"
			creationComplete="list1_creationCompleteHandler(event)"
			dataProvider="{listDB}"
			itemRenderer="comp.MyList"
			width="450"
			height="340">
		<s:layout>
			<s:TileLayout columnWidth="150"
						  rowHeight="170"
						  requestedColumnCount="9"
						  verticalGap="0"
						  horizontalGap="0"/>
		</s:layout>
	</s:List>
	<s:HGroup>
		<s:Button label="Prev"
				  click="button1_clickHandler(event)"/>
		<s:Button label="Next"
				  click="button2_clickHandler(event)"/>
	</s:HGroup>
</s:Application>

Demo and Source

Originally posted 2010-09-14 09:53:32.