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