2013/10/13

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

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

手順
1.Listコンポーネントを配置
2.dataproviderを設定(ArrayList, ArrayCollection, XMLデータ、SQLデータ)
※今回は単純にArrayListを使いますが、XMLファイルやデータベースのデータをここにデータバインディングしてやることもできます。
3.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>テストアイテム1</fx:String>
    <fx:String>テストアイテム2</fx:String>
    <fx:String>テストアイテム3</fx:String>
    <fx:String>テストアイテム4</fx:String>
    <fx:String>テストアイテム5</fx:String>
    <fx:String>テストアイテム6</fx:String>
    <fx:String>テストアイテム7</fx:String>
    <fx:String>テストアイテム8</fx:String>
    <fx:String>テストアイテム9</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/

0 件のコメント:

コメントを投稿