Sencha Touch - Supporto cronologia

Sencha Touch viene fornito con supporto cronologico completo e funzionalità di deep linking.

Ha la più semplice funzionalità del pulsante Indietro, che aiuta l'utente a navigare tra le schermate, senza nemmeno aggiornare la pagina o l'applicazione.

Fornisce inoltre funzionalità di route, che aiutano l'utente a navigare verso qualsiasi URL. In base all'URL fornito nella finestra del browser, richiama funzioni specifiche per eseguire un'attività specifica.

Guarda il seguente esempio per la funzionalità del pulsante Indietro.

Questo esempio mostra l'elenco nidificato che non è altro che un elenco all'interno di un elenco, quindi quando fai clic su uno qualsiasi degli elementi dell'elenco, si apre un altro elenco e un pulsante Indietro appare nella parte superiore dello schermo.

Per la base di codice completa, è possibile controllare Elenco annidato nella sezione del componente di visualizzazione.

Routing

Il più semplice esempio di percorsi

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

Nell'esempio sopra, se l'URL del browser è https://myApp.com/#login, verrà chiamata la funzione showLogin.

Possiamo fornire parametri nell'URL e in base al parametro specifico la funzione può essere chiamata. Ad esempio, se l'URL è https://myApp.com/#user/3, verrà chiamata un'altra funzione userId e l'ID specifico potrà essere utilizzato all'interno delle funzioni.

Avanzamento del percorso

A volte abbiamo parametri avanzati che includono virgola, spazi vuoti e caratteri speciali ecc. Per questo, se usiamo il modo sopra per scrivere rotte, allora non funzionerà. Per risolvere questo problema, Sencha touch fornisce un instradamento condizionale in cui è possibile specificare la condizione del tipo di dati che il parametro deve accettare.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Quindi, come nell'esempio sopra, abbiamo dato regex nella condizione che indica chiaramente quale tipo di dati dovrebbe essere consentito come parametro URL.

Condivisione dello stesso URL su diversi profili del dispositivo

Poiché Sencha touch fornisce il profilo del dispositivo in modo che lo stesso codice dell'applicazione possa essere utilizzato su più dispositivi, potrebbero esserci possibilità che profili diversi possano avere funzionalità diverse per lo stesso URL.

Per risolvere questo problema Sencha touch ci dà la libertà di scrivere il routing nel controller principale e la funzione chiamata da scrivere in tutto il profilo con i loro profili specifici.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Come mostra un esempio, abbiamo un controller principale che ha la funzione showLogin e abbiamo due diversi profili (telefono / tablet). Entrambi i profili hanno la funzione showLogin con codice diverso specifico per il profilo.

In questo modo possiamo condividere lo stesso URL su più dispositivi di profilo con le loro funzionalità specifiche.