Testing gestures and events in Titanium [Article]
05 May 2013
A little warning: you should not use click or dblclick when you are building an application for mobile devices with Appcelerator Titanium. You'll know why if you read more:) I begin this article saying this because most of the examples you'll see in docs or tutorials uses the click event (at the time I am writing this article) and can be misleading.
You can test the gestures with a small Titanium app I've done. You can find the code on github.
Which are the user gestures and their corresponding eventname in Appcelerator Titanium API?
- click
- dblclick
- doubletap
- keypressed (maybe only for Android?)
- longclick
- longpress
- pinch
- singletap
- swipe
- touchcancel (for what I've read until now, this is not something that a user can trigger)
- touchend
- touchmove
- touchstart
- twofingertap
Real gestures and the associated events when all events have been bound to the same view:
- One short touch on the screen
- (what we think is a singletap or click)
- Will fire: touchstart, touchend, click, singletap (and often touchmove between touchstart and touchend)
- click and singletap events are fired when the finger is lifted
- Keeping the finger on the screen for a while (without moving it)
- (what we think as a longclick or longpress)
- Will fire: touchstart, probably various touchmove (due to our imperfect movements), longclick, longpress
- longclick and longpress are fired after
- the touchend event will be fired once the finger is lifted
- Two short touches/taps on the screen with one finger
- (what we think is a double click or a doubletap)
- will fire: touchstart, some touchmove probably (our movement is not perfect), touchend, click, doubletap, dblclick, touchend
- Keeping the finger on the screen and moving it in any direction on the screen
- will fire: touchstart, touchmove (repeatedly while moving the fingers), longclick
- once the finger is lifted, the swipe event will be fired (always on my Android/Htc Sensation)
- there is no touchend event fired (it's "replaced" by the swipe event)
Putting two fingers on the screen and moving them away from each other, or closer to each other
- (what we think is a pinch, often associated with some zoomin, zoomout action)
- will fire: touchstart, pinch (repeatedly while moving the fingers)
sometimes it can also fire:
- swipe (probably because one finger is lifted before the other)
- click, singletap
- longpress, longclick (depends on the duration of the movement)
once the fingers are lifted, the touchend event will be fired
- note: actually you can move fingers in parallel and this will fire pinch too. Probably because our movements are not perfect.
Observations:
The difference between click and singletap on a mobile
The difference is how they react to a real longpress from a user. 'Singletap' won't be fired when the user keeps his finger on the screen for a while and then removes it. On the contrary 'click' will be fired once the user lift his fingers.
The difference between longclick and longpress on a mobile
If the user touches and moves its finger on the screen, longclick will be fired after a while. longpress won't.
Events that might lead to unexpected results when added to the same view:
- singletap, click, dblclick, doubletap
- If you want a different behaviour for a single touch and a double touch, don't use click and doubleclick because touching twice the screen with the intention of triggering a dlbclick event will result in triggering a click event too.
- since we are talking mobile, you won't have any problem, use singletap and doubletap together
- longclick, swipe
- since longclick will be fired even when the finger is moved, it will be fired if the swipe gesture of the user reaches the longclick threshold time.
- use longpress instead
Better UI response for the user:
While the natural way of thinking would be to add the classic "click" or "singletap" on a button, these events are fired after that the user has lift his/her finger. This takes some milliseconds to the user actually, (ninjas might be faster).
But think of it as switching the light on, usually you don't have to remove your finger before you get the light.
So, let's talk about "touchstart": it is fired as soon as the user touch the button / view. Binding some function to this event will provide an interface that looks more responsive. (a few milliseconds matter, try it :) Obviously, to avoid problems you have to know how the users will use your app, so remember that binding touchstart and another event might result in a conflict since touchstart will always be fired first.
note: while the above is true for "single type" event, when using dblclick / doubletap, those events are fired when the user touches the screen the second time. So there is not this "wait for the finger to be lifted" that click/singletap events have.
