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

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).


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.

View raw message