incubator-flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Tink <f...@tink.ws >
Subject Re: Fix to get DropDownList working on Mobile
Date Wed, 18 Jan 2012 08:07:47 GMT
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.


Mime
View raw message