incubator-flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From andrei apostolache <apostolache.and...@gmail.com>
Subject Re: Fix to get DropDownList working on Mobile
Date Sat, 21 Jan 2012 11:48:46 GMT
Hi.

For me it worked really well to close the list when it clicks outside of
it. The biggest issue for me was that I couldn't use selectedItems or
selectedIndices to set the "selected" behaviour for the item renderers.
This can be easily done by removing the exclusions of these properties in
the DropdownListBase.
If this will increase the memory usage for a simple DropDownList (maybe the
guys from Adobe had a reason to exclude these properties) than will be a
better solution to make a total different component for this type of
behavior.

Regards,
Andrei.

On Fri, Jan 20, 2012 at 7:27 PM, Tink <flex@tink.ws> wrote:

> Actually, due to DropDownList extending List, I think this would be a
> reasonable simple fix. Users would have to click outside the list to close
> it and commit the selection though, or add a new button to close it, as it
> couldn't close on selection.
>
> Tink
>
>
>
> On 20 Jan 2012, at 09:56, Tink wrote:
>
>  I would suggest an extension or DropDownList for this, as its not really
>> common functionality.
>>
>> Tink
>>
>> Ryan we really should meet up!
>>
>>
>> On 20 Jan 2012, at 09:34, andrei apostolache wrote:
>>
>>  Hi.
>>>
>>> An issue that I had with DropDownList is the exclusion of selectedItems
>>> in
>>> the DropDownListBase. I had to do some workarounds to be able to have
>>> multiple selections in a DropDownList.
>>>
>>> Regards,
>>> Andrei.
>>>
>>> On Fri, Jan 20, 2012 at 12:01 AM, Ryan Frishberg <frishy@gmail.com>
>>> wrote:
>>>
>>>  Hey Tink,
>>>>
>>>> I can't say for sure if I'll be here or not in May.  My current lease
>>>> expires in April, and if it's easy to find a short lease, I may stay a
>>>> bit
>>>> longer.  Otherwise, I'll pack myself back to the states :-)  I'll
>>>> stay-tuned for the Spoon announcement and attempt to atleast make one
>>>> London flex user group meeting.  If I can't make anything, I'll try and
>>>> arrange some drinks for the PPMC members here.
>>>>
>>>> Cheers,
>>>> Ryan
>>>>
>>>> On Wed, Jan 18, 2012 at 8:07 AM, Tink <flex@tink.ws> wrote:
>>>>
>>>>  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/<
>>>>>>
>>>>> https://www.flextras.com/**MobileComponents/Samples/**
>>>> MobileDropDownList/<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.
>>>>>
>>>>>
>>>>>
>>>>
>>
>


-- 
*
  Have a nice day,
  Andrei.
*
  <http://www.phaeria.com/>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message