incubator-flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Cosma Colanicchia <cosma...@gmail.com>
Subject Re: Fix to get DropDownList working on Mobile
Date Wed, 18 Jan 2012 11:34:20 GMT
In some mobile projects based on AIR I ended up creating a
SkinnablePopUpContainer to provide drop down lists with a more native
feeling.

The "mobile way" of presenting a selection among a list of values is
usually obtained displaying the value of the selected item, and to
open, on touch, a popup with a scrollable list of values to change the
selection. IMO, a mobile DropDownList should be implemented with this
kind of interaction. However, I'm not sure if this can be accomplished
simply with a mobile-specific skin or if changes in the host component
are required.

As a side note, I was thinking about a mobile "form" component,
because forms in mobile apps are usually presented with a vertical
layout similar to a scrollable List (with a row for each field).


Cosma


2012/1/18 Tink <flex@tink.ws>:
> 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