Tap, swipe e drag'n drop, gli eventi legati alle gesture

Ionic consente la gestione delle tipiche gesture mobile mettendo a disposizione una serie di direttive.

on-tap

Ad esempio, per intercettare il tocco delle dita su un elemento dell'interfaccia grafica possiamo utilizzare la direttiva on-tap:

<button on-tap="elabora()">Elabora</button>

on-tap vs onclick

A prima vista la direttiva on-tap potrebbe sembrare una duplicazione della direttiva ng-click. In realtà c'è una sottile differenza di comportamento tra le due direttive dipendente dal contesto mobile in cui opera Ionic.

In linea di massima potremmo dire che l'uso di ng-click sia sufficiente per catturare il tocco delle dita sullo schermo, dal momento che esso viene assimilato al clic del mouse. Tuttavia, come descritto nel dettaglio dal team di Ionic, i browser mobile aggiungono in genere un ritardo di circa 300 ms prima di passare l'evento all'applicazione. Questo ritardo si rende necessario per poter eventualmente individuare un secondo tocco che potrebbe voler significare l'intenzione di fare uno zoom della pagina corrente. In ogni caso l'introduzione di questo delay rende di fatto meno responsive le app mobile ibride rispetto alle native. La direttiva on-tap è ottimizzata per ridurre l'impatto di tale ritardo avvicinando la responsività dell'applicazione ibrida a quella nativa.

Altre direttive touch

Oltre alla direttiva on-tap possiamo utilizzare le direttive:

Direttiva	Descrizione
on-double-tap	serve a individuare il doppio tocco sullo schermo
on-touch on-release	consentono rispettivamente di individuare l'inizio e la fine del contatto del dito sullo schermo
on-hold	individua un tocco prolungato sullo schermo, generalmente superiore a 500 ms

Direttive di gesture, drag'n'drop e swipe

Oltre alle direttive che individuano il tocco delle dita sullo schermo, possiamo utilizzare un insieme di direttive che consentono di individuare il trascinamento di elementi.

Direttiva	Descrizione
on-drag	individua un generico trascinamento
on-drag-up on-drag-right on-drag-down on-drag-left	consentono di individuare il trascinamento nelle quattro direzioni

Per le direttive di swiping abbiamo una analoga serie di direttive:

Direttiva	Descrizione
on-swipe	swipe generico
on-swipe-up on-swipe-right on-swipe-down on-swipe-left	scorrimento del dito nelle quattro direzioni

$ionicGesture

Oltre all'approccio di gestione delle gesture tramite direttive, Ionic prevede anche l'associazione da codice di un gestore ad un evento. L'associazione può essere effettuata tramite il servizio $ionicGesture. Ad esempio, il seguente codice definisce una direttiva personalizzata che applica una classe CSS in corrispondenza dell'evento hold:

myApp.directive('onHoldClass', function($ionicGesture) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      $ionicGesture.on('hold', function(e) {
		$element.addClass($attr.onHoldClass);
      	}, $element);
    }
  }
});