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:

  
  
  
  
            






  

    
CoseNonJaviste
  
  
  

        
Hello world!
  

  

    
Footer
  
  

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:

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:

  

    
CoseNonJaviste
    

      

        
Autori
        
Categorie
        
Post
      
    
  
  
  

  

    In questo Blog un gruppo di professionisti che lavorano da anni in progetti JavaEE e Android condivideranno le loro esperienze professionali.
  
  

  

    

        Versione desktop
    
  
  

Prima di vedere i tag e gli attributi usati vediamo come viene visualizzata questa pagina su un browser iPhone e 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.

  
CoseNonJaviste
  About
  

    

      
Autori
      
Categorie
      
Post
    
  

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:

  

    
Fondatori
    

      35
    
    

      30
    
    

      25
    
    
Contributor
    

      6
    
    

      4
    
    

      3
    
    

      2
    
  

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":

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 è .

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!