Flex Examples
The following example shows how you can scroll the Flex HorizontalList control by setting the horizontalScrollPosition property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function prev():void {
var pos:int = hList.horizontalScrollPosition-1;
var min:int = 0;
var value:int = Math.max(min, pos);
hList.horizontalScrollPosition = value;
}
private function next():void {
var pos:int = hList.horizontalScrollPosition+1;
var max:int = hList.maxHorizontalScrollPosition;
var value:int = Math.min(pos, max);
hList.horizontalScrollPosition = value;
}
private function slider_change(evt:SliderEvent):void {
hList.horizontalScrollPosition = evt.value;
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object lbl="Illustrator" src="ai_appicon-tn.gif" />
<mx:Object lbl="Adobe AIR" src="air_appicon-tn.gif" />
<mx:Object lbl="ColdFusion" src="cf_appicon-tn.gif" />
<mx:Object lbl="Dreamweaver" src="dw_appicon-tn.gif" />
<mx:Object lbl="Flash" src="fl_appicon-tn.gif" />
<mx:Object lbl="Flash Player" src="fl_player_appicon-tn.gif" />
<mx:Object lbl="Fireworks" src="fw_appicon-tn.gif" />
<mx:Object lbl="Flex" src="fx_appicon-tn.gif" />
<mx:Object lbl="Lightroom" src="lr_appicon-tn.gif" />
<mx:Object lbl="Photoshop" src="ps_appicon-tn.gif" />
</mx:Array>
<mx:Panel styleName="opaquePanel">
<mx:HorizontalList id="hList"
dataProvider="{arr}"
itemRenderer="HorizontalListItemRenderer"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
columnWidth="100"
columnCount="4"
rowHeight="100"
rowCount="1"
borderSkin="{null}" />
<mx:ControlBar>
<mx:Button label="Previous" click="prev();" />
<mx:HSlider id="slider"
minimum="0"
maximum="{hList.maxHorizontalScrollPosition}"
value="{hList.horizontalScrollPosition}"
liveDragging="true"
snapInterval="1"
tickInterval="1"
showDataTip="false"
width="100%"
change="slider_change(event);" />
<mx:Button label="Next" click="next();" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View HorizontalListItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="plain">
<mx:Image source="{data.src}"
horizontalCenter="0"
verticalCenter="0" />
<mx:Label text="{data.lbl}"
fontWeight="bold"
horizontalCenter="0"
bottom="0" />
</mx:Canvas>
View source is enabled in the following example.
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
Again, I love this site.. so great that you post this kind of simple yet undergrated thins.
Hi! Thanks for providing that code…its really useful. Waiting for your next post.
Awesome site and great post. Helped me greatly. Anyone have an idea on how to apply effects as you transition between list items?
Hello, Thanks for the great info on your site.
Question on this example: Is this something that is easily set to use the tween class to slide from image to image, instead of just jumping?
Great example, it really helped me extend my gallery. Is there a way to add effects to transition between items on a HorizontalList?
A very cool example! Is it possible to have the sliding effect within the horizontal list instead of using the slider and buttons?
Thanks=)
I agree with Raul! This is one of the greatest reference for new Flex programmers.
As usual, another great sample!
Thanks Peter :)
Hi,
maybe this is the wrong topic to place my post but I couldn’t find anything similar to my prob.
I’m just starting with Flex Builder 3 and after reading a couple of books, I’m trying to build my own RIA. Everything was wonderful and I was happy with the results until I got stuck with a Canvas problem. I got a canvas(A) within another canvas(B) which B can be scaled using a Slider. It worked fine but the thing is, to center the scale of B relative to A it making me mad. I’ve been searching the net for a week and I couldn’t find anything to help me figure it out. My code works but when I try to slide from 200% to 10%, to position from B gets all mess up.
My code: A = _wrap / B = _doc
/* ———————– */
private function alignDoc():void {
if(_doc.width > _wrap.width){
_doc.x = 30;
_wrap.horizontalScrollBar.setStyle(“thumbWidth”, 100);
_wrap.horizontalScrollPosition = _wrap.horizontalScrollBar.width / 2;
}
if(_doc.height > _wrap.height){
_doc.y = 30;
_wrap.verticalScrollPosition = _wrap.verticalScrollBar.height / 2;
}
if(_doc.width
Thank you for sharing! it works :)
Hi Peter,
Thanks a lot for sharing this..
But I need to add the events for the Itemrenderer.
For example, when I click any Item in the HorizontalList, I have to display the “Name of the particular picture”.
Please tell me .. How to do this ???
nathan,
What about something like this:
<mx:Label text="{hList.selectedItem.lbl}" />Peter
Hey… Thanks a lot Peter.. It works fine…
Peter.. One more thing need to know…
Could you please post any example for Event Dispatch from Itemrenderer ???
Where the Itemrenderer for any List based control… Please…
hey frnds,
could we add some move effect to horizontal list?
abhishekchess1@gmail.com
:)
:)
Hi,
I am trying this code with Flex 3, but it is giving error on using the
“Error: Component declaration are not allowed here”. Can you please help me with this??
Thanks
@Payel,
Are you using the code from above, or are you using this in a different project?
Peter
You just saved my life with this post! Thank you so much!!
Add a tween if you like:
var pos:int =hList.horizontalScrollPosition-1;
var min:int = 0;
var value:int = Math.max(min, pos);
TweenLite.to(hList, 0.5,{horizontalScrollPosition:value});
Hi! Thanks for providing that code…its really useful. Waiting for your next post.