Flex4Fun

spark changeValueByPage method Increment value by a page if increase is true, or decrement value by a page if increase is false. Increasing the scrollbar’s value scrolls the viewport to the right. Decreasing the value scrolls to the viewport to the left.

Following example show 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>

SparkListHorizontalSlidershow.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--created:Sep 14, 2010 file:SparkListHorizontalSlidershow.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"}]);

			protected function list1_creationCompleteHandler(e:FlexEvent):void
			{
				myList.scroller.setStyle("horizontalScrollPolicy", "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">
		<s:layout>
			<s:HorizontalLayout columnWidth="150"
								gap="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:30:36.