2013/10/26

Flex:: Spark Listのアイテムをクリックして追加情報を表示させる方法

Flex 4.10:: Spark Listのアイテムをクリックした時に、その下に追加情報をアニメーションさせながら表示させる方法を紹介します。

ItemRendererをカスタムして、追加情報にしたいアイテムをstateが"normal"の時は非表示にして、stateが"selected"の時は表示にするプログラムを書きます。
さらに、アニメーションを追加してスライドしながら表示させるようにします。
選択したアイテムを再クリックするとスライドしながら閉じます。（この処理についてはこちらの記事参照）

■ソースコード（メイン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
<?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"
   alternatingItemColors="[0xFFFFFF, 0xEFECCA]" 
   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
<?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">
 
 <s:states>
  <s:State name="normal"/>
  <s:State name="selected"/>
 </s:states>
 
 <s:transitions>
  <s:Transition fromState="normal">
   <s:Sequence duration="300">
    <s:Resize target="{this}"/>
   </s:Sequence>
  </s:Transition>

  <s:Transition fromState="selected">
   <s:Sequence duration="300">
    <s:Resize target="{this}"/>
   </s:Sequence>
  </s:Transition>
 </s:transitions>
 
 <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>


http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d38313b7ce1c129eb7d5e04-8000.html
Labels: , , ,

0 件のコメント:

コメントを投稿

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