Sencha Touch - Verlaufsunterstützung

Sencha Touch bietet umfassende Unterstützung für den Verlauf und Deep Linking-Funktionen.

Es verfügt über die einfachste Funktion der Zurück-Schaltfläche, mit der der Benutzer zwischen den Bildschirmen navigieren kann, ohne die Seite oder Anwendung zu aktualisieren.

Es bietet auch Routenfunktionen, mit denen der Benutzer zu einer beliebigen URL navigieren kann. Basierend auf der im Browserfenster angegebenen URL werden bestimmte Funktionen aufgerufen, um eine bestimmte Aufgabe auszuführen.

Schauen Sie sich das folgende Beispiel für die Funktionalität der Zurück-Schaltfläche an.

In diesem Beispiel wird die verschachtelte Liste angezeigt, die nichts anderes als eine Liste in einer Liste ist. Wenn Sie also auf eines der Listenelemente klicken, wird eine weitere Liste geöffnet und oben auf dem Bildschirm wird eine Schaltfläche "Zurück" angezeigt.

Die vollständige Codebasis finden Sie unter Verschachtelte Liste im Abschnitt Komponenten anzeigen.

Routing

Einfachstes Beispiel für Routen

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');
   }
});

Wenn im obigen Beispiel die Browser-URL https://myApp.com/#login lautet, wird die Funktion showLogin aufgerufen.

Wir können Parameter in der URL angeben und basierend auf dem spezifischen Parameter kann die Funktion aufgerufen werden. Wenn die URL beispielsweise https://myApp.com/#user/3 lautet, wird die Benutzer-ID einer anderen Funktion aufgerufen und die spezifische ID kann innerhalb der Funktionen verwendet werden.

Weiteres Routing

Manchmal haben wir erweiterte Parameter, einschließlich Komma, Leerzeichen und Sonderzeichen usw., wenn wir die oben beschriebene Methode zum Schreiben von Routen verwenden, funktioniert dies nicht. Um dieses Problem zu lösen, bietet Sencha touch ein bedingtes Routing an, bei dem wir festlegen können, welche Art von Daten der Parameter akzeptieren soll.

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');
      }     
   }
});

Wie im obigen Beispiel haben wir Regex in der Bedingung angegeben, in der eindeutig angegeben ist, welcher Datentyp als URL-Parameter zulässig sein soll.

Gemeinsame URL für verschiedene Geräteprofile

Da Sencha touch ein Geräteprofil bereitstellt, sodass derselbe Anwendungscode auf mehreren Geräten verwendet werden kann, besteht die Möglichkeit, dass unterschiedliche Profile unterschiedliche Funktionen für dieselbe URL haben.

Um dieses Problem zu beheben, gibt uns Sencha touch die Freiheit, Routing in den Hauptcontroller zu schreiben und die aufgerufene Funktion in das gesamte Profil mit ihren profilspezifischen zu schreiben.

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');
   }
});

Wie das Beispiel zeigt, haben wir einen Hauptcontroller mit showLogin-Funktion und zwei verschiedene Profile (Telefon / Tablet). Beide Profile haben die Funktion showLogin mit unterschiedlichem Code, der für das Profil spezifisch ist.

Auf diese Weise können wir dieselbe URL für mehrere Profilgeräte mit ihren spezifischen Funktionen freigeben.