Apache – Flex horizontal tile list

apache-flex

I am using a horizontal tilelist in flex to display an image gallery with only one item in horiz. tilelist being shown at a time. I have next and previous buttons on both sides.

The problem is I want to display a particular item/image in that list when user clicks on a thumb image from another thumbimages tilelist at bottom.

I used someTilelist.selectedIndex property but it just selects that particular index in list, it does not show that particular item/image. I want the list to show that particular image, not just select it. Please take note that the horiz. tilelist shows only one image at time.

Best Answer

tilelist.scrollToIndex(index);

Related Solutions

How to implement custom drag functionality in a Flex list control

It's not obvious until you've tried it =) I struggled with the same thing just a few weeks ago. This was my solution:

The list:

<List>
  <mouseDown>onListMouseDown(event)</mouseDown>
</Tree>

The mouse down handler:

private function onMouseDown( event : MouseEvent ) : void {
  var list : List = List(event.currentTarget);

  // the data of the clicked row, change the name of the class to your own
  var item : MyDataType = MyDataType(list.selectedItem);

  var source : DragSource = new DragSource();

  // MyAwsomeDragFormat is the key that you will retrieve the data by in the
  // component that handles the drop
  source.addData(item, "MyAwsomeDragFormat");

  // this is the component that will be shown as the drag proxy image
  var dragView : UIComponent = new Image();

  // set the source of the image to a bigger version here
  dragView.source = getABiggerImage(item);

  // get hold of the renderer of the clicked row, to use as the drag initiator
  var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));

  DragManager.doDrag(
    rowRenderer,
    source,
    event,
    dragView
  );
}

That will start the drag when the user clicks an item in the list. Notice that I don't set dragEnabled and the other drag-related properties on the list since I handle all that myself.

It can be useful to add this to the beginning of the event handler:

if ( event.target is ScrollThumb || event.target is Button ) {
  return;
}

Just to short circuit if the user clicks somewhere in the scrollbar. It's not very elegant but it does the job.

Making a horizontal list with clickable images as members

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

Best Answer

Related Solutions

How to implement custom drag functionality in a Flex list control

Making a horizontal list with clickable images as members

Related Topic