Making a horizontal list with clickable images as members

apache-flex

I want to make a horizontal list in my application, which will display images. While this is quite trivial, I want the image to open a flex alert box (the built in one) and display some text. For example, I will have an image of the .NET logo and I will enter some text somewhere (like in a collection), and this text will be displayed in the alert box.

How could I do this? There doesn't seem to be an event handler for clicking an item member in a flex horizontal list?

Thanks

Best Answer

<?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>
Related Topic