Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

8. Lists and ItemRenderers > 8.4. Change the Layout of a Spark List

8.4. Change the Layout of a Spark List

Problem

You want to create a Spark List that lays itself out horizontally or in a grid.

Solution

Create a Skin class that has a DataGroup with a TileLayout, and assign it to the List.

Discussion

Any List can have a Skin class created for it that changes the layout property. Simply create a DataGroup with an id of dataGroup and change its layout type. This sets the DataGroup skinPart of the List, replacing the default vertical layout:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <fx:Metadata>
        [HostComponent("spark.components.List")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import spark.components.List;
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="selected"/>
    </s:states>

    <s:DataGroup id="dataGroup" height="{hostComponent.height}"
                 width="{hostComponent.width}">
        <s:layout><s:TileLayout clipAndEnableScrolling="true"/></s:layout>
    </s:DataGroup>
</s:Skin>

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint