Faire une liste horizontale avec des images cliquables en tant que membres

Question

Je veux faire une liste horizontale dans mon application, ce qui affichera des images. Bien que ce soit assez trivial, je veux que l'image ouvre une boîte d'alerte flex (le construit en un) et affiche du texte. Par exemple, je vais avoir une image du logo .NET et je vais entrer du texte quelque part (comme dans une collection), et ce texte sera affiché dans la boîte d'alerte.

Comment est-ce que je pourrais faire ceci? Il ne semble pas y avoir un gestionnaire d'événements pour cliquer sur un membre d'élément dans une liste horizontale flexible?

Merci

Answer 1

Si vous vous demandez comment capturer la sélection d'un élément dans une liste, il y a un certain nombre d'événements à votre disposition: itemClick, itemDoubleClick, changer:

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

Est-ce que c'est ce que vous demandez? Il vous suffit de vous connecter à l'un des événements listés (voir les documentations Flex pour plus d'informations) afin de récupérer quel élément a été sélectionné. Avoir du sens?

Answer 2

Il suffit d'ajouter un gestionnaire d'événements à l'image

Answer 3

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