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

The following example shows how you can set the text indent on a Spark List control in Flex 4 by creating a custom item renderer using the RichText control and setting the textIndent style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/19/setting-a-text-indent-on-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_textIndent_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:Declarations>
        <s:ArrayCollection id="arrColl">
            <fx:String>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae purus vel tellus sagittis feugiat.</fx:String>
            <fx:String>Sed tortor turpis, lacinia ac fringilla nec, bibendum id lorem. Nunc euismod malesuada tellus sit amet ultrices.</fx:String>
            <fx:String>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</fx:String>
            <fx:String>Aliquam erat volutpat. Cras pellentesque faucibus iaculis. Donec mi elit, lacinia sed eleifend at, vestibulum in enim.</fx:String>
            <fx:String>Donec lacinia libero tincidunt risus ultricies sit amet tristique ante suscipit. Sed risus lectus, rhoncus convallis posuere vitae, molestie sit amet tortor.</fx:String>
            <fx:String>Vestibulum arcu augue, congue dignissim ultrices eu, porta ac metus. Praesent fringilla, libero vel adipiscing vehicula, ipsum ante mattis leo, eu ornare libero massa at tellus.</fx:String>
            <fx:String>Morbi fermentum convallis erat. Donec a lacinia nisi. Curabitur vitae nibh ante, interdum rhoncus nisi.</fx:String>
            <fx:String>Sed id risus non risus lobortis aliquet. Nam iaculis, mi scelerisque tempor faucibus, justo leo dignissim erat, id elementum dolor tellus vitae metus.</fx:String>
            <fx:String>Ut a nisi at sapien pellentesque faucibus.</fx:String>
        </s:ArrayCollection>
    </fx:Declarations>
 
    <s:List id="lst1"
            dataProvider="{arrColl}"
            alternatingItemColors="[#FFFFFF, #EEEEEE]"
            textAlign="justify"
            width="200" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify"
                    gap="0"
                    requestedRowCount="4"
                    variableRowHeight="true" />
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:RichText text="{data}"
                            textIndent="20"
                            width="100%"
                            lineBreak="toFit"
                            paddingLeft="5" paddingRight="5"
                            paddingTop="5" paddingBottom="5" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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

  1. 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!

    1. @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

  2. 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");

Comments are closed.