(MXML) Spark ComboBoxSkin class with reveal animation - LeeProbert

Mon, 16 Aug 2010 02:09:45 GMT

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.

Snipplr

(MXML) Spark ComboBoxSkin class with reveal animation - LeeProbert