At Adobe MAX, this year, I spoke at the 360|MAX conference about touch events in Flex. Some of the topics I talked about are:
- Touch events and MultiTouch.inputMode in Flash
- Flex touch basics
- Why touch is difficult
- How Flex components coordinate to interpret and react to ambiguous touch interactions
- How to write your own code to deal with touch interactions and coordinate with other components appropriately
As part of that, I showed off two examples:
- How to create a checkmark item renderer to distinguish between down and selected in a touch environment
- How to create an item renderer that responds to a swipe gesture and shows a delete button (similar to iPhone’s email application)
Please help yourselves to the PowerPoint presentation (PPT | PDF) and the Flash Builder project with both applications. You can also play around with the first application below, and let me know if you have any questions about this. More information around touch interactions can also be found on the Mobile List, Scroller and Touch Specification.
Do you know if the session recording will be posted on AdobeTV? I don’t think unconference sessions are, which is a shame because I’d love to watch your presentation…
By the way, do you have any advice to minimize misfired clicks on itemRenderer?
I love the Flex mobile app I’m working on, but it’s one of the subject that is driving me crazy…
Hey Dimitri,
Unfortunately, there will be no recording of the presentation, but if you have questions about the preso or the files, let me know, and I’ll try to answer them.
Re: misfired clicks: what exactly are you referring to? Do you see click events when scrolling happens? What if you use the List change event instead?
I have 2 lists with listeners on click event
1 out of 8 time, the click event is not fired.
I think the problem might be that Flex think it’s either a roll-out or the beginning of a touch to scroll.
I can’t use change because, because in my use case, the user can click on the selected item again.
I have to try to dispatch the event directly from the renderer, and I have other ideas, but I figured I should ask you first…
On the subject, I found like my app is not the only Flex on device app that suffer from misfiring “tap”.
For example, one thing that iOS do well is to let devs specify a wider touch zone for your button, to let user tap on the edge of it.
You can do that with transparent rect in skins, but it’s not as fast and not as flexible.
Thus, in 4.5, it’s very unreliable to tap on beveled button, because the height of the target area is so small (I was told it’s been fixed now, so I hope 4.6 will be better on this subject)
Concerning your preso, can you elaborate a little on Buttons inside item renderers issue and usage of event.preventDefault() ?
Your slides are really interesting (I linked them in twitter – by the way, I try to find you there, and discover that I already follow you… well kinda, since your last tweet is 7 months old 😉 ).
But of course, it give the reader the envy to have the comments “between the slides” if you know what I mean.
At the last note of my chatty comment, we should really lobby Adobe to record unconference sessions (or to find sponsors who will). Every year there are a lot of subject that we are missing out because of that…
Thanks for your great blog by the way, I learned a lot because of it.
Best regards from Paris.
Per the click event, it might not be firing if you don’t mousedown and mouseup on the same display object. Trace out what those are and see if they differ. Maybe play around with mouseEnabledChildren,. Remember that click is a Flash-level event and doesn’t know anything about scrolling, so I’d be cautious when using it.
As you note, it’s not too hard to do this in Flex today. In addition, you can use hitArea, which takes another Sprite: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html#hitArea
Per Buttons and item renderers: when clicking on a button inside on an item renderer (even on the desktop), you’ll notice that the button is clicked, and the item renderer is selected, where-as the behavior you might want is just to click the button and not select the item. My point is that these issues around who’s handling the mouse event(s) occurs when using a mouser; however, they are much more pronounced when interactionMode is touch. On mouseDown in the button, if you call event.preventDefault() in mouse interactionMode, only the button will be clicked (the item won’t get selected).
I will try to tweet more 🙂
Cheers,
Ryan
Funny coincidence, an hour after my comment, I’m watching an AdobeTV max video, and they use one of your post as an example of their News feed App design process (because of the length of the post)
http://tv.adobe.com/watch/max-2011-develop/elegant-design-powered-by-the-flex-sdk/
see 12:15