Sencha Touch - Controlador

O controlador é um dos principais componentes da arquitetura MVC.

O controlador é o componente que controla a funcionalidade. Escrevemos ouvinte no controlador e ele atua como uma cola entre a visualização e o modelo, onde a visualização é para a IU visual, enquanto o modelo é para armazenar e manipular os dados.

As principais funções de um controlador são -

As ações são escritas no controlador como se pressionássemos um botão no aplicativo ou passássemos o mouse sobre algum link, qual ação deve ser executada é escrita nas funções de ouvinte do controlador.
O controlador tem as funções init e launch disponíveis, que são chamadas assim que o aplicativo e o controlador são iniciados.

Funções de inicialização e inicialização do controlador

Podemos definir a função de inicialização e inicialização no controlador. Um aplicativo pode ter sua própria função de inicialização, então aqui está a ordem em que as funções devem ser chamadas.

A função de inicialização do controlador é chamada primeiro quando o aplicativo é iniciado.
Em seguida, a função de inicialização do aplicativo é chamada.
A função de lançamento do controlador é chamada assim que o lançamento do aplicativo é chamado e o aplicativo é iniciado.

Componentes de configuração do controlador

Podemos ter refs e controle na configuração de um controlador. Vamos dar uma olhada em como ambos funcionam.

Refs

Refs na configuração podem ser usados conforme mostrado no exemplo a seguir.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      refs: {
         tab: '#divId
      }
   },

   addLogoutButton: function() {
      this.getTab().add({
         text: 'Logout'
      });
   }
});

Refs pode ser usado para se referir a qualquer id. Como podemos ver no exemplo acima, a guia é a ref criada que se refere ao id #divId.

Refs são criados no par de valores-chave, como no exemplo acima, tab é a chave e divId é o valor. Sempre que um ref é criado, os get e setters são criados automaticamente para o mesmo. No exemplo acima, criamos uma guia ref as para que possamos acessá-la como o método getTab, que é criado automaticamente.

Ao controle

Control é uma configuração semelhante a ref que recebe ref como chave e o valor como função de escuta, que é chamada para realizar algumas tarefas.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      control: {
         loginButton: {
            tap: 'doLogin'
            // ref tap is the key and doLogin is the value which is a listener.
         }
      },

      refs: {
         loginButton: 'button[action=login]' 
      }
   },

   doLogin: function() {
      // called whenever the Login button is tapped
   }
});

Rotas

O controlador define a rota na qual está interessado. Com a ajuda de rotas, podemos vincular qualquer parte da aplicação à rota fornecida.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      // statements
   },
   userId: function() {
      // statements
   }
});

A rota pode ser acessada com o URL da barra de endereços do navegador.

No exemplo acima, a função do controlador showLogin será chamada se o usuário acessar a url https://myApp.com/#login.

As rotas também podem ser chamadas com curingas, como a função userId será chamada se o URL do navegador for https://myApp.com/#user/3003

Portanto, sempre que a URL do navegador muda, a rota chama automaticamente a função específica do controlador.

↰ Previous page