2013/10/28

Flex:: Spark Listコントロールにセクションヘッダーを付ける方法

Flex 4:10:: Spark Listコントロールにセクション（グループ）ヘッダーを付ける方法を紹介します。

色々とサンプルもありましたが、私が探せたサンプルは全て、データ自体に「A, B...」などのヘッダー情報が入っていました。サンプルの場合は、ヘッダー情報が入ったデータを作ればいいのですが、データベースからデータを取ってくることが多い実際の状況では、そのデータにヘッダー情報が入っているということはありません。

なので、データベースから取ってきたヘッダー情報のないデータに自分でこのヘッダー情報を付け足してやる処理を入れてやることでセクション（グループ）ヘッダーを実装します。（サンプルのデータはArrayCollectionで作っていますが、実際のデータと同じように、ヘッダー情報（A, B...）などは入れていません。なので、SQLiteを使用する場合はこのArrayCollectionにSQLiteから取ってきたデータをそのまま渡せば同じようにできます。）

■結果（画像）


■結果（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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      initialize="initializeHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.collections.ArrayList;
   import mx.collections.Sort;
   import mx.collections.SortField;
   import mx.events.FlexEvent;
   
   [Bindable]
   private var m_arrList:ArrayList;
   
   protected function initializeHandler(event:FlexEvent):void
   {
    var arrColl:ArrayCollection = new ArrayCollection;
    
    arrColl.addItem({strFirstName:"Ken",  strLastName:"Akai"});
    arrColl.addItem({strFirstName:"Yuki", strLastName:"Suzuki"});
    arrColl.addItem({strFirstName:"Keiko", strLastName:"Nagano"});
    arrColl.addItem({strFirstName:"Ryouta", strLastName:"Shindo"});
    arrColl.addItem({strFirstName:"Kazuki", strLastName:"Watanabe"});
    arrColl.addItem({strFirstName:"Yuki", strLastName:"Tanaka"});
    arrColl.addItem({strFirstName:"Megumi", strLastName:"Asai"});
    arrColl.addItem({strFirstName:"Syota", strLastName:"Saito"});
    arrColl.addItem({strFirstName:"Akito", strLastName:"Nagase"});
    arrColl.addItem({strFirstName:"Akira", strLastName:"Kinoshita"});
    arrColl.addItem({strFirstName:"Jun", strLastName:"Nitta"});
    arrColl.addItem({strFirstName:"Ippei", strLastName:"Kusunoki"});
    arrColl.addItem({strFirstName:"Ichiro", strLastName:"Ohta"});
    arrColl.addItem({strFirstName:"Aki", strLastName:"Takeda"});
    arrColl.addItem({strFirstName:"Yuriko", strLastName:"Kida"});
    arrColl.addItem({strFirstName:"Juri", strLastName:"Ohnishi"});
    arrColl.addItem({strFirstName:"Ann", strLastName:"Tendo"});
    
    
    sortArrayCollection(arrColl, "strLastName");
    addHeaderToArrayCollection(arrColl);
   }
   
   private function sortArrayCollection(a_arrColl:ArrayCollection, a_strSortField:String):void
   {
    var dataSortField:SortField = new SortField();
    dataSortField.name = a_strSortField;
    //dataSortField.numeric = true;
    
    var dataSort:Sort = new Sort();
    
    dataSort.fields = [dataSortField];
    
    a_arrColl.sort = dataSort;
    a_arrColl.refresh();
   }
   
   private function addHeaderToArrayCollection(a_arrColl:ArrayCollection):void
   {
    m_arrList = new ArrayList;
    var strLastChar:String = ""
    
    for (var index:Number = 0; index < a_arrColl.length; index++)
    {
     if (strLastChar === (a_arrColl[index]["strLastName"] as String).charAt(0))
     {
      m_arrList.addItem({strFirstName:a_arrColl[index]["strFirstName"],
       strLastName:a_arrColl[index]["strLastName"],
       HEADER:false});
     }
     else
     {
      strLastChar = (a_arrColl[index]["strLastName"] as String).charAt(0);
      
      m_arrList.addItem({strFirstName:a_arrColl[index]["strFirstName"],
       strLastName:a_arrColl[index]["strLastName"],
       HEADER:true});
     }
    }
   }
   
   
  ]]>
 </fx:Script>
 
 <s:List width="200" height="250"
   itemRenderer="CustomItemRenderer"
   dataProvider="{m_arrList}">
 </s:List>
 
</s:Application>


■ソースコード（カスタム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
<?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 == null)
     return;
    
    setText(value);
    setBackgroundColor();
   }
   
   private function setText(a_objValue:Object):void
   {
    if ((a_objValue.HEADER as Boolean))
    {
     lblHeader.includeInLayout = lblHeader.visible  = true;
     lblHeader.text = (a_objValue.strLastName as String).charAt(0);
    }
    else
    {
     lblHeader.includeInLayout = lblHeader.visible = false;
     lblHeader.text = "";
    }
    
    lblName.text = a_objValue.strLastName + " " + a_objValue.strFirstName;
   }
   
   private function setBackgroundColor():void
   {
    myBGColor = ((itemIndex % 2) == 0) ? 0xFFFFFF : 0xFFF8E3; 
   }
  ]]>
 </fx:Script>
 
 <s:VGroup width="100%" gap="0">
  <s:Label id="lblHeader" 
     width="100%"
     includeInLayout="false"
     color="0xFFFFFF" backgroundColor="0x000000"
     paddingTop="1" paddingLeft="5"
     fontSize="12"/>
  <s:Label id="lblName"
     width="100%"
     backgroundColor="{myBGColor}"
     paddingTop="10" paddingBottom="10" paddingLeft="10"
     textAlign="left"
     fontSize="15"/>
 </s:VGroup>
</s:ItemRenderer>


http://flexponential.com/2009/12/20/disable-selection-on-some-items-in-a-spark-list/
http://flexponential.com/2010/11/30/grouping-items-in-a-flex-mobile-list/
http://www.tink.ws/blog/flex-4-excludeselectionlist/
http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/
Labels: , , ,

0 件のコメント:

コメントを投稿

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