Creating a horizontal list with clickable images as items
I want to make a horizontal list box in my application where images will be displayed. While this is pretty trivial, I want the image to open an error alert window (embedded in one) and display some text. For example, I will have a .NET logo image and I will enter some text somewhere (like a collection) and that text will be displayed in an alert box.
How can i do this? There doesn't seem to be an event handler for clicking an element of an item in a flexible horizontal list?
thank
0
source to share
3 answers
If you are asking how to capture the selection of an item in a list, there are several events available to you: itemClick, itemDoubleClick, change:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="this_initialize()" creationComplete="this_creationComplete()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var images:Array;
private function this_initialize():void
{
images = new Array();
images.push("myimage1.jpg");
images.push("myimage2.jpg");
images.push("myimage3.jpg");
images.push("myimage4.jpg");
images.push("myimage5.jpg");
}
private function this_creationComplete():void
{
}
private function list_itemClick(event:ListEvent):void
{
Alert.show(event.currentTarget.selectedItem as String);
}
]]>
</mx:Script>
<mx:HorizontalList id="list" dataProvider="{images}" itemClick="list_itemClick(event)">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data}" />
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
</mx:Application>
Is this what you are asking about? To get the selected item, you only need to connect to one of the list events (see Flex documentation for more information). It makes sense?
0
source to share
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600" >
<fx:Declarations>
<s:Sine id="sineEasing"
easeInFraction="0.3"/>
<s:Power id="powerEasing"
exponent="8"/>
<s:Animate id="anim" duration="500"
effectStart="{trace('start');lock=true}"
effectEnd="{trace('end');lock=false}"
target='{viewport}' easer="{powerEasing}" >
<s:motionPaths>
<s:SimpleMotionPath id="pth" property="horizontalScrollPosition" />
</s:motionPaths>
</s:Animate>
<s:ArrayCollection id="mydata3">
<fx:String >page 1</fx:String>
<fx:String >page 2</fx:String>
<fx:String >page 3</fx:String>
<fx:String >page 4</fx:String>
<fx:String >page 5</fx:String>
<fx:String >page 6</fx:String>
<fx:String >page 7</fx:String>
<fx:String >page 8</fx:String>
<fx:String >page 9</fx:String>
<fx:String >page 10</fx:String>
<fx:String >page 11</fx:String>
<fx:String >page 12</fx:String>
<fx:String >page 13</fx:String>
<fx:String >page 14</fx:String>
</s:ArrayCollection>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
private const FUDGE_FACTOR:Number = 0.5;
[Bindable] private var lock:Boolean= false;
[Bindable] private var viewport ;
[Bindable] private var max:int;
[Bindable]protected var lstData:ArrayCollection = new ArrayCollection([
{label:"mmm",source:"images/DSC_0002.JPG"},
{label:"nxt",source:"images/DSC_0003.JPG"},
{label:"nxt3",source:"images/DSC_0008.JPG"},
{label:"nxt3",source:"images/DSC_0009.JPG"},
{label:"nxt3",source:"images/DSC_0010.JPG"},
{label:"mmm",source:"images/DSC_00011.JPG"},
{label:"mmm",source:"images/DSC_0011.JPG"},
{label:"nxt3",source:"images/DSC_0012.JPG"},
{label:"mmm",source:"images/DSC_0013.JPG"},
{label:"nxt3",source:"images/DSC_0014.JPG"},
{label:"mmm",source:"images/DSC_0015.JPG"},
{label:"mmm",source:"images/DSC_0016.JPG"},
]);
private function fudgeMouseWheel( event:MouseEvent ):void
{
trace('list.scroller.horizontalScrollBar.value'+list.scroller.horizontalScrollBar.value);
event.delta *= FUDGE_FACTOR;
if( event.delta >0){
//list.scroller.viewport.horizontalScrollPosition+=250;
if(!lock) next();
}else{
//list.scroller.viewport.horizontalScrollPosition-=250;
if(!lock) prev();
}
//trace('delta'+event.delta);
}
protected function list1_creationCompleteHandler(event:FlexEvent):void
{
this.viewport = list.scroller.viewport;
list.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, drag_handler);
this.addEventListener( MouseEvent.MOUSE_WHEEL, fudgeMouseWheel, true );
trace('list.scroller.viewport.contentWidth '+list.scroller.viewport.contentWidth );
max=list.scroller.viewport.contentWidth-250;
trace('max: '+ max);
}
private function drag_handler(e):void
{
trace('drag:'+list.scroller.horizontalScrollBar.value);
}
[Bindable] private var currentPos:int;
protected function next():void
{
currentPos = list.scroller.viewport.horizontalScrollPosition;
pth.valueTo = currentPos+250;
pth.valueFrom = currentPos;
anim.play();
scrollbar.value += 250;
tempSliderPos += 250;
}
private function prev():void
{
currentPos = list.scroller.viewport.horizontalScrollPosition;
pth.valueTo = currentPos-250;
pth.valueFrom = currentPos;
anim.play();
scrollbar.value -= 250;
tempSliderPos -= 250;
}
private var tempSliderPos:int=0;
private function change( e ):void
{
//trace('e.target.value');
/* if( e.target.value > tempSliderPos )
{
pth.valueTo = tempSliderPos+250;
pth.valueFrom = tempSliderPos;
anim.play();
tempSliderPos+=250;
}else{
pth.valueTo = tempSliderPos-250;
pth.valueFrom = tempSliderPos;
anim.play();
tempSliderPos-=250;
} */
/* if( e.target.value > tempSliderPos )
{
//if(!lock) next();
pth.valueTo = tempSliderPos+250;
pth.valueFrom = tempSliderPos;
anim.play();
tempSliderPos+=250;
}else{
//if(!lock) prev();
pth.valueTo = tempSliderPos-250;
pth.valueFrom = tempSliderPos;
anim.play();
tempSliderPos-=250;
}*/
//trace(e.target.value);
}
protected function scrollbar_changeStartHandler(event:FlexEvent):void
{
//trace('start')
}
protected function scrollbar_changeEndHandler(e:Event):void
{
Event as FlexEvent;
if( e.target.value > tempSliderPos )
{
trace('tempSliderPos '+tempSliderPos+' e.target.value '+e.target.value)
//if(!lock) next();
pth.valueTo = e.target.value;
pth.valueFrom = tempSliderPos;
anim.play();
tempSliderPos = e.target.value;
}else{
trace('tempSliderPos '+tempSliderPos+' e.target.value '+e.target.value)
//if(!lock) prev();
pth.valueTo = e.target.value;
pth.valueFrom = tempSliderPos;
anim.play();
tempSliderPos = e.target.value;
}
}
]]>
</fx:Script>
<!--<mx:HorizontalList id='list'
width="250" height="281"
dataProvider='{lstData}'
itemRenderer="list_item"
x="216" y="48"
creationComplete="list1_creationCompleteHandler(event)">
</mx:HorizontalList>-->
<s:List id='list' skinClass="ListSkin" width="250" height="281"
dataProvider='{lstData}'
itemRenderer="list_item" x="216" y="48" creationComplete="list1_creationCompleteHandler(event)">
</s:List>
<s:HScrollBar id='scrollbar' changeStart="scrollbar_changeStartHandler(event)"
changeEnd="scrollbar_changeEndHandler(event)"
stepSize="250"
width="250" minimum="0" maximum="{max}" x="216" y="382" change="{change(event)}"
snapInterval="250" />
</s:Application>
+1
source to share