Web app in Jquery Mobile: esempio di realizzazione (seconda parte)



In un precedente articolo abbiamo visto come iniziare a progettare una semplice applicazione web che implica un’interazione con un’utente e che utilizza un form, ovvero un modulo web.

Per farlo stiamo utilizzando Jquery Mobile, che altro non è che un framework che, sfruttando le funzioni del Jquery, delle librerie ah hoc e un file css, permette di realizzare siti web ottimizzati per essere visualizzati da smartphone e tablet.

Vediamo la seconda parte di questo mini – tutorial.  [Per la prima parte vedi qui]

applicazione web form

 La programmazione in Jquery

Una volta definita la struttura, per far ‘funzionare’ i vari elementi della web app entra in gioco un minimo di programmazione Jquery, che vedremo qui sotto.

-------------
-------------

In Jquery l’oggetto /funzione principale è il ‘dollaro’ (ulteriori spiegazioni in questa ottima guida di Html.it).

La sintassi è $("selettore").funzione : selettore è un tag html (esempio “a” che indica i link), oppure l’id di un selettore CSS, il cui nome va preceduto dal simbolo del cancelletto (nel nostro caso con $(#hdrMain) selezioniamo l’header del contenuto principale, in quanto gli abbiamo dato come id hdrmain) o ancora una classe CSS, preceduta da un punto.

Nel nostro caso, dato che ci sono elementi che dobbiamo utilizzare più volte, sfruttiamo le variabili globali, ovvero variabili che definiamo e inizializziamo una volta, per poi riutilizzarle in altre parti del codice.

Qui la loro definizione (fate caso ai vari id degli elementi definiti nel codice della struttura dell’applicazione web ):

<script>
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
var provLabelVar = null;
var whatLabelVar = null;
var provVar = null;
var whatVar = null;
var form1var = null;
var confirmationVar = null;
var contentDialogVar = null;
var hdrConfirmationVar = null;
var contentConfirmationVar = null;
var ftrConfirmationVar = null;
var inputMapVar = null;
// Constants
var MISSING = "missing";
var EMPTY = "";
var NO_PROV = "ZZ";
</script>

E qui invece, la loro inizializzazione – assegnazione:

<script>
$(document).ready(function() {
// Assign global variables
hdrMainVar = $('#hdrMain');
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
provLabelVar = $('#provinceLabel');
whatLabelVar = $('#whatLabel');
stateVar = $('#state');
whatVar = $('#what');
form1Var = $('#form1');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
...
});
...
</script>

Da notare che ciò avviene al caricamento del DOM (la struttura dei tag e degli elementi) della pagina, cioè all’interno di una funzione all’interno di $(document).ready ( )

Notare anche l’ultima variabile, inputMapVar , che è l’insieme dei campi di input che abbiamo indicati con obbligatori (aggiungendo il suffisso _r dopo il nome, per distinguerli invece da quelli non necessari). Questi campi verranno sottoposti ad un controllo, secondo un codice che vedremo tra poco.

Nonostante il fatto che già da un po’ Jquery Mobile preveda la possibilità di far apparire una sola schermata dell’app suddividendola in pagine (div data-role=”page”) caratterizzati da id diversi, e che vengono chiamati l’un l’altro con un semplice link di collegamento , noi utilizzeremo un vecchio metodo, basato sulla funzione show() e hide(), che rispettivamente mostra e nasconde un elemento.

In particolare, per nascondere le tre parti della pagina principale (header, contenuto e footer) avremo:

function hideMain(){
hdrMainVar.hide();
contentMainVar.hide();
ftrMainVar.hide();
}

Invece, per mostrare questi tre elementi, avremo:

function showMain(){
hdrMainVar.show();
contentMainVar.show();
ftrMainVar.show();
}

Analogamente, per nascondere o mostrare la pagina di transizione, il dialogo, e la pagina di conferma, utilizzeremo queste funzioni:

function hideContentTransition(){
contentTransitionVar.hide();
}


function showContentTransition(){
contentTransitionVar.show();
}

function hideContentDialog(){
contentDialogVar.hide();
}

function showContentDialog(){
contentDialogVar.show();
}

function hideConfirmation(){
hdrConfirmationVar.hide();
contentConfirmationVar.hide();
ftrConfirmationVar.hide();
}

function showConfirmation(){
hdrConfirmationVar.show();
contentConfirmationVar.show();
ftrConfirmationVar.show();
}

Quando la pagina è caricata, all’inizio, deve essere mostrata solo la pagina principale, per cui in document.ready, dopo la creazione e l’assegnazione delle variabili globali come visto sopra, faremo agire le funzioni hideContentTransition, hideContentDialog,  hideConfirmation:

<script>
$(document).ready(function() {
// codice variabili globali
...
hideContentDialog();
hideContentTransition();
hideConfirmation();
});
...
</script>

 

VERIFICA DEL MODULO WEB: I CAMPI OBBLIGATORI SONO STATI COMPILATI?

Quando l’utente preme il pulsante di invio del modulo, scatta una procedura di una verifica, cioè viene controllato se tutti i campi obbligatori del modulo stesso sono stati compilati.

Se la verifica dà esito positivo, .si visualizza il contenuto di transizione (che altro non è che un’immagine di attesa). Altrimenti, si visualizzerà il Dialog con un messaggio di avvertimento e un bottone OK di chiusura.

Per far capire all’utente quali sono i campi obbligatori che si è dimenticato di compilare, andremo ad aggiungere qualche riga di CSS per evidenziare in rosso e in grassetto le etichette (label) descrittive di tali campi:

label.missing  {
color:#FF0000;
font-weight:bold;
}

Per applicare l’effetto, si utilizzerà la funzione Jquery addClass (MISSING). Invece, per rimuoverlo, si utilizzerà removeClass (MISSING).

Vediamo a questo punto il codice che viene implementato al momento del submit (il click sul bottone d’invio del form). La spiegazione è più sotto:

$('#form1').submit(function() {
var err = false;

// nascondiamo la pagina principale
hideMain();
// reset degli elementi precedentemente evidenziati
provinceLabelVar.removeClass(MISSING);
whatLabelVar.removeClass(MISSING);
inputMapVar.each(function(index){
$(this).prev().removeClass(MISSING);
});

 



// Perform form validation
inputMapVar.each(function(index){
if($(this).val()==null || $(this).val()==EMPTY){
$(this).prev().addClass(MISSING);
err = true;
}
});
if(provinceVar.val()==
NO_PROV){
provinceLabelVar.addClass(MISSING);
err = true;
}
if(whatVar.val()==null||whatVar.val()==EMPTY){
whatLabelVar.addClass(MISSING);
err = true;
}
//se il controllo non è superato, mostra la finestra di dialogo
if(err == true){
showContentDialog();
return false;
}
//invece se il controllo è superato, mostra la pagina di transizione
showContentTransition();
// Submit the form
$.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
confirmationVar.text(data);
hideContentTransition();
showConfirmation();
});
return false;
});

La prima cosa che facciamo è dichiarare e inizializzare a false una variabile d’errore, e nascondiamo il contenuto principale (cioè il form). Poi si resettano le label che in precedenza eventualmente sono state evidenziate in rosso, ovvero la label delle province (provinceLabelVar) , della spiegazione (whatLabelVar) e l’insieme delle etichette che abbiamo raggruppato in inputMapVar. In particolare, occorre passare ad each (metodo che scorre tutti gli elementi di inputMapVar ) una funzione che non fa altro che selezionare, di ogni elemento di inputMapVar, il suo precedente (cioè la label) e applica il removeClass(MISSING), che come già detto elimina la classe css che utilizziamo per mettere in evidenza in rosso.

Allo stesso identico modo, andando più avanti con il codice, vediamo che viene verificato, per ogni elemento di inputMapVar, se risulta essere nullo o in bianco, cioè non compilato: in questo caso viene aggiunta la classe ‘missing’ ( $(this).prev().addClass(MISSING);  ) e viene posto il flag err a true.

Altro controllo riguarda il menu a tendina delle province: se non è stato selezionato alcun valore (e quindi è rimasta la selezione di default, che abbiamo contrassegnato con ‘NO_PROv’) allora aggiungeremo anche qui l’evidenziazione in rosso e poniamo err a true.

Idem per whatVar, che ricordiamo indica la textarea dove l’utente deve aggiungere informazioni sul tipo di problema avvenuto nel trasporto della merce.

A questo punto il controllo è terminato: se tutto è andato bene la variabile d’errore sarà false, altrimenti true. Se err==false, viene mostrata la finestra di dialogo, la quale contiene semplicemente un testo di avvertimento e un bottone di chiusura. Bottone che, una volta premuto, ci farà ritornare alla pagina principale (quella del modulo) con le parti da compilare evidenziate in rosso.

Dopo il submit del form: Ajax

Vediamo infine la parte finale, che verrà eseguita se il controllo del modulo va a buon fine, cioè se l’utente ha compilato TUTTI i campi obbligatori:

$.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
confirmationVar.text(data);
hideContentTransition();
showConfirmation();
});
return false;
});

 

Si fa uso di una chiamata asincrona con Ajax e utilizziamo il metodo $.post (che non è altro una forma più sintetica del metodo tradizionale $.ajax. Quest’ultimo avrà all’interno una serie di espressioni del tipo parametro:valore.     $.post equivale dunque ad una chiamata $.ajax con il parametro type: "POST").

La sintassi del metodo $.post è la seguente:

– il primo argomento è l’url della pagina alla quale indirizziamo la richiesta, ovvero la pagina del server che andrà a recepire e trattare i dati che stiamo inviando dopo il click sul bottone del nostro form.

– il secondo è una query string nel formato chiave valore, ottenuta con semplicità ricorrendo al metodo serialize() (una spiegazione su quando usare serialize è indicato qui), applicato ovviamente al nostro form;

– infine, il terzo argomento è la callback da eseguire al completamento della chiamata, indipendentemente se quest’ultima ha avuto successo (i dati sono stati inviati e processati correttamente dal server, che ha inviato la risposta) oppure no. Ha tre parametri: la risposta, lo stato e l’oggetto XMLHttpRequest, tuttavia può anche essere utilizzata senza parametri se questi non servono. A noi interessano solo i dati inviati dal server, che in questo semplice esempio di applicazione saranno semplicemente una stringa con un codice identificativo.

Sottolineiamo il fatto che la chiamata è asincrona: una volta chiamato il metodo $.post, l’utente continuerà a vedere il contenuto della finestra di transizione, e la funzione submit continuerà a restituire false.

Per semplicità, simuliamo il comportamento di un server lento. La pagina il cui url abbiamo indicato come primo parametro del metodo post è infatti requestProcessor.php , che contiene un banale codice in cui non viene fatto nulla per 4 secondi, poi viene inviato una stringa alfanumerica, che rappresenta il codice identificativo della richiesta fatta dall’utente.

<?php
usleep(4000000);
echo('FTREIK12345678');
?>

Potevamo utilizzare una funzione random per generare un numero casuale, o un’altra ancora per un numero progressivo, ma abbiamo preferito ragionare nel modo più semplice possibile.

Tale codice verrà recepito dalla funzione di callback, e popolerà il tag ‘<span’ avente come id confirmation e che abbiamo rappresentato come variabile globale confirmationVar:

<div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">
<p>Una nuova richiesta è stata accettata.</p>    <p>Il codice di questa richiesta è  : <span id="confirmation" name="confirmation"></span>  </p>
</div>

Il codice precedente è ovviamente presente nella schermata finale, quella di conferma, che mostra appunto una breve frase con questo codice identificativo, ad indicare che tutto è andato per il verso giusto.

IN SINTESI

Il codice sorgente di questa mini applicazione web mobile è costituita da file presenti in un’unica cartella, chiamata forms. In questa cartella, ci sono altre due sottocartelle, css e img.

La prima contiene il file degli stili css, tra cui la classe label.missing che evidenzia, come già detto, le parti del modulo che l’utente si è dimenticato di compilare e che deve compilare obbligatoriamente. La cartella img contiene invece wait.gif, ovvero l’immagine di attesa che viene mostrata finchè il server risponde (nel nostro caso, dopo i 4 secondi (4000 millisecondi) di attesa dati dalla funzione usleep (4000).

Nella cartella principale (cioè form) sono presenti i file index.html (che contiene il codice jquery mobile e jquery (Ajax) dell’app e requestProcessor.php , che come abbiamo detto simula un server remoto lento per produrci una risposta.

Tutti i file sono scaricabili direttamente dalla pagina http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/ , da dove è stato liberamente tratto e tradotto questo tutorial.

Vi ricordo inoltre che curo personalmente la pagina Jquery mobile + Phonegap: how make a mobile site su Scoop.it, con gli ultimi aggiornamenti su tutorial ed esempi pratici di come realizzare un sito web (o un app per smartphone) utilizzando l’accoppiata di framework JQuery Mobile (che abbiamo visto in questo articolo) e Phonegap (che in sintesi trasforma un sito web mobile in un’app multipiattaforma).

GD Star Rating
loading...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

More in ajax, app, creazione app, funzione, jquery, jquery mobile, programmazione
app gmail novita
L’app Gmail arriva alla versione 4.6. E in futuro ci sarà la pubblicità

Tutte le novità presenti nell'ultima versione dell'app Gmail, la 4.6. Alcune classi e stringhe nel...

Close