Sencha Touch - Controller

Il controller è uno dei componenti principali dell'architettura MVC.

Il controller è il componente che controlla la funzionalità. Scriviamo listener nel controller e funge da collante tra la vista e il modello, dove la vista è per l'interfaccia utente visiva mentre il modello è per memorizzare e manipolare i dati.

Le principali funzioni di un controller sono:

  • Le azioni sono scritte nel controller come se si premesse un pulsante nell'applicazione o si passasse il mouse su un collegamento, quale azione deve essere eseguita viene scritta nelle funzioni listener del controller.

  • Il controller dispone delle funzioni di avvio e avvio, che vengono chiamate una volta avviati l'applicazione e il controller.

Funzioni di avvio e avvio del controller

Possiamo definire la funzione di avvio e inizializzazione nel controller. Un'applicazione può avere la propria funzione di avvio, quindi ecco l'ordine in cui le funzioni dovrebbero essere chiamate.

  • La funzione di inizializzazione del controller viene chiamata per prima all'avvio dell'applicazione.

  • Quindi viene chiamata la funzione di avvio dell'applicazione.

  • La funzione di avvio del controller viene chiamata una volta che viene chiamato il lancio dell'applicazione e l'applicazione viene avviata.

Componenti di configurazione del controller

Possiamo avere ref e controllo nella configurazione di un controller. Diamo un'occhiata al modo in cui funzionano entrambi.

Rif

Refs in config può essere utilizzato come mostrato nell'esempio seguente.

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

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

I riferimenti possono essere utilizzati per fare riferimento a qualsiasi ID. Come si vede nell'esempio sopra, la scheda è il ref creato che fa riferimento all'id #divId.

I riferimenti vengono creati nella coppia chiave-valore, come nell'esempio precedente, tab è la chiave e divId è il valore. Ogni volta che viene creato un riferimento, i get e i setter vengono creati automaticamente per lo stesso. Nell'esempio sopra, abbiamo creato una scheda ref come in modo da potervi accedere come metodo getTab, che viene creato automaticamente.

Controllo

Il controllo è una configurazione simile a ref che accetta ref come chiave e il valore come funzione di ascolto, chiamata per eseguire alcune attività.

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

Itinerari

Il controller definisce la rotta a cui è interessato. Con l'aiuto delle rotte, possiamo collegare qualsiasi parte dell'applicazione alla rotta fornita.

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

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

È possibile accedere al percorso con l'URL della barra degli indirizzi del browser.

Nell'esempio precedente, la funzione del controller showLogin verrà chiamata se l'utente preme l'URL https://myApp.com/#login.

Le rotte possono essere chiamate anche con caratteri jolly, come la funzione userId verrà chiamata se l'URL del browser è https://myApp.com/#user/3003

Quindi, ogni volta che l'URL del browser cambia, il percorso chiamerà automaticamente la funzione specifica del controller.