2013/10/27

Flex:: Spark Listコントロール(ItemRenderer)の背景色をデータによって変更する方法

Flex 4.10:: Spark Listコントロール(ItemRenderer)のアイテム背景色をデータ内容によって変更する方法を紹介します。

実際にはListコントロール自体ではなく、ItemRendererの背景色を変更することで実装します。
  1. カスタムItemRendererを作成します。（カスタムItemRenderの作成方法についてはこちらの記事を参照してください。）
  2. カスタムItemRenderの「autoDrawBackground」を「false」にします。
  3. カスタムItemRenderに「Rect」コンポーネントをセットします。（このコンポーネントにセットする色が背景色になります）
  4. データを表示させるラベルなどのコンポーネントをセットします。
  5. 「set data」functionをoverrideして、背景色をデータの条件によって変更します。

※以前紹介した「Listコントロールのアイテムをクリックした時に追加情報がアニメーションしてその下に表示される」のソースコードに追加して実装してあります。

■結果（Flashコンテンツ）
A Flash Content

■ソースコード（メインMXML）
 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
27
28
29
30
31
32
33
34
35
<?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="HomeView">
 
 <fx:Script>
  <![CDATA[
   private var lastIndex:Number = -1;
   
   protected function list_clickHandler(event:MouseEvent):void
   {
    if(list.selectedIndex == lastIndex)
     list.selectedIndex = -1;
    
    lastIndex = list.selectedIndex;
   }
  ]]>
 </fx:Script>
 
 <s:List id="list" width="100%" height="100%"
   itemRenderer="CustomItemRenderer"
   click="list_clickHandler(event)">
  <s:dataProvider>
   <s:ArrayList>
    <fx:Object firstName="Ken" lastName="Takeda" companyID="00001" phone="111-222-3333"/>
    <fx:Object firstName="Takashi" lastName="Yamamoto" companyID="00002" phone="444-555-6666"/>
    <fx:Object firstName="Noriko" lastName="Ijima" companyID="00003" phone="777-888-9999"/>
    <fx:Object firstName="Yuka" lastName="Nagase" companyID="00004" phone="000-111-2222"/>
    
    <!-- 省略 -->
    
   </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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?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" xmlns:mx="library://ns.adobe.com/flex/mx"
    autoDrawBackground="false">
 <fx:Script>
  <![CDATA[
   
   [Bindable]
   public var myBGColor:int = 0xFFFFFF;
   
   override public function set data(value:Object):void
   { 
    super.data = value;
    
    if ((value.companyID) == "00001") 
    {
     myBGColor= 0xFFFFFF;
    }
    else if  ((value.companyID) == "00002")
    {
     myBGColor= 0x00FFFF;
    }
    else if ((value.companyID) == "00003")
    {
     myBGColor= 0xFFFF00;
    }
    else
    {
     myBGColor= 0xCCFF66;
    }
   }
  ]]>
 </fx:Script>
 
 <s:states>
  <s:State name="normal"/>
  <s:State name="selected"/>
 </s:states>
 
 <s:transitions>
  <s:Transition fromState="normal">
   <s:Parallel duration="300">
    <s:Resize target="{this}"/>
   </s:Parallel>
  </s:Transition>
  <s:Transition fromState="selected">
   <s:Sequence duration="300">
    <s:Resize target="{this}"/>
   </s:Sequence>
  </s:Transition>
 </s:transitions>
 
 <s:Rect id="myRect" 
   left="0" right="0" top="0" bottom="0"> 
  <s:fill> 
   <s:SolidColor color="{myBGColor}"/> 
  </s:fill> 
 </s:Rect>     
 
 <s:VGroup width="100%"
     paddingTop="10" paddingBottom="10" paddingLeft="5"
     gap="0"
     verticalAlign="middle">
  <s:Label width="100%"
     text="{data.lastName} {data.firstName}"/>
  <s:HGroup width="100%" paddingLeft="5">
   <s:Label id="lblCompanyID"
      text="Company: {data.companyID}"
      includeIn="selected"
      paddingTop="10"/>
   <s:Label id="lblPhone"
      text="Phone: {data.phone}"
      includeIn="selected"
      paddingTop="10"/>
  </s:HGroup>
 </s:VGroup>
 
</s:ItemRenderer>


Labels: , , ,

0 件のコメント:

コメントを投稿

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