Tutorial jQuery Mobile: come creare una semplice web app per smartphone

Quando si parla di sviluppo di applicazioni web per dispositivi mobile i framework di riferimento sono attualmente due: Sencha Touch e jQuery Mobile. Il primo dei due si vanta di essere più potente e più maturo ma è un po’ più ostico da usare per chi non è esperto di javascript. In questo post vedremo una introduzione a jQuery Mobile, fin da questi semplici esempi si può notare come questo framework sia facile da utilizzare in quanto utilizza molto html5 e pochissimo javascript.

Hello World con jQuery Mobile

Quando si inizia a vedere un nuovo linguaggio di programmazione (o un nuovo framework come in questo caso) il primo esempio non può che essere un classico hello world! Per usare jQuery Mobile è necessario includere tre file esterni nella nostra pagina html:

  • un file css con lo stile usato da jQuery Mobile
  • un file javascript contenente il codice di jQuery, come si può intuire dal nome jQuery Mobile si appoggia su jQuery e quindi ha bisogno di questo per funzionare
  • un file javascript con il codice sorgente di jQuery Mobile

Per creare una pagina con jQuery Mobile è necessario usare una classica formattazione html utilizzando dei tag div. In base all’attributo data-role i div rappresentano la pagina nel suo complesso o porzioni diverse della pagina. In questo esempio usiamo i valori page, header, content e footer, il significato è evidente in base al nome e non necessita di ulteriore spiegazione. Il codice completo di questo hello world è quindi il seguente:

<!DOCTYPE html>
<html>
<head>
  <title>CoseNonJaviste</title>
  <meta name="viewport" 
  	content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  	
</head>

<body>

<div data-role="page">

  <div data-role="header">
    <h1>CoseNonJaviste</h1>
  </div>
  
  <div data-role="content">
	<p>Hello world!</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h4>Footer</h4>
  </div>
  
</div>
</body>
</html>

Da notare il tag meta nell’header della pagina per far adattare meglio l’interfaccia alla risoluzione di un device mobile. Aprendo la pagina su uno smartphone Android o su un iPhone (ma anche su un browser classico come Firefox o Chrome) possiamo vedere il risultato:

Hello world con jQuery Mobile su iPhone Hello world con jQuery Mobile su Android

La pagina è molto semplice ma non è affatto male se si pensa che abbiamo scritto appena 30 righe di codice html e non abbiamo scritto nè un css nè una riga di javascript! Ovviamente jQuery mobile supporta più o meno tutti i browser e i dispositivi mobile, sul sito ufficiale potete consultare la lista completa.

Più pagine in un file

Abbiamo visto che la pagina viene individuata con un div e non dal body, grazie a questa scelta è possibile mettere più pagine (volendo anche un intero sito) in un singolo file html. Aggiungiamo quindi una pagina di about al nostro esempio:

<div data-role="page" id="about" data-add-back-btn="true">

  <div data-role="header">
    <h1>CoseNonJaviste</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="aaaa.html">Autori</a></li>
        <li><a href="bbb.html" >Categorie</a></li>
        <li><a href="ccc.html" >Post</a></li>
      </ul>
    </div>
  </div>
  
  <div data-role="content">
  <p>
    In questo Blog un gruppo di professionisti che lavorano da anni in progetti JavaEE e Android condivideranno le loro esperienze professionali.
  </p>
  </div>

  <div data-role="footer" data-position="fixed"
      data-id="footernav">
    <h4><a href="/" data-ajax="false" data-role="none" 
      style="color: white;text-decoration: none;">
        Versione desktop
    </a></h4>
  </div>
  
</div>

Prima di vedere i tag e gli attributi usati vediamo come viene visualizzata questa pagina su un browser iPhone e Android:

Pagina di about con jQuery Mobile su iPhone Pagina di about con jQuery Mobile su Android

Rispetto alla pagina di hello world abbiamo aggiunto una navigation bar nell’header, per crearla basta usare un div con data-role="navbar" contenente una lista non ordinata rappresentata da un ul. Altra cosa da notare è il pulsante back nell’header, è presente grazie all’attributo data-add-back-btn="true" aggiunto al div della pagina. Il link alla versione desktop sul footer è un classico tag a ma contiene due attributi interessanti:

  • data-role="none": tutti i link nel footer vengono trasformati in automatico in bottoni, per evitare questa trasformazione dobbiamo usare questo attributo valorizzato a none. jQuery Mobile usa la stessa tecnica (chiamata progressive enhancement) anche per tutti i tag di input di una form (radiobutton, checkbox, combobox, campi di input, …) per renderli mobile friendly, questo attributo può essere usato anche con questi tag;
  • data-ajax="false": il comportamento di default di jQuery Mobile nel caso di link interni al sito e di submit di form è quello di effettuare chiamate ajax e di modificare il dom di conseguenza senza cambiare pagina. In questo utilizziamo questo attributo per fare una normale chiamata in get.

Creare un link verso questa pagina è molto semplice, nel nostro caso abbiamo modificato l’header per aggiungere un link che verrà visualizzato sulla destra del titolo grazie alla classe ui-btn-right. Per aggiungere una icona è possibile usare l’attributo data-icon, in questo caso abbiamo usato il valore info ma tutte le icone disponibili sono elencate nella documentazione ufficiale.

<div data-role="header">
  <h1>CoseNonJaviste</h1>
  <a href="#about" class="ui-btn-right" 
  	data-icon="info">About</a>
  <div data-role="navbar">
    <ul>
      <li><a href="aaaa.html" class="ui-btn-active">Autori</a></li>
      <li><a href="bbb.html" >Categorie</a></li>
      <li><a href="ccc.html" >Post</a></li>
    </ul>
  </div>
</div>

Liste con jQuery Mobile

Le app mobile (sia web che non) sono sempre piene di liste, sono facili da consultare anche su un dispositivo piccolo e quindi molto usate. Vediamo con un esempio come creare una lista degli autori di questo blog usando jQuery Mobile.

Una lista su jQuery Mobile è semplicemente un tag ul con data-role="listview", ogni li è una riga della lista:

<div data-role="content">
  <ul data-role="listview" data-inset="true" 
      data-filter="true"
      data-filter-placeholder="Cerca autori...">
    <li data-role="list-divider">Fondatori</li>
    <li>
      <img src="http://gravatar.com/avatar/684ede46c9386ff5430335a42fd5b011?s=80" />
      <h2>Andrea Como</h2>
      <span class="ui-li-count">35</span>
    </li>
    <li>
      <img src="http://gravatar.com/avatar/e598eeb5b7ef8846bfdfd0afbc65c2c9?s=80" />
      <h2>Fabio Collini</h2>
      <span class="ui-li-count">30</span>
    </li>
    <li>
      <img src="http://gravatar.com/avatar/39e74d6109ddf85f965b0705a70d6182?s=80" />
      <h2>Manuele Piastra</h2>
      <span class="ui-li-count">25</span>
    </li>
    <li data-role="list-divider">Contributor</li>
    <li>
      <img src="http://gravatar.com/avatar/3eec077e672a69f5acddbade0c9f4aaf?s=80" />
      <h2>Gianni Amendola</h2><span class="ui-li-count">6</span>
    </li>
    <li>
      <img src="http://gravatar.com/avatar/2fc7c345f3c40aad02aca88459b1eb4a?s=80" />
      <h2>Giampaolo Trapasso</h2>
      <span class="ui-li-count">4</span>
    </li>
    <li>
      <img src="http://gravatar.com/avatar/850e212fc08f65543baa3e98246b606e?s=80" />
      <h2>Lorenzo Fiammetta</h2>
      <span class="ui-li-count">3</span>
    </li>
    <li>
      <img src="http://gravatar.com/avatar/a2efeed6d37efccf412d61f49fc6e232?s=80" />
      <h2>Gabriele Biagiotti</h2>
      <span class="ui-li-count">2</span>
    </li>
  </ul>
</div>

In questo esempio in ogni riga abbiamo aggiunto anche una immagine e il numero di post pubblicati che viene mostrato sulla destra grazie all’utilizzo della classe ui-li-count. Per dividere le righe della lista in più sezioni abbiamo usato dei separatori rappresentati da tag li con data-role="list-divider":

Lista con jQuery Mobile su iPhone Lista con jQuery Mobile su Android

Anche in questo caso il risultato è secondo me stupefacente se lo confrontiamo al numero di righe di codice scritte. Ultime due cose da notare: grazie all’attributo data-inset="true" la lista non occupa tutto lo spazio in orizzontale mentre usando data-filter="true" è stato aggiunto un campo di ricerca sopra la lista. La cosa bella è che questo attributo non aggiunge solo il campo di ricerca ma anche tutto il codice javascript per eseguire la ricerca ogni volta che viene inserito un carattere!

Conclusioni

jQuery Mobile è sicuramente un ottimo framework da utilizzare per sviluppare web app mobile. Ovviamente il risultato non è ai livelli delle app native per Android e iOS, per esempio nelle transazioni fra una pagina e l’altra soprattutto su dispositivi Android si nota un po’ di ritardo. Comunque con il passare del tempo il gap si sta assottigliando sempre di più grazie al miglioramento dei browser e dell’hardware dei dispositivi mobile e le app sviluppate con jQuery Mobile con PhoneGap saranno sempre più numerose.

La curva di apprendimento per imparare a usare questo framework è quasi piatta, se siete sviluppatori web anche senza troppa esperienza vi sentirete subito a vostro agio. Il sito ufficiale contiene una ottima documentazione e una demo completa di tutti i componenti disponibili. Esistono anche molti libri sull’argomento, uno scritto molto bene e che tratta tutti i principali argomenti senza essere troppo lungo è jQuery Mobile Web Development Essentials.

Se volete spulciare il codice di questo esempio trovate tutto in questa pagina di demo, come promesso è tutto in una singola pagina html che non contiene neanche una riga di codice javascript!

Fabio Collini

Software Architect con esperienza su piattaforma J2EE e attualmente focalizzato principalmente in progetti di sviluppo di applicazioni Android. Attualmente sono nel team Android di Cynny, ci stiamo occupando dello sviluppo dell'app Morphcast. Coautore della seconda edizione di Android Programmazione Avanzata e docente di corsi di sviluppo su piattaforma Android. Follow me on Twitter - LinkedIn profile - Google+

  • passioneiphone

    Ciao vorrei creare una webapp per il mio blog ma non ci riesco assolutamente… vedo che sei molto ferrato sull’argomento, mi daresti una mano?

    • Ciao, se hai già un blog con WordPress ti consiglio di usare un plugin di WordPress che crea la versione mobile del sito. Creare da zero una cosa del genere non è proprio semplice e un po’ di tempo ci vuole!

      • passioneiphone

        Ho già WPTouch pro che mi trasforma il sito in mobile, quello che volevo creare era un browser dove poter iserire il sito in mobile dato che la webapp di WPTouch non mi permette di visualizzare alcuni contenuti… Spero di essermi spiegato. Grazie

        • bais

          Hai provato ad usare l’accoppiata Chrome + Ripple scaricato dal sito della blackberry?

  • Ciao, se hai già un blog con WordPress ti consiglio di usare un plugin di WordPress che crea la versione mobile del sito. Creare da zero una cosa del genere non è proprio semplice e un po’ di tempo ci vuole!

  • Pingback: 2012, un anno di CoseNonJaviste | Cose Non Javiste()

  • Pingback: My Homepage()

  • iMelaWorld

    Ho osservato con piacere che passioneiphone ha risolto raggiungendo a mio parere un ottimo risultato, siccome sono interessato anche io a questo argomento potresti riportare come hai fatto?

  • Roberta

    Ciao … complimenti… volevo sapere se per le immagini hai usato telerik radbinaryimage cioè sono immagini binarie.. fammi sapere… grazie ancora Roberta

    • Fabio Collini

      Ciao, per questo esempio non ho usato accortezze particolari per le immagini. Sinceramente non conosco il framework che hai citato, vedendo il sito sembra per .net ma in questo post l’esempio era totalmente lato client.

      • Roberta

        si ho visto… ed ho anche visto che le immagini non erano semplici immagini, ma probabilmente un insieme di byte… è che dovrei richiamare delle immagini binarie nella mia app… fatte con telerik radbinaryimage… se sai dirmi qualcosa a tal proposito… mi fai un piacerone

  • Pingback: Tutorial jQuery Mobile: come creare una semplic...()

  • Valerio

    Ciao Fabio… complimenti! io ho un sito web che dovrà diventare responsive. A una classe c’è applicato un effetto con jquery. Volevo sapere se c’è qualche modo per escludere jquery dalla risoluzione per mobile, in modo che non mi resituisca quell’effetto. Grazie