Sencha Touch - Prise en charge de l'historique

Sencha Touch est livré avec une prise en charge complète de l'historique et des fonctionnalités de liens profonds.

Il dispose de la fonctionnalité de bouton retour la plus simple, qui aide l'utilisateur à naviguer entre les écrans, sans même actualiser la page ou l'application.

Il fournit également une fonctionnalité de routes, qui aide l'utilisateur à naviguer vers n'importe quelle URL. En fonction de l'URL fournie dans la fenêtre du navigateur, il appelle des fonctions spécifiques pour effectuer une tâche spécifique.

Regardez l'exemple suivant pour la fonctionnalité du bouton retour.

Cet exemple montre la liste imbriquée qui n'est rien d'autre qu'une liste dans une liste, donc lorsque vous cliquez sur l'un des éléments de la liste, il ouvre une autre liste et un bouton de retour apparaît en haut de l'écran.

Pour une base de code complète, vous pouvez vérifier la liste imbriquée sous la section des composants d'affichage.

Routage

Exemple le plus simple d'itinéraires

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

Dans l'exemple ci-dessus, si l'URL du navigateur est https://myApp.com/#login, la fonction showLogin sera appelée.

Nous pouvons fournir des paramètres dans l'URL et en fonction du paramètre spécifique, la fonction peut être appelée. Par exemple, si l'URL est https://myApp.com/#user/3, une autre fonction userId sera appelée et l'ID spécifique pourra être utilisé dans les fonctions.

Routage avancé

Parfois, nous avons des paramètres avancés qui incluent des virgules, des espaces vides et des caractères spéciaux, etc. pour cela, si nous utilisons la manière ci-dessus d'écrire les routes, cela ne fonctionnera pas. Pour résoudre ce problème, Sencha touch fournit un routage conditionnel où nous pouvons spécifier la condition du type de données que le paramètre doit accepter.

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

Donc, comme dans l'exemple ci-dessus, nous avons donné regex dans la condition qui indique clairement quel type de données doit être autorisé en tant que paramètre d'URL.

Partage de la même URL sur différents profils d'appareils

Comme Sencha touch fournit un profil de périphérique afin que le même code d'application puisse être utilisé sur plusieurs périphériques, il peut y avoir des possibilités que différents profils puissent avoir des fonctionnalités différentes pour la même URL.

Pour résoudre ce problème, Sencha touch nous donne la liberté d'écrire le routage dans le contrôleur principal et la fonction appelée à écrire dans tout le profil avec leurs profils spécifiques.

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

Comme le montre l'exemple, nous avons un contrôleur principal qui a la fonction showLogin et nous avons deux profils différents (téléphone / tablette). Le profil a une fonction showLogin avec un code différent spécifique au profil.

De cette façon, nous pouvons partager la même URL sur plusieurs appareils de profil avec leurs fonctionnalités spécifiques.