Posted By

LeeProbert on 08/16/10


Tagged

effect scroller ComboBox spark reveal ComboBoxSkin PopUpAnchor


Versions (?)

Spark ComboBoxSkin class with reveal animation


 / Published in: MXML
 

This is a spark skin for a simple ComboBox but to make the content of the drop down slide down when you open the combo there\'s a few hoops you need to jump through.\r\n\r\nUsually the PopUpAnchor object has an includeIn property set to the \'open\' state of the skin. This means the content transition needs to be set for it to have any effect when it appears. You can use a simple fade or scale but most people want to see the pop-up \'drop down\' maybe with a slide and some easing. To do this you need to use the Move effect and animate the position of the content as it moves into place.\r\n\r\nThis effect happens by making sure the content is within a group that has its clipAndEnableScrolling property set to true so the content is masked. Now that should be as straightforward as it gets BUT there\'s a problem.\r\n\r\nWhen the \'open\' state is first initiated the popup content is instantiated and takes a few ticks to be created and have its height measured so we can use this number in our Move effect.\r\n\r\nSo we need to listen for the state change and detect if the content is created before starting the effect. If it isn\'t we need to listen to the creationComplete handler to determine the height and then run the effect.\r\n\r\nThis is a simple hack that assumes you\'re not going to change the height of the Scroller object on the fly. If this were the case you\'d probably have to adjust the popupHeight property using the commitProperties handler of the scroller instead.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. ADOBE SYSTEMS INCORPORATED
  4. Copyright 2008 Adobe Systems Incorporated
  5. All Rights Reserved.
  6. NOTICE: Adobe permits you to use, modify, and distribute this file
  7. in accordance with the terms of the license agreement accompanying it.
  8. -->
  9. <!--- The default skin class for the Spark ComboBox component.
  10. The skin for the anchor button for a ComboBox component
  11. is defined by the ComboBoxButtonSkin class. The skin for the text input
  12. is defined by the ComboBoxTextInputSkin class.
  13. @see spark.components.ComboBox
  14. @see spark.skins.spark.ComboBoxButtonSkin
  15. @langversion 3.0
  16. @playerversion Flash 10
  17. @playerversion AIR 1.5
  18. @productversion Flex 4
  19. -->
  20. <s:SparkSkin
  21.  
  22. xmlns:fx="http://ns.adobe.com/mxml/2009"
  23. xmlns:s="library://ns.adobe.com/flex/spark"
  24. xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
  25. alpha.disabled=".5"
  26. >
  27.  
  28. <!-- host component -->
  29. <fx:Metadata>
  30. <![CDATA[
  31. /**
  32. * @copy spark.skins.spark.ApplicationSkin#hostComponent
  33. */
  34. [HostComponent("spark.components.ComboBox")]
  35. ]]>
  36. </fx:Metadata>
  37.  
  38. <fx:Script>
  39. <![CDATA[
  40. import mx.events.FlexEvent;
  41. import mx.events.StateChangeEvent;
  42.  
  43. [Bindable]
  44. protected var popupStartPosition:Number;
  45. [Bindable]
  46. protected var popupHeight:Number;
  47.  
  48. protected var isDataGroupCreated:Boolean;
  49. //----------------------------------------------------------------------------
  50.  
  51. static private const exclusions:Array = ["popUp"];
  52.  
  53. /**
  54. * @private
  55. */
  56. override public function get colorizeExclusions():Array {return exclusions;}
  57.  
  58. //----------------------------------------------------------------------------
  59. override protected function initializationComplete():void
  60. {
  61. useChromeColor = true;
  62.  
  63. super.initializationComplete();
  64. }
  65.  
  66. //----------------------------------------------------------------------------
  67. protected function stateChangeHandler(event:StateChangeEvent):void
  68. {
  69. if(event.newState == "open")
  70. {
  71. popUp.displayPopUp = true;
  72.  
  73. if(scroller && isDataGroupCreated) openPop.play();
  74. }
  75. else if(scroller && event.newState == "normal" && isDataGroupCreated)
  76. {
  77. closePop.play();
  78. }
  79. }
  80. //-----------------------------------------------------------------------------
  81. protected function dataGroup_creationCompleteHandler(event:FlexEvent):void
  82. {
  83. popupStartPosition = scroller.y;
  84. popupHeight = scroller.height;
  85.  
  86. isDataGroupCreated = true;
  87.  
  88. if(currentState == "open") openPop.play();
  89. }
  90.  
  91. ]]>
  92. </fx:Script>
  93.  
  94. <s:states>
  95. <s:State name="normal" />
  96. <s:State name="open" />
  97. <s:State name="disabled" />
  98. </s:states>
  99.  
  100. <fx:Declarations>
  101.  
  102. <s:Power id="powerEaser" />
  103.  
  104. <s:Move
  105.  
  106. id="openPop"
  107. target="{scroller}"
  108. easer="{powerEaser}"
  109. duration="300"
  110. yFrom="{popupStartPosition-popupHeight}"
  111. yTo="{popupStartPosition}"
  112. />
  113.  
  114. <s:Move
  115.  
  116. id="closePop"
  117. target="{scroller}"
  118. easer="{powerEaser}"
  119. duration="300"
  120. effectEnd="{popUp.displayPopUp = false}"
  121. yFrom="{popupStartPosition}"
  122. yTo="{popupStartPosition-popupHeight}"
  123. />
  124.  
  125. </fx:Declarations>
  126.  
  127. <s:PopUpAnchor
  128.  
  129. id="popUp"
  130. displayPopUp.normal="false"
  131. displayPopUp.open="true"
  132. left="0" right="0" top="0" bottom="0"
  133. popUpPosition="below"
  134. popUpWidthMatchesAnchorWidth="true"
  135. >
  136.  
  137. <s:Group
  138.  
  139. id="dropDown"
  140. clipAndEnableScrolling="true"
  141. >
  142.  
  143. <s:Scroller
  144.  
  145. id="scroller"
  146. left="0" top="0" right="0" bottom="0"
  147. hasFocusableChildren="false"
  148. >
  149. <s:DataGroup
  150.  
  151. id="dataGroup"
  152. itemRenderer="skins.list.SC_ListItemRenderer"
  153. >
  154. <s:layout>
  155. <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
  156. </s:layout>
  157. </s:DataGroup>
  158. </s:Scroller>
  159.  
  160. </s:Group>
  161. </s:PopUpAnchor>
  162.  
  163. <s:Button
  164.  
  165. id="openButton"
  166. width="20"
  167. height="20"
  168. right="0"
  169. top="0"
  170. bottom="0"
  171. focusEnabled="false"
  172. skinClass="skins.comboBox.SC_ComboBoxButtonSkin"
  173. />
  174.  
  175. <s:TextInput
  176.  
  177. id="textInput"
  178. text="Choose ..."
  179. height="20"
  180. left="0"
  181. right="20"
  182. top="0"
  183. bottom="0"
  184. focusEnabled="false"
  185. skinClass="skins.comboBox.SC_ComboBoxTextInput"
  186. />
  187.  
  188. </s:SparkSkin>

Report this snippet  

You need to login to post a comment.