Flex spark Listコンポーネントの使い方

Flex spark Listコンポーネントの使い方を紹介します。

手順
１．Listコンポーネントを配置
２．dataproviderを設定（ArrayList, ArrayCollection, XMLデータ、SQLデータ）
※今回は単純にArrayListを使いますが、XMLファイルやデータベースのデータをここにデータバインディングしてやることもできます。
３．ItemRendererを設定（ItemRenderer, LabelItemRenderer, IconItemRendererなど）
※ItemRendererはカスタムで作成することもできます。これは次回説明します。

■結果

■ソースコード

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Normal"> <s:List width="100%" height="100%"> <s:dataProvider> <s:ArrayList> <fx:String>テストアイテム１</fx:String> <fx:String>テストアイテム２</fx:String> <fx:String>テストアイテム３</fx:String> <fx:String>テストアイテム４</fx:String> <fx:String>テストアイテム５</fx:String> <fx:String>テストアイテム６</fx:String> <fx:String>テストアイテム７</fx:String> <fx:String>テストアイテム８</fx:String> <fx:String>テストアイテム９</fx:String> </s:ArrayList> </s:dataProvider> <s:itemRenderer> <fx:Component> <s:ItemRenderer> <s:Label text="{data}"/> </s:ItemRenderer> </fx:Component> </s:itemRenderer> </s:List> </s:View>

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/List.html
http://flexponential.com/2009/11/02/different-ways-of-assigning-an-item-renderer-in-flex-4/