Sencha Touch - profil urządzenia

W dzisiejszym świecie technologii mamy wiele urządzeń, takich jak telefon komórkowy, tablet, komputer stacjonarny i laptop z różnymi rozmiarami ekranu. Stąd potrzeba tworzenia aplikacji, które będą dostępne z każdego urządzenia i będą dobrze wyglądać i działać. Jednak tworzenie różnych kodów dla różnych urządzeń jest bardzo czasochłonne i kosztowne.

Sencha Touch pomaga nam w tym, oferując funkcję profilu urządzenia. W oparciu o aktywny profil będą uruchamiane i stosowane różne zależności.

Profil urządzenia możemy zadeklarować podczas pisania kodu aplikacji. Możemy mieć wiele urządzeń jako -

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

Po zakończeniu profile zostaną załadowane jako -

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

Pisanie prostego profilu telefonicznego

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

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

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

Pisanie prostego profilu tabletu

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

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

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

Jak widać z profilu, mamy funkcję isActive, która określa, czy dane urządzenie jest aktywne. Jeśli urządzenie jest aktywne, odpowiednie zależności zostaną załadowane i utworzone.

Jak wspomniano w powyższym przykładzie, jeśli używamy urządzenia telefonicznego, funkcja isActive profilu telefonu zwróci wartość true i zostaną załadowane zależności związane z urządzeniem telefonicznym; tutaj zostanie załadowany phoneView. Jeśli urządzeniem jest tablet, funkcja isActive profilu telefonu zwróci wartość false, a funkcja isActive profilu tabletu zwróci wartość true i zostanie załadowana zależność tabletView.

Launch Process

One more point to be noticed here is when we have profiles in the application, then the loading and instantiation of application code will be in the following order −

Controllers are instantiated first and each controller's init function will be loaded.
Profile's launch function will be called.
Application's launch function will be called.

Both profile and application's launch functions are optional, so if we do not define any one of them they will not get called.

Take a look at the following code to check where and how the different launch and init functions can be defined.

Controller's init function

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

Profile's launch function

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

Application's launch function

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