Controller: programmare la business logic

Nella lezione precedente abbiamo costruito una form di login
soffermandoci sulla struttura di una view e sui fogli stile.
L'applicazione è compilabile e possiamo eseguirla sia sul
simulatore che sul device, ma non abbiamo ancora scritto una riga
di codice. Come possiamo, per esempio, gestire il click
del pulsante di Login?

Quando si clicca su un pulsante (oggetto Ti.UI.Button

si scatena un evento chiamato click
fare quindi è dichiarare che il pulsante login vuole gestire
l'evento click funzione
di callback
scritta in un file JavaScript chiamato controller
Nel nostro caso, il controller index.js
cartella app/controllers
associato alla vista index.xml

Modifichiamo la definizione del pulsante Confirm index.xml
aggiungendo la gestione dell'evento click
questo, si aggiunge al tag Button onClick
che sarà valorizzato con il nome della funzione di callback che
dovrà essere chiamata. Esiste una regola che differenzia gli
attributi di proprietà dagli attributi associati agli eventi. Gli
handler degli eventi
iniziano con la parola on

<Button id="confirm" title="Login" onClick="doLogin"></Button>

Dopo aver modificato la view è necessario modificare il relativo
file controller:

function doLogin(e) {
    alert("Login effettuato con successo");
}
$.index.open();

$.index.open() doLogin
invece, è la funzione di callback che verrà richiamata alla
pressione del pulsante, e che per ora mostrerà una finestra di
popup con un messaggio.

Per completare la form occorre definire un sistema di
validazione
e password valide e scriveremo i dovuti controlli. Titanium
prevede un sistema di gestione delle password basato su cloud (ACS
A C S

Modifichiamo quindi il controller in questo modo:

var validUser = {
	username : "admin",
	password : "admin"
};
function doLogin(e) {
    if ($.username.value && $.password.value)
    {
    	if (($.username.value === validUser.username) &&
    	($.password.value === validUser.password))
    	{
    		alert("Login effettuato con successo");
    	}
    	else
    	{
    		alert("Username e password non corrispondono");
    	}
    }
    else
    {
    	alert("Username o password mancanti");
    }
    $.username.blur();
    $.password.blur();
}
$.index.open();

Abbiamo definito un oggetto validUser
combinazione username/password corretta (nel nostro esempio, admin admin
La callback doLogin
positivo se l'input corrisponderà alla combinazione che abbiamo
definito; altrimenti verrà visualizzato un messaggio d'errore.

Le funzioni di callback come doLogin
massimo un argomento, che è un oggetto che descrive l'evento
stesso. In questo esempio l'argomento viene dichiarato ma non
usato.

In un controller gli oggetti definiti nella view vengono
referenziati con il simbolo $
id username $.username
Per fare riferimento alle sue proprietà
esempio quelle definite come attributi nei tag della view o come
stili nei file .tss metodi
la notazione col punto tipica di JavaScript e di gran parte dei
linguaggi ad oggetti. Per cui useremo $.username.value
conoscere il valore che è stato digitato nella form.

Quando un controllo TextField
cioè ottiene il focus

$.username.blur();
$.password.blur();

tolgono il focus agli oggetti TextField
alla tastiera di scomparire.

Ci sono ancora alcune cose che abbiamo lasciato in sospeso: una
di queste è che dobbiamo rendere la password invisibile
Possiamo farlo modificando lo stile del controllo password nel file index.tss

"#password": {
    passwordMask:true
},

Adesso la nostra password non sarà più visibile quando verrà
digitata.

Gli eventi
essere numerosi e soprattutto molti di loro sono specifici di un
determinato oggetto. Si può fare riferimento alla documentazione
di ciascun controllo dell'SDK per verificare quali sono gli eventi
che possono essere gestiti. Nell'immagine possiamo vedere alcuni
dei 16 eventi che possono essere gestiti da un oggetto Ti.UI.Button

Come ultimo intervento nel nostro progetto associamo un evento dblclick
all'etichetta forgot
finestra di popup. Per fare questo abbiamo bisogno di un
nuovo controller, visto che fino ad ora abbiamo utilizzato index
che è quello generato per default ogni volta che creiamo un
progetto Alloy.

Per creare un nuovo controller
Project Explorer
nostro progetto e clicchiamo col pulsante destro per far apparire
il menu contestuale, come mostrato in figura:

Una volta selezionata la voce Alloy Controller
inseriamo il nome del controller, che sarà forgotpassword
Titanium Studio creerà i files forgotpassword.xml forgotpassword.tss
e forgotpassword.js
controller.

forgotpassword.xml

<Alloy>
	<Window class="container" >
		<Label id="password"></Label>
		<Button id="close" onClick="doClose" ></Button>
	</Window>
</Alloy>

forgotpassword.tss

".container": {
	backgroundColor: "white"
}
"#close": {
	title: "Close",
	bottom: "10"
}

forgotpassword.js

var args = arguments[0] || {};
var password = args.password;
$.password.text = "The password is " + password;
function doClose(){
	$.forgotpassword.close();
}

I tre file definiscono una finestra contenente una label e un
pulsante. La label mostrerà la password e il pulsante chiuderà la
finestra. La password viene passata come argomento al controller
attraverso un meccanismo di passaggio dei parametri
modo in cui avviene questo passaggio è descritto nell'ultima
modifica, quella che dovremo fare in index
gestire l'evento longpress
abbiamo appena creato. Per cui, in index.xml
modificare la Label forgot

<Label id="forgot" text="Forgot password" onLongpress="doShowPassword"></Label>

e modificheremo il controller index.js
callback doShowPassword longpress

function doShowPassword() {
	var controller = Alloy.createController('forgotpassword',validUser);
	var win = controller.getView();
	win.open();
}

Il meccanismo di apertura di una nuova view
delegato alla funzione Alloy.createController
passiamo il nome del controller che vogliamo richiamare (nel
nostro caso "forgotpassword") e un eventuale oggetto contenente i
parametri che vogliamo passare al controller (in questo caso validUser
che contiene la password).

Una volta creato il controller, richiamiamo la vista associata
con il metodo getView() Ti.UI.Window
che apriremo con il metodo open()