Making a horizontal list with clickable images as members

Question

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

Answer 1

Just add an event handler to the image

Answer 2

If you're asking how to capture the selection of an item in a list, there are a number of 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 that what you're asking? You need only hook into one of the list events (see the Flex docs for more info) to retrieve which item was selected. Make sense?

Answer 3

thanks!!

^^

Answer 4

Very good example =D