incubator-flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Jeffry Houser <>
Subject Re: Fix to get DropDownList working on Mobile
Date Wed, 18 Jan 2012 02:27:44 GMT

  The Flextras Mobile DropDownList extends the Flex DropDownList.   The 
problems related to how the drop down opens and closes with mouse up and 
mouse down events.  I had a lot of weird issues trying to get that to 
work.  I ended up remapping everything to mouse click.

  This is how we got it working on mobile:

1) In partAdded, I added event listeners for [partRemoved removed said 


[These lines are 'from' the similar to what happens in the list 
class--up the hierarchy.  The dataGroup adds event listeners for the 
dataGroup_rendererAddHandler method which adds an event listener to a 
**private** method item_mouseEventHandler.  I'm pretty sure the private 
mouse event handler was the problem; but memory is hazy.

2) The dataGroup_rendererAddHandler_Extended method is based on the 
dataGroup_RendererAddHandler method.  Except I'm listening for the click 

         protected function 
             var index:int = event.index;
             var renderer:IVisualElement = event.renderer;

             if (!renderer)

             renderer.addEventListener(MouseEvent.CLICK, item_clickHandler);

3) the item_ClickHandler makes use of the super methods for handling the 
opening and closing the DropDownList:

         protected function item_clickHandler(event:MouseEvent):void{
             // this is a replacement for the mouse down handler;
             // so we do actualy want to run the mouse down handler code 
in this mouse click event

             // immediately call the mouse up handler; because it seems 
to be holding off selection until the
             // mouse up event fires; which doesn't appear to happen

4) And then make sure the mouse down handler does nothing:

         override protected function 
             // do nothing because mouse up and mouse down handlers 
don't work quite right on mobile devices
             // rewrote all of this to use the click event

  I've had clients use our extended component both in web and mobile 

  You can see our web sample:
  The default is like a traditional Flex DropDownList.
  But, click the Change Renderer button and select Radio Button 
Renderer; then select Change Skins and select Pop Up Skin 2.   that is 
my preferred approach.

  We ended up adding a bunch of extra skin parts; and a handful of 
ActionScript skin options; but I'd love to make the SDK handle the 
mobile / touch use case a lot easier.

  I'll see if I can get something simple checked in either tomorrow or 
Thursday.  Unfortunately today slipped by without me trying to figure 
out my SVN access and all that.

On 1/17/2012 7:04 PM, Tink wrote:
>> On Tue, Jan 17, 2012 at 11:18 PM, Tink <> wrote:
>>> I've but an example up of what I believe could be a very simple fix 
>>> for a
>>> DropDownList working on mobile (obviously I'll put an AS skin 
>>> together if
>>> you guys are interested in this fix).
>>> On desktop the item is selected on mouse down and the drop down closed.
>>> This doesn't work on mobile as the user may be scrolling the list, and
>>> therefore the committing of the selected index doesn't happen until 
>>> mouse
>>> up.
>>> I propose that in the override item_mouseDownHandler and we check the
>>> interactionMode. If it's "touch" we don't set  
>>> userProposedSelectedIndex
>>> and we DON'T CLOSE the dropDown, not not touch it carries on as normal,
>>> hopefully not introducing any new bugs.
>>> We add an override for,  setSelectedIndex call super then check the
>>> interactionMode. If it's touch, set userProposedSelectedIndex and we 
>>> the dropDown.
>>> tink/mobile_dropdownlist/<>

>>> cheers
>>> Tink

Jeffry Houser
Technical Entrepreneur
UI Flex Components: Tested! Supported! Ready!
Part of the DotComIt Brain Trust

View raw message