On 18 Jan 2012, at 02:27, Jeffry Houser wrote:
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.
--
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
Hey Jeffry
I'm proposing we fix the bug in DropDownListBase.
This fix requires 2 additional 'if' statements and 2 extra lines of
code.
It means the DropDownList will continue to work the same on desktop,
but will also work on mobile.
As with all Spark based Lists in Flex, users can specify a custom
itemRenderer or custom skin.
Tink
P.S. Ryan, sorry I missed your note. I've been thinking of getting a
special event together at LFPUG in May on 'The Future of Flex' and
thought I'd see if I could get the London PPMC members down (you, me ,
Espen & Peter are all in London), although I might see If I can try
and involve Spoon as well (see "Spoon Community Call Feb 2nd" thread).
Are you still around in May, and you be up for that? Maybe I should
create a separate thread.
