Sencha Touch - Suporte de Histórico

O Sencha Touch vem com suporte de histórico completo e recursos de deep linking.

Possui a funcionalidade mais simples do botão Voltar, que ajuda o usuário a navegar entre as telas, sem nem mesmo atualizar a página ou o aplicativo.

Ele também fornece funcionalidade de rotas, que ajuda o usuário a navegar para qualquer URL. Com base no URL fornecido na janela do navegador, ele chama funções específicas para executar uma tarefa específica.

Veja o exemplo a seguir para a funcionalidade do botão Voltar.

Este exemplo mostra a lista aninhada que nada mais é do que uma lista dentro de uma lista, portanto, quando você clica em qualquer um dos itens da lista, ela abre outra lista e um botão Voltar aparece no topo da tela.

Para obter a base de código completa, você pode verificar a Lista aninhada na seção de componente de exibição.

Encaminhamento

Exemplo mais simples de rotas

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

No exemplo acima, se a URL do navegador for https://myApp.com/#login, a função showLogin será chamada.

Podemos fornecer parâmetros na URL e, com base no parâmetro específico, a função pode ser chamada. Por exemplo, se a URL for https://myApp.com/#user/3, a outra função userId será chamada e o ID específico pode ser usado dentro das funções.

Roteamento avançado

Às vezes, temos parâmetros avançados que incluem vírgula, espaço em branco e caracteres especiais, etc. para isso, se usarmos a maneira acima de escrever rotas, ela não funcionará. Para resolver esse problema, o Sencha touch fornece roteamento condicional, onde podemos especificar a condição de que tipo de dados o parâmetro deve aceitar.

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

Assim, como no exemplo acima, fornecemos o regex na condição que afirma claramente que tipo de dados deve ser permitido como parâmetro de URL.

Compartilhando o mesmo URL em diferentes perfis de dispositivo

Como o Sencha touch fornece perfil de dispositivo, então o mesmo código de aplicativo pode ser usado em vários dispositivos, pode haver possibilidades de que perfis diferentes tenham funcionalidades diferentes para o mesmo URL.

Para resolver esse problema, o Sencha touch nos dá liberdade para escrever o roteamento no controlador principal e a função chamada para ser escrita em todos os perfis com seus perfis 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 exemplo mostra, temos um controlador principal que possui a função showLogin e temos dois perfis diferentes (Telefone / Tablet). Ambos os perfis possuem função showLogin com diferentes códigos específicos para o perfil.

Desta forma, podemos compartilhar o mesmo URL em vários dispositivos de perfil com suas funcionalidades específicas.