Jquery mobile e i form: come realizzare la versione mobile di un sito con moduli web



Come abbiamo più volte detto nel passato, Jquery mobile è uno dei framework attualmente più utilizzati per lo sviluppo di pagine web di siti ottimizzati per smartphone.

Vediamo oggi un tutorial in italiano per sviluppare un’app che sfrutta dei form, ovvero dei moduli web.

In particolare, la versione mobile di un sito web dei un’azienda che si occupa di ecommerce. Nel sito è presente un form accessibile dai clienti che acquistano la merc, e grazie al quale il cliente stesso informa se il pacco spedito è stato perso o danneggiato durante la spedizione.

Il cliente potrà accedere da un dispositivo mobile (tablet, smartphone, ecc.), accedere al modulo, inserire il numero della spedizione, nome o indirizzo, e indicare una descrizione del tipo di danneggiamento.

L’applicazione risponde fornendo un ID univoco, in modo che il cliente possa effettuare un ulteriore monitoraggio.

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

CONSIDERAZIONI INIZIALI SUL PROGETTO DELL’APP MOBILE

Facciamo innanzitutto delle brevi considerazioni su come deve essere progettata un’applicazione per cellulari di questo tipo.

TEMPO DI RISPOSTA BASSO. Allo scopo occorre che l’applicazione web sia costituita da una singola pagina in html, con un’interfaccia semplice per gli utenti. Altri elementi come la risposta, il messaggio di conferma o di errore devono far parte dell’unica pagina html. La pagina è dunque divisa in sezioni, una volta caricata dal browser verrà mostrato, a seconda di specifici eventi una sezione piuttosto che un’altra.

GESTIONE DEGLI ERRORI. Se l’utente dimentica di inserire un campo obbligatorio nel form, deve apparire un messaggio di errore e il form non viene inviato. Nel messaggio di errore ovviamente comparirà l’indicazione del campo che è stato omesso, in modo che l’utente possa compilarlo.

RESPONSIVITA’. L’applicazione deve essere compatibile nella visualizzazione con più dispositivi e browser.

INSERIMENTO DELLE LIBRERIE DI JQUERY MOBILE

Un’applicazione con Jquery mobile è sostanzialmente una pagina web in html in cui andiamo a inserire delle librerie (un file css e due javascript, uno del linguaggio Jquery e una di Jquery mobile).

Creiamo dunque una pagina in html, con all’interno dei tag <head> … </head> questo codice:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Inoltre inseriamo anche:
<meta name="viewport" content="width=device-width, initial-scale=1">

Che servirà per adattare il contenuto (testi, elementi dei form, ecc.) alla larghezza del dispositivo (pc, smartphone, tablet, ecc.) da cui visualizziamo

La struttura di una pagina in Jquery mobile fa utilizzo dell’attributo ‘data-role‘, che assumerà valore ‘page’ per indicare una pagina, ‘content’ per indicare il contenuto di una pagina, ‘footer’ e ‘header’ per indicare la parte inferiore e superiore della pagina stessa.

In questo modo, se scriviamo (ovviamente fra il tag <body> e </body>) questo codice:

<div data-role="page">
     <div data-role="header">
       <h1>TITOLO</h1>
   </div><!-- /header -->
     <div data-role="content">
     <p>CIAO MONDO!!</p>
   </div><!-- /content -->
  <div data-role="footer">
    <h4>questo è il footer</h4>
   </div><!-- /footer -->
 </div><!-- /page -->

Abbiamo impostato una pagina in Jquery mobile, con intestazione (header), corpo (content) e piè di pagina (footer).

Nulla ci vieta di inserire più content, ognuno con il suo footer e/o header in una pagina: basta aggiungere un attributo id, con cui identificheremo i singoli elementi.

<div data-role="page">
<div data-role="header">...</div>
<div id="contenuto1" data-role="content">...</div>
<div data-role="footer">...</div>
<div data-role="header">...</div>
<div id="contenuto2" data-role="content">...</div>
<div data-role="footer">...</div>
<div id="contenutosenzafooter" data-role="content">...</div>
</div>

Possiamo scegliere uno dei temi predefiniti (data-theme=a, oppure b, c, d, ecc.) oppure crearne uno noi di personalizzato, utilizzando l’utilità Themeroller.

Nel nostro esempio utilizziamo il tema predefinito ‘b’.

 


Struttura dell’applicazione web

A questo punto, la struttura della pagina sarà questa:
<div data-role="page" data-theme="b" id="page1">
<!-- ====== main content starts here ===== -->
<div data-role="header" id="hdrMain" name="hdrMain">...</div>
<div data-role="content" id="contentMain" name="contentMain">
...
</div>
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<!-- ====== main content ends here ===== -->
<!-- ====== dialog content starts here ===== -->
<div align="CENTER" data-role="content" id="contentDialog" name="contentDialog">
...
</div>
<!-- ====== dialog content ends here ===== -->
<!-- ====== transition content page starts here ===== -->
<div data-role="content" id="contentTransition" name="contentTransition">
...
</div>
<!-- ====== transition content ends here ===== -->
<!-- ====== confirmation content starts here ===== -->
<div data-role="header"  id="hdrConfirmation" name="hdrConfirmation">...</div>
<div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">
...
</div>
<div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div>
<!-- ====== confirmation content ends here ===== -->
...
</div><!-- page1 -->

Abbiamo 4 elementi:
– il contenuto principale (main content) con il modulo che verrà compilato dall’utente. E’ una pagina completa di header e footer;

– una finestrella di dialogo (dialog content) con un messaggio di errore che indica che il modulo non è stato compilato interamente. Non c’è nè header nè footer, ma inseriremo un bottone per chiudere il dialog stesso;

– un’immagine di transizione (transition content) che appare nel lasso di tempo in cui siamo in attesa della risposta del server, dopo l’invio del modulo

pagina di risposta (confirmation content) con header e footer, indicante la risposta del server (ovvero il numero di conferma dato all’utente);

Il tutto è sintetizzato nel seguente diagramma:

diagramma app jquerymobile

Il form in jquery mobile

[  Per approfondire l’argomento, vedi documentazione qui: http://jquerymobile.com/demos/1.2.1/docs/forms/docs-forms.html  ]

All’interno della pagina principale, ovvero dentro qui:

<div data-role="content" id="contentMain" name="contentMain">
...
</div>

Andremo a scrivere il codice per il nostro form, il quale conterrà:

– vari campi input di testo (numero spedizione, nome, cognome, email, indirizzo di spedizione, città,  codice postale, telefono). Useremo un accorgimento per indicare che il campo è obbligatorio;

– un menu a tendina (select) per le province;

– un campo di testo rettangolare (textarea) per indicare informazioni sul pacco danneggiato;

Cominciamo dal numero della spedizione.
<div id="shipDiv" data-role="fieldcontain">
<label for="shipNo">Numero di spedizione*</label>
<input id="shipNo" name="shipNo_r" type="text" />
</div>

C’è innanzitutto un div contenitore, con l’attributo data-role=”fieldcontain”. Ciò è necessario se vogliamo raggruppare sulla stessa linea più elementi dipendenti l’un l’altro, come ad esempio una coppia etichetta – campo input di testo.

In particolare l’etichetta (si usa il tag <label> per indicarla, avrà un attributo ‘for’, con l’indicazione dell’ID del campo di testo ( <input>) a cui si riferisce. Nel nostro esempio l’id è ‘shipNo’ (No è l’abbreviazione di numero in inglese, ovviamente potevamo scegliere un qualsiasi altro nome per l’id, l’importante è che sia lo stesso indicanto nell’attributo ‘for’ della label.

Notare anche l’id e il ‘name’ nel campo di testo. Sono uguali, tranne per la presenza di un suffisso _r (shipNo e shipNo_r). Questo è l’accorgimento che utilizzeremo per individuare un campo OBBLIGATORIO di un form. Più avanti capiremo meglio perchè.

Se invece un elemento di un form NON è obbligatorio (cioè può essere lasciato in bianco), questo suffisso non lo metteremo (e dunque l’id e l’attributo ‘name’ saranno identici).

Un esempio di campo non necessario nel nostro form è il numero di telefono.

<div id="phoneDiv" data-role="fieldcontain">
<label for="phone">Cellulare</label>
<input id="phone" name="phone" type="text"/>
</div>

 

Diamo un’occhiata al codice della select, ovvero del menu a tendina.


<div id="provinceDiv" data-role="fieldcontain">
<label id="provinceLabel" for="province">Provincia*</label>
<select id="
province” name=”province_r” tabindex=”2″>
<option value=”ZZ”>Seleziona provincia</option>
<option value=”AG”>AGRIGENTO</option>
<option value=”AL”>ALESSANDRIA</option>
<option value=”AN”>ANCONA</option>

....

</select>
</div>

Passiamo infine a vedere il codice per le textarea in Jquery mobile. Nel nostro caso avremo una coppia label – textarea. Quest’ultima è un campo obbligatorio

<div id="whatDiv" data-role="fieldcontain">
<label for="what" id="whatLabel">Per favore spiega i danni riscontrati nella spedizione*</label>
<textarea name="what_r" id="spiegazione"></textarea>
</div>

 

Una volta definita la struttura, per far ‘funzionare’ i vari elementi dell’app entra in gioco un minimo di programmazione Jquery, che vedremo in un prossimo articolo. Stay tuned!!

GD Star Rating
loading...

Un pensiero riguardo “Jquery mobile e i form: come realizzare la versione mobile di un sito con moduli web

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.

Altro... app, creazione app, jquery, jquery mobile, programmazione
line app smartphone
Sms gratis con Line: l’app di messaggistica presentata in Italia. Nello spot c’è Emma Marrone

Line, l'app con gli stickers che vuole battere Whatsapp. Negli spot la testimonial sarà Emma...

Chiudi