Sencha Touch - Soporte de historial

Sencha Touch viene con soporte de historial completo e instalaciones de enlaces profundos.

Tiene la funcionalidad de botón de retroceso más simple, que ayuda al usuario a navegar entre las pantallas, sin siquiera actualizar la página o la aplicación.

También proporciona la funcionalidad de rutas, que ayuda al usuario a navegar a cualquier URL. Basado en la URL proporcionada en la ventana del navegador, llama a funciones específicas para realizar una tarea específica.

Mire el siguiente ejemplo para ver la funcionalidad del botón Atrás.

Este ejemplo muestra la lista anidada que no es más que una lista dentro de una lista, por lo que cuando hace clic en cualquiera de los elementos de la lista, se abre otra lista y aparece un botón de retroceso en la parte superior de la pantalla.

Para obtener una base de código completa, puede consultar la Lista anidada en la sección Ver componentes.

Enrutamiento

El ejemplo más simple de rutas

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

En el ejemplo anterior, si la URL del navegador es https://myApp.com/#login, se llamará a la función showLogin.

Podemos proporcionar parámetros en la URL y, en función del parámetro específico, se puede llamar a la función. Por ejemplo, si la URL es https://myApp.com/#user/3, se llamará a la otra función userId y la identificación específica se puede utilizar dentro de las funciones.

Enrutamiento avanzado

En algún momento tenemos parámetros avanzados que incluyen comas, espacios en blanco y caracteres especiales, etc. para esto, si usamos la forma anterior de escribir rutas, no funcionará. Para resolver este problema, Sencha touch proporciona un enrutamiento condicional donde podemos especificar la condición de qué tipo de datos debe aceptar el parámetro.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Entonces, como en el ejemplo anterior, hemos dado regex en la condición que establece claramente qué tipo de datos deben permitirse como parámetro de URL.

Compartir la misma URL en diferentes perfiles de dispositivo

Como Sencha touch proporciona un perfil de dispositivo para que se pueda usar el mismo código de aplicación en varios dispositivos, puede haber posibilidades de que diferentes perfiles tengan diferentes funciones para la misma URL.

Para resolver este problema Sencha touch nos da libertad para escribir enrutamiento en el controlador principal y la función llamada para ser escrita en todos los perfiles con sus perfiles específicos.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Como muestra el ejemplo, tenemos un controlador principal que tiene la función showLogin y tenemos dos perfiles diferentes (teléfono / tableta). Tanto el perfil tiene función showLogin con código diferente específico para el perfil.

De esta manera podemos compartir la misma URL en múltiples dispositivos de perfil con sus funcionalidades específicas.