Sencha Touch - Profil de l'appareil

Dans le monde des technologies d'aujourd'hui, nous avons plusieurs appareils tels que les mobiles, les tablettes, les ordinateurs de bureau et les ordinateurs portables avec différentes tailles d'écran. Par conséquent, il est nécessaire de développer des applications, qui sont accessibles à partir de tous les appareils avec une bonne apparence. Cependant, développer un code différent pour différents appareils est très long et coûteux.

Sencha Touch nous aide à cet égard, en offrant une fonction de profil d'appareil. En fonction du profil actif, les différentes dépendances seront exécutées et applicables.

Nous pouvons déclarer le profil de l'appareil lors de l'écriture d'un code d'application. Nous pouvons avoir plusieurs appareils comme -

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

Une fois cela fait, les profils seront chargés comme -

• MyApp.profiles.Phone.js
• MyApp.profiles.Tablet.js

Rédaction d'un profil de téléphone simple

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

Écrire un profil de tablette simple

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

Comme nous pouvons le voir dans le profil, nous avons la fonction isActive qui détermine si le périphérique particulier est actif. Si le périphérique est actif, les dépendances correspondantes seront chargées et instanciées.

Comme mentionné dans l'exemple ci-dessus, si nous utilisons un appareil téléphonique, la fonction isActive du profil de téléphone retournera true et les dépendances liées à l'appareil téléphonique seront chargées; ici phoneView sera chargé. Si l'appareil est une tablette, la fonction isActive du profil de téléphone retournera false et la fonction isActive du profil de tablette retournera true et la dépendance tabletView sera chargée.

Processus de lancement

Un autre point à noter ici est que lorsque nous avons des profils dans l'application, le chargement et l'instanciation du code de l'application se feront dans l'ordre suivant -

• Les contrôleurs sont instanciés en premier et la fonction d'initialisation de chaque contrôleur sera chargée.
• La fonction de lancement du profil sera appelée.
• La fonction de lancement de l'application sera appelée.

Les fonctions de lancement du profil et de l'application sont facultatives, donc si nous ne définissons aucune d'entre elles, elles ne seront pas appelées.

Jetez un œil au code suivant pour vérifier où et comment les différentes fonctions de lancement et d'initialisation peuvent être définies.

Fonction init du contrôleur

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

Fonction de lancement du profil

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

Fonction de lancement de l'application

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});