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