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 <f...@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
