2013/10/14

Flex: カスタムItemRendererの作成＆使用方法

Flex: 4.10
 以前、ItemRenderer, LabelItemRenderer, IconItemRendererについて説明しました。これで標準的なことはほとんど出来るはずですが、やっぱり自分で自由にコンポーネントを配置したり、表示方法を変えたいですよね。なので、今回、ItemRendererのカスタム方法を紹介します。

■メインソースコード
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<?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="Custom"
  xmlns:myclasses="myclasses.*">
 
 <s:List width="100%" height="100%"
   itemRenderer="views.itemrenderers.CustomItemRenderer">
  <s:dataProvider>
   <s:ArrayList>
    <myclasses:Person firstName="Taro" lastName="Sato" faceIcon="@Embed('assets/images/face1.png')"/>
    <myclasses:Person firstName="Toshi" lastName="Takeda" faceIcon="@Embed('assets/images/face2.png')"/>
    <myclasses:Person firstName="Miku" lastName="Kishi" faceIcon="@Embed('assets/images/face3.png')"/>
    <myclasses:Person firstName="Ai" lastName="Ito" faceIcon="@Embed('assets/images/face4.png')"/>
   </s:ArrayList>
  </s:dataProvider>
 </s:List>
</s:View>

■カスタムItemRendererソースコード
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark">
 
 <s:layout>
  <s:HorizontalLayout verticalAlign="middle"
       paddingLeft="5" paddingRight="5"
       paddingTop="5" paddingBottom="5" />
 </s:layout>
 <s:BitmapImage source="{data.faceIcon}" />
 <s:Label text="{data.firstName}"
    width="100%"
    maxDisplayedLines="1"
    showTruncationTip="true" />
 <s:Label text="{data.lastName}"
    width="100%"/>
</s:ItemRenderer>

メイン側のListコンポーネントのItemRendererプロパティにカスタムItemRendererのパスを設定します。
カスタムItemRenderer側に自由にLabelやBitmapImageなどを配置・設定できます。

あ、データバインディングの警告を回避するための自前クラス作成と[Bindable]の設定をお忘れなく。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
package myclasses
{
 public class Person extends Object
 {
  [Bindable]
  public var firstName:String;
  
  [Bindable]
  public var lastName:String;
  
  [Bindable]
  public var faceIcon:Class;
 }
}


Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)