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 Fri, 20 Jan 2012 19:27:55 GMT
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/ 
>>> >
>>>>> 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