advanced code snippet search

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.

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

Report this snippet  

You need to login to post a comment.