Sencha Touch - Profilo del dispositivo

Nel mondo delle tecnologie di oggi, abbiamo più dispositivi come cellulari, tablet, desktop e laptop con schermi di diverse dimensioni. Quindi, è necessario sviluppare applicazioni che siano accessibili da tutti i dispositivi con un aspetto gradevole. Tuttavia, lo sviluppo di un codice diverso per dispositivi diversi richiede molto tempo e denaro.

Sencha Touch ci aiuta in questo senso, offrendo una funzione di profilo del dispositivo. In base al profilo attivo, le diverse dipendenze verranno eseguite e applicabili.

Possiamo dichiarare il profilo del dispositivo durante la scrittura di un codice dell'applicazione. Possiamo avere più dispositivi come:

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

Al termine, i profili verranno caricati come:

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

Scrivere un semplice profilo telefonico

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

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

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

Scrivere un semplice profilo per tablet

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

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

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

Come possiamo vedere nel profilo, abbiamo la funzione isActive che determina se il particolare dispositivo è attivo. Se il dispositivo è attivo, le dipendenze corrispondenti verranno caricate e istanziate.

Come accennato nell'esempio precedente, se stiamo utilizzando un dispositivo telefonico, la funzione isActive del profilo del telefono restituirà true e verranno caricate le dipendenze relative al dispositivo telefonico; qui verrà caricato phoneView. Se il dispositivo è un tablet, la funzione isActive del profilo del telefono restituirà false e la funzione isActive del profilo del tablet restituirà true e verrà caricata la dipendenza tabletView.

Processo di avvio

Un altro punto da notare qui è quando abbiamo profili nell'applicazione, quindi il caricamento e l'istanza del codice dell'applicazione saranno nel seguente ordine:

• I controller vengono istanziati per primi e verrà caricata la funzione di inizializzazione di ciascun controller.
• Verrà chiamata la funzione di avvio del profilo.
• Verrà chiamata la funzione di avvio dell'applicazione.

Entrambe le funzioni di avvio del profilo e dell'applicazione sono opzionali, quindi se non ne definiamo nessuna non verranno chiamate.

Dai un'occhiata al codice seguente per verificare dove e come possono essere definite le diverse funzioni di avvio e inizializzazione.

Funzione di inizializzazione del controller

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

Funzione di lancio del profilo

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

Funzione di avvio dell'applicazione

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