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.