Sencha Touch - Профиль устройства

В современном мире технологий у нас есть несколько устройств, таких как мобильные, планшеты, настольные компьютеры и ноутбуки с экранами разного размера. Следовательно, существует необходимость в разработке приложений, доступных со всех устройств, с хорошим внешним видом. Однако разработка разного кода для разных устройств требует очень много времени и затрат.

Sencha Touch помогает нам в этом, предлагая функцию профиля устройства. В зависимости от активного профиля будут запущены и применимы различные зависимости.

Мы можем объявить профиль устройства при написании кода приложения. У нас может быть несколько устройств как -

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

Как только это будет сделано, профили будут загружены как -

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

Написание простого телефонного профиля

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

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

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

Написание простого профиля планшета

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

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

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

Как видно из профиля, у нас есть функция isActive, которая определяет, активно ли конкретное устройство. Если устройство активно, соответствующие зависимости будут загружены и созданы.

Как упоминалось в приведенном выше примере, если мы используем телефонное устройство, функция isActive профиля телефона вернет true и будут загружены зависимости, связанные с телефонным устройством; здесь будет загружен phoneView. Если устройством является планшет, то функция isActive профиля телефона вернет false, а функция isActive профиля планшета вернет true, и будет загружена зависимость tabletView.

Запуск процесса

Здесь следует отметить еще один момент: когда у нас есть профили в приложении, загрузка и создание экземпляра кода приложения будут происходить в следующем порядке:

Сначала создаются экземпляры контроллеров и загружается функция инициализации каждого контроллера.
Будет вызвана функция запуска профиля.
Будет вызвана функция запуска приложения.

И профиль, и функции запуска приложения являются необязательными, поэтому, если мы не определим ни одну из них, они не будут вызваны.

Взгляните на следующий код, чтобы проверить, где и как могут быть определены различные функции запуска и инициализации.

Функция инициализации контроллера

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

Функция запуска профиля

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

Функция запуска приложения

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