Oltre a descrivere le funzionalità di jQuery Mobile, in questa guida metteremo alla prova la libreria realizzando l'interfaccia di una semplice applicazione web chiamata Music Manager.
L'applicazione conterrà alcune pagine introduttive ed esplicative, una lista di brani musicali e la relativa interfaccia per inserirne di nuovi.
In alcuni casi ricorreremo a funzionalità lato client dei browser di ultima generazione come
il Local Storage per garantire la persistenza dei dati fra una pagina e l'altra, comunque non verranno coperte le caratteristiche lato server per il salvataggio dei dati in quanto esulano dal tema della guida.
Installazione e primi passi
Il primo passo per iniziare il progetto Music Manager è quello di preparare un template generico di pagina.
Rivolgendoci a dispositivi mobile abbiamo deciso di utilizzare HTML5, in quanto supportato da tutti i browser di grado A.
Nel caso il browser dell'utente non supporti HTML5, questo degraderà verso HTML4, perdendo alcune feature avanzate ma garantendo comunque la fruizione dei contenuti.
Dalla documentazione ufficiale ricaviamo il boilerplate, cioè il template di base per una pagina con jQuery Mobile e adattiamone un pò i testi:
<!DOCTYPE html>
<html>
<head>
<title>Music Manager</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Music Manager - Homepage</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
<p>Questa è l'homepage di Music Manager!.</p>
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Credits: Marco Solazzi e <a href="http://www.html.it" target="_blank">HTML.it</a></h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>La prima porzione di codice interessante è quella relativa al meta tag viewport, che imposta alcune caratteristiche di default per la visualizzazione della pagina. In questo caso la larghezza del documento deve coincidere con quella dello schermo e lo zoom iniziale sarà uguale al 100%.
A seguire includiamo il foglio di stile di jQuery Mobile ed i due file Javascript di jQuery e jQuery Mobile. La scelta di utilizzare le versioni ospitate sui server di jQuery non è casuale. Solitamente questi repository sono dei CDN geolocalizzati, perciò le risorse veranno scaricate dal server più vicino a voi. Inoltre è più facile che queste stesse risorse siano già state utilizzate in altri siti che avete visitato e quindi siano già presenti nella cache del browser.
Poiché in ambito mobile è importante risparmiare richieste HTTP inutili, questa risulterà la scelta più performante.
Passando ad esaminare l'interno del tag body, noterete che alcuni tag sono accompagnati dall'attributo data-*. Tale attributo rientra nelle specifiche di HTML5 e può essere utilizzato per impostare dei metadata relativi all'elemento.
jQuery Mobile fa largo uso degli attibuti data-* per definire i vari elementi dell'interfaccia in modo semplice, senza costringere gli sviluppatori in schemi troppo rigidi o a scrivere grosse quantità di codice JavaScript. Una volta caricato il DOM, sarà il framework a prendersi carico dell'operazione di interpretare le pagine.
A questo punto possiamo già visualizzare live la prima pagina del nostro progetto.
Nella prossima lezione analizzeremo più a fondo la struttura del template ed altre tipologie di pagine.
