Sencha Touch - Perfil del dispositivo

En el mundo de las tecnologías de hoy, tenemos múltiples dispositivos como móviles, tabletas, computadoras de escritorio y portátiles con diferentes tamaños de pantalla. Por lo tanto, existe la necesidad de desarrollar aplicaciones que sean accesibles desde todos los dispositivos con buena apariencia. Sin embargo, desarrollar un código diferente para diferentes dispositivos requiere mucho tiempo y es costoso.

Sencha Touch nos ayuda en este sentido al ofrecer una función de perfil de dispositivo. En función del perfil activo, se ejecutarán y aplicarán las diferentes dependencias.

Podemos declarar el perfil del dispositivo mientras escribimos un código de aplicación. Podemos tener varios dispositivos como:

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

Una vez hecho esto, los perfiles se cargarán como:

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

Escribir un perfil de teléfono simple

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

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

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

Escribir un perfil de tableta simple

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

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

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

Como podemos ver en el perfil, tenemos la función isActive que determina si el dispositivo en particular está activo. Si el dispositivo está activo, las dependencias correspondientes se cargarán y se crearán instancias.

Como se mencionó en el ejemplo anterior, si estamos usando un dispositivo telefónico, la función isActive del perfil telefónico se volverá verdadera y se cargarán las dependencias relacionadas con el dispositivo telefónico; aquí se cargará phoneView. Si el dispositivo es una tableta, la función isActive del perfil del teléfono devolverá falso y la función isActive del perfil de la tableta devolverá verdadero y la dependencia tabletView se cargará.

Proceso de lanzamiento

Un punto más a tener en cuenta aquí es cuando tenemos perfiles en la aplicación, entonces la carga y creación de instancias del código de la aplicación será en el siguiente orden:

• Los controladores se instancian primero y se cargará la función de inicio de cada controlador.
• Se llamará a la función de inicio del perfil.
• Se llamará a la función de inicio de la aplicación.

Tanto el perfil como las funciones de lanzamiento de la aplicación son opcionales, por lo que si no definimos ninguna de ellas, no se llamarán.

Eche un vistazo al siguiente código para comprobar dónde y cómo se pueden definir las diferentes funciones de lanzamiento e inicio.

Función de inicio del controlador

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

Función de lanzamiento del 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');
   }
});

Función de lanzamiento de la aplicación

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