Cos’è il framework jQuery Mobile?

Partiamo prima di tutto col dire che il framework altro non è che una struttura di supporto ad un linguaggio, oserei dire un “pacchetto” contenente oggetti, metodi e funzioni del linguaggio stesso, in questo caso di una sotto libreria: jQuery Mobile. Esso quindi raccoglie i metodi per realizzare in quattro e quattr’otto una pagina web touch screen per dispositivi mobile. Sembra incredibile ma vero. Per rendervi meglio l’idea di cosa faccia concretamente ho messo a disposizione un link dimostrativo (se lo navigate da un dispositivo mobile magari tra quelli compatibili sarete in grado di comprendere la potenzialità del framework). Dopo aver visto ciò andiamo avanti.

Compatibilità

jQuery Mobile è stato ideato per essere compatibile con le seguenti piattaforme:

• Apple iOS;
• Android;
• Blackberry;
• WebOS Pre;
• Nokia (N900).

A questo punto mi dilungherei un attimino nel dettaglio delle versioni poichè nei test ho notato sostanziali differenze tra i dispisitivi.

Apple iOS

Essendo Apple portatrice sana di webkit non ci sono particolari problemi ed il framework risulta essere stabile su tutte le versioni di: iPhone, iPod Touch e iPad

Android

Dal quartier generale dicono che ogni verisone di Android supporta jQuery Mobile. Da quanto mi risulta non ci dovrebbero essere problemi a parte il touch che non è supportato da alcuni dispositivi (tutta via c’è il buon vecchio click).

Blackberry

Ho dovuto battagliare un pò essendo blackberry il dispositivo dove ho notato diversi cambiamenti a seconda delle versioni. Non a caso jQuery si lava le mani supportando dalla versione 6 in poi (Torch). Il classico blackberry “bold” offre una vista spartana del framework ma comunque navigabile.

WebOS (Palm)

E’ supportato nelle versioni Palm WebOS Pre e Pixi. Questo sistema operativo viene montato generalmente sui palmari.

Nokia

L’unico dispositivo che supporta jQuery Mobile è l’N900 visto che è al momento l’unico che non monta Symbian.

Per ottenere una mappatura nel dettaglio, sul sito ufficiale c’è una tabella illustrativa che aggiorna versione dopo versione lo status di compatibilità con i sistemi oprerativi montati su smartphone e tablet.

Symbian e Windows Mobile

Due sistemi opposti in tutto però accumunati dalla scarsa compatibilità con il framework. Symbian nonostante sia un sistema operativo la cui quota di maggioranza era stata in passato detenuta dalla Nokia la stessa Nokia sta un pò rivalutando la sua strategia d’azienda pensando di montare altri OS sui propri cellulari per mantenere la stessa concorrenzialità dei colleghi (l’N900 ne è una dimostrazione lampante). Per quanto riguarda Windows Mobile, invece, il discorso è un pò diverso, su opera mobile e netfront ad esempio l’efficacia di jQuery Mobile è pari a zero mentre su Opera Mini (v 5.0 e superiori) c’è la massima compatibilità. Secondo un mio modestissimo parere la colpa sta nei browser e soprattutto a chi ha pensato di realizzarli pensando più a spostare l’ago della bilancia verso il wap piuttosto che sul web, perchè, dopotutto un sito web versione mobile altro non è che un sito web vero e proprio ristretto in 300 pixel (pixel piu pixel meno).

Metodi

Partendo dal presupposto che il selettore del framework è $.mobile() o jQuery.mobile() come avrete visto nell’esempio la particolarità di jQuery Mobile sta nel cambio pagina a mò di slider a tutta pagina. L’evento changePage gestisce questo tipo di funzionalità:

     jQuery.mobile.changePage('url', 'effetto');

dove url è la pagina di destinazione mentre effetto il tipo di transizione con il quale scorrere la pagina (‘pop’, ‘slide’, ‘none’).

Esempi:

     //esempio che richiama una pagina statica
     jQuery.mobile.changePage('pagina2.html', 'slideup');

     //esempio che richiama una pagina dinamica
     jQuery.mobile.changePage({
	   url: "search.php", 
	   type: "get", 
	   data: jQuery("form#search").serialize();
    });	

pageLoading, invece, è il metodo che mostra o nasconde il messaggio di caricamento pagina.

     jQuery.mobile.pageLoading();

Installazione

Scaricare il framework dalla sezione download dal sito ufficiale (appena 78Kb) e richiamare all’interno dei tag <head> della pagina i 3 files che la libreria mette a disposizione (un css, e 2 javascript):

Adesso abbiamo il framework completo nella nostra pagina in meno di 37Kb.

Esempio

Ecco qui un esempio di jQuery Mobile all’interno di una semplice pagina html. C’è da dire che il framework si basa su HTML5. Se non lo avete gia fatto modificate il doctype:

Partendo dall’header includo le librerie:

Nel corpo della pagina creo 2 div, il primo a cui do id=”foo” rappresenta la pagina principale:

 
        
 
             
Header
 
        
 
	
 
		
Benvenuti nella mia home page!
 
		
Vai alla pagina interna
	
 
	
 
		
Footer
 
	

e il secondo subito dopo il precedente rappresenta la pagina interna:

 
	
 
		
Pagina interna
 
	
 
	
 
		
Questa è una pagina interna
 
		
Torna indietro
 
	
 
	
 
		
Footer
 
	

Ottenendo un risultato simile al seguente:

 
 
	 
	 
	 
	 
	 

 

 
        
 
             
Header
 
        
 
	
 
		
Benvenuti nella mia home page!
 
		
Vai alla pagina interna
	
 
	
 
		
Footer
 
	


 
	
 
		
Pagina interna
 
	
 
	
 
		
Questa è una pagina interna
 
		
Torna indietro
 
	
 
	
 
		
Footer
 
	

Ogni porzione è identificata da data-role (page, content, footer, header, ecc…), ad esempio attribuendo al data-role il valore “header” il framework sa gia che deve costruirsi un’intestazione con un bottone “back” per tornare indietro in caso di pagina interna; per spostarci da una pagina all’altra, invece, utilizziamo l’attributo id.

Potete scaricare l’esempio cliccando qui.

Documentazione

La documentazione ufficiale (in inglese) si trova all’indirizzo http://jquerymobile.com/demos/1.0a2/, la particolarità è quella di essere già ottimizzata per mobile e oltre a contenere le cose che ho precedentemente spiegato ci sono innumerevoli spiegazioni approfondite su metodi, componenti e api (in particolare interessantissimo quelle per ajax che richiederebbero un articolo a parte) che la libreria mette a disposizione.