Sencha Touch - Perfil do Dispositivo

No mundo atual das tecnologias, temos vários dispositivos, como celulares, tablets, desktops e laptops com diferentes tamanhos de tela. Portanto, é necessário desenvolver aplicativos que sejam acessíveis a partir de todos os dispositivos com boa aparência. No entanto, desenvolver códigos diferentes para dispositivos diferentes é muito demorado e caro.

O Sencha Touch nos ajuda nesse sentido, oferecendo um recurso de perfil de dispositivo. Com base no perfil ativo, as diferentes dependências serão executadas e aplicáveis.

Podemos declarar o perfil do dispositivo ao escrever um código de aplicativo. Podemos ter vários dispositivos como -

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

Uma vez feito isso, os perfis serão carregados como -

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

Escrever um perfil de telefone simples

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

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

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

Escrever um perfil de tablet simples

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

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

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

Como podemos ver no perfil, temos a função isActive que determina se o dispositivo específico está ativo. Se o dispositivo estiver ativo, as dependências correspondentes serão carregadas e instanciadas.

Conforme mencionado no exemplo acima, se estivermos usando um dispositivo de telefone, a função isActive do perfil de telefone retornará true e as dependências relacionadas ao dispositivo de telefone serão carregadas; aqui o phoneView será carregado. Se o dispositivo for um tablet, a função isActive do perfil do telefone retornará false e a função isActive do perfil do tablet retornará true e a dependência tabletView será carregada.

Processo de Lançamento

Mais um ponto a ser notado aqui é quando temos perfis no aplicativo, então o carregamento e a instanciação do código do aplicativo serão na seguinte ordem -

• Os controladores são instanciados primeiro e a função init de cada controlador será carregada.
• A função de inicialização do perfil será chamada.
• A função de inicialização do aplicativo será chamada.

As funções de perfil e inicialização do aplicativo são opcionais, portanto, se não definirmos nenhuma delas, elas não serão chamadas.

Dê uma olhada no código a seguir para verificar onde e como as diferentes funções de inicialização e init podem ser definidas.

Função init do controlador

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

Função de lançamento do perfil

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

Função de inicialização do aplicativo

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