Setting a text indent on the Spark List control in Flex 4

3 Responses to Setting a text indent on the Spark List control in Flex 4

1. CB says:

   February 24, 2010 at 8:07 pm

   Hello! Thanks for your examples! I am wondering if you can post an example on how to handle a click event on a spark list. I used your example to display images in a spark list using the tile layout and an xml file. Now, I would like to click on an item in a tile list and do something based on it. Specifically, I would like to read a value from the xml file that correlates with the item I clicked. Thanks!

   Reply
   • Peter deHaan says:

     February 24, 2010 at 8:40 pm

     @CB,

     I’d just listen for the Spark List control’s change event and get the currently selected item using the selectedItem property. Something like the following (click on a Spark List item and display a dynamically loaded image using the PopUpManager):

     <?xml version="1.0" encoding="utf-8"?>
     <s:Application name="Spark_List_click_test"
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx">
         <fx:Script>
             <![CDATA[
                 import mx.controls.Image;
                 import mx.events.CloseEvent;
                 import mx.events.ResizeEvent;
                 import mx.managers.PopUpManager;
      
                 import spark.components.TitleWindow;
                 import spark.events.IndexChangeEvent;
      
                 protected function lst_changeHandler(evt:IndexChangeEvent):void {
                     var item:Object = List(evt.currentTarget).selectedItem;
      
                     var img:Image = new Image();
                     img.source = item.source;
      
                     var titleWin:TitleWindow = new TitleWindow();
                     titleWin.title = item.label + " -- " + item.source;
                     titleWin.addElement(img);
                     titleWin.addEventListener(ResizeEvent.RESIZE, titleWin_resizeHandler);
                     titleWin.addEventListener(CloseEvent.CLOSE, titleWin_closeHandler);
                     PopUpManager.addPopUp(titleWin, this, true);
                 }
      
                 protected function titleWin_resizeHandler(evt:ResizeEvent):void {
                     PopUpManager.centerPopUp(evt.currentTarget as TitleWindow);
                 }
      
                 protected function titleWin_closeHandler(evt:CloseEvent):void {
                     PopUpManager.removePopUp(evt.currentTarget as TitleWindow);
                 }
             ]]>
         </fx:Script>
      
         <s:List id="lst" change="lst_changeHandler(event)" horizontalCenter="0" verticalCenter="0">
             <s:dataProvider>
                 <s:ArrayList>
                     <fx:Object label="Image 1" source="http://helpexamples.com/flash/images/image1.jpg" />
                     <fx:Object label="Image 2" source="http://helpexamples.com/flash/images/image2.jpg" />
                     <fx:Object label="Image 3" source="http://helpexamples.com/flash/images/image3.jpg" />
                 </s:ArrayList>
             </s:dataProvider>
         </s:List>
      
     </s:Application>

     Peter

     Reply
2. CB says:

   February 25, 2010 at 9:30 pm

   It works — thanks! I was trying to use the click function instead of the change function. Inside the change handler I have:

   var item:Object = List(event.currentTarget).selectedItem;
   img.source = item.attribute("myImage");

   Reply