Home > Flex > All Close Accordion

Accordionを使った事のある人なら一度は考えた事があるかも知れません。
全てのヘッダを閉じるAccordionです。

Accordionでは、いずれかのヘッダが必ず選択されている状態になり、全てを閉じる事は出来ません。
以下のサンプルではAccordionを継承したカスタムクラスにて、全てのヘッダが閉じている様に見える状態を擬似的に作り出しています。

AccordionCustom.as

PLAIN TEXT
CODE:
  1. package io.mx.containers {
  2.  
  3. import flash.events.TimerEvent;
  4. import flash.events.Event;
  5. import flash.events.MouseEvent;
  6. import flash.utils.Timer;
  7. import mx.core.Container;
  8. import mx.core.IDataRenderer;
  9. import mx.containers.Accordion;
  10. import mx.containers.accordionClasses.AccordionHeader;
  11. import mx.containers.Canvas;
  12. import mx.controls.Button;
  13. import mx.events.ChildExistenceChangedEvent;
  14. import mx.events.EffectEvent;
  15. import mx.events.IndexChangedEvent;
  16. import mx.effects.Move;
  17.  
  18. public class AccordionCustom extends Accordion {
  19.  
  20. private var indexChanged:Boolean = false;
  21. private var csSelectIndex:int = 0;
  22. private var dummyHeader:Boolean = false;
  23.  
  24. function AccordionCustom():void {
  25. super();
  26.  
  27. addEventListener(MouseEvent.CLICK, clickHandler);
  28. addEventListener(IndexChangedEvent.CHANGE, headerChangeHandler);
  29.  
  30. }
  31.  
  32. private function clickHandler(event:Event):void {
  33. if (event.target is AccordionHeader) {
  34. if ((csSelectIndex == super.selectedIndex) && ! indexChanged) {
  35. allClose();
  36. }
  37. }
  38.  
  39. indexChanged = false;
  40. }
  41.  
  42. private function headerChangeHandler(event:Event):void {
  43.  
  44. if (dummyHeader && (super.selectedIndex != (numChildren - 1))) {
  45. removeDummyAccordionHeaderTimer();
  46. }
  47.  
  48. csSelectIndex = super.selectedIndex;
  49.  
  50. indexChanged = true;
  51. }
  52.  
  53. public function allClose():void {
  54. addDummyAccordionHeader();
  55. super.selectedIndex = numChildren -1;
  56.  
  57. csSelectIndex = super.selectedIndex;
  58. }
  59.  
  60. private function addDummyAccordionHeader():void {
  61.  
  62. if (! dummyHeader) {
  63. addChild(new Canvas());
  64. getHeaderAt(numChildren - 1).visible = false;
  65.  
  66. dummyHeader = true;
  67. }
  68. }
  69.  
  70. private function removeDummyAccordionHeaderTimer():void {
  71. var timer:Timer = new Timer(1, 1500);
  72. timer.addEventListener(TimerEvent.TIMER, timerHandler);
  73. timer.start();
  74.  
  75. function timerHandler(event:Event):void {
  76. if (! getChildAt(numChildren - 1).visible) {
  77.  
  78. (event.target as Timer).stop();
  79. (event.target as Timer).removeEventListener(TimerEvent.TIMER, timerHandler);
  80.  
  81. var targetArray:Array = new Array();
  82. var startIdx:int = selectedIndex + 1;
  83. var endIdx:int = numChildren - 1;
  84. for(var i:int = startIdx; i <endIdx; i ++) {
  85. targetArray.push(getHeaderAt(i));
  86. }
  87. if (targetArray.length> 0) {
  88. var move:Move = new Move();
  89. move.yBy = getHeaderAt(i).measuredHeight;
  90. move.addEventListener(EffectEvent.EFFECT_END, effectEnd);
  91. move.suspendBackgroundProcessing = true;
  92. move.duration = 100;
  93. move.play(targetArray);
  94. } else {
  95. removeDummyAccordionHeader();
  96. }
  97.  
  98. if (csSelectIndex> (numChildren - 1)) {
  99. csSelectIndex --;
  100. }
  101. }
  102.  
  103. function effectEnd(event:Event):void {
  104. removeDummyAccordionHeader();
  105. }
  106. }
  107. }
  108.  
  109. private function removeDummyAccordionHeader():void {
  110. if (dummyHeader) {
  111. removeChildAt(numChildren - 1);
  112.  
  113. dummyHeader = false;
  114. }
  115. }
  116. }
  117. }

表示用サンプル
Main.mxml

PLAIN TEXT
XML:
  1. <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="io.mx.containers.*">
  2. <ns1:accordioncustom x="70" y="60">
  3. <mx:canvas label="ヘッダ１" width="100%" height="135">
  4. <mx:datagrid x="0" y="0" width="198" height="180">
  5. <mx:columns>
  6. <mx:datagridcolumn headertext="列 1" datafield="col1">
  7. <mx:datagridcolumn headertext="列 2" datafield="col2">
  8. <mx:datagridcolumn headertext="列 3" datafield="col3">
  9. </mx:datagridcolumn>
  10. </mx:datagridcolumn>
  11. </mx:datagridcolumn>
  12. <mx:canvas label="ヘッダ２" width="100%" height="100%">
  13. <mx:combobox x="10" y="10"></mx:combobox>
  14. <mx:combobox x="10" y="40"></mx:combobox>
  15. <mx:combobox x="10" y="70"></mx:combobox>
  16. </mx:canvas>
  17. <mx:canvas label="ヘッダ３" width="100%" height="241">
  18. <mx:datechooser x="0" y="0" width="198" height="146">
  19. </mx:datechooser>
  20. </mx:canvas>
  21. </mx:columns>

実行してみる
※Flashプレイヤーの9.0以降がインストールされている必要があります。