incubator-flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Jeffry Houser <jef...@dot-com-it.com>
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 
listeners]:

                 
dataGroup.addEventListener(RendererExistenceEvent.RENDERER_ADD, 
dataGroup_rendererAddHandler_Extended);
                 
dataGroup.addEventListener(RendererExistenceEvent.RENDERER_REMOVE, 
dataGroup_rendererRemoveHandler_Extended);

[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 
event.

         protected function 
dataGroup_rendererAddHandler_Extended(event:RendererExistenceEvent):void
         {
             var index:int = event.index;
             var renderer:IVisualElement = event.renderer;

             if (!renderer)
                 return;

             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
             super.item_mouseDownHandler(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
             super.mouseUpHandler(event);
         }


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

         override protected function 
item_mouseDownHandler(event:MouseEvent):void
         {
             // 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 
projects.

  You can see our web sample: 
https://www.flextras.com/MobileComponents/Samples/MobileDropDownList/
  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 <flex@tink.ws> 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 
>>> CLOSE
>>> the dropDown.
>>>
>>> http://svn.apache.org/viewvc/**incubator/flex/whiteboard/**
>>> tink/mobile_dropdownlist/<http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/mobile_dropdownlist/>

>>>
>>>
>>> cheers
>>>
>>> Tink
>
>
>


-- 
Jeffry Houser
Technical Entrepreneur
203-379-0773
--
http://www.flextras.com?c=104
UI Flex Components: Tested! Supported! Ready!
--
http://www.theflexshow.com
http://www.jeffryhouser.com
http://www.asktheflexpert.com
--
Part of the DotComIt Brain Trust


Mime
View raw message