Brainleaf
Web Resources

Jquery Mobile Tutorial

In questo articolo prenderemo in esame un framework molto usato ultimamente per la creazione di web app per samrtphone e tablets. Il framework in questione è JQuery Mobile e il sito di riferimento è www.jquerymobile.com
Non starò qui a fare le pulci a questo linguaggio, ognuno di voi potrà spulciarsi il sito di riferimento e capirne limiti e vantaggi, ma cercherò invece di esporvi un facile modo di prendere confidenza con questo ottimo strumento.
Questo tutori al vi guiderà nella creazione di una piccola web app di qualche pagina, adatta magari per piccole aziende.

La Prima Pagina

La creazione di una pagina con implementazione di JQuery Mobile è sostanzialmente molto semplice e simile ad un file HTML 5.
La pagina si apre infatti con un comunissimo tag <HTML> al quale si farà seguire un altrettanto comunissimo tag <head> all'interno del quale inseriremo titolo, metatags, link ad eventuali linguaggi, quali appunto Javascript o JQuery Mobile. Ecco un esempio:

<!DOCTYPE html> 
 
	</head> 
	<title>My Page</title>
	<!-- CON LE SEGUENTI RIGHE RICHIAMO JQUERYMOBILE NELLA PAGINA -->
<meta name="viewport" content="width=device-width, initial-scale=1"&gt;
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

La nostra pagina continuerà quindi in stile HTML chiudendo l'head ed aprendo un classico body.
Da qui si entrerà ora nello specifico di JQuery Mobile.
La possibilità principale di questo framework è appunto quella di poter creare più pagine in un unico file. Questo è possibile grazie all'uso del tag <div data-role="page" id="home"> dove data-role="page" sta appunto a dichiarare al browser che ciò che è racchiuso in questo tag è da considerarsi una pagina indipendente dal resto del contenuto del file. Qualora volessimo quindi creare più pagine basterà ripetere questo tag più volte. Vedremo in seguito come utilizzare questa feature.

Proseguendo oltre nella formattazione della pagina, si giunge all'inserimento di altri tag molto utili per la creazione di elementi grafici e contenutistici  di una pagina, primi fra tutti "header" , "content" e "footer". Non che questi elementi siano fondamentali ma sono però necessari se vogliamo che il nostro prodotto finale assomigli il più possibile ad un'applicazione nativa.

La nostra prima pagina sarà quindi inizialmente composta solo da queste tre parti e sarà così compilata:

HEAD DELLA PAGINA
BODY

HEADER
CONTENT
FOOTER

e il suo codice completo sarà:

<!DOCTYPE html> 
 
<head>	 
	 
	<title>My Page</title>
	<!-- CON LE SEGUENTI RIGHE RICHIAMO JQUERYMOBILE NELLA PAGINA -->
<meta name="viewport" content="width=device-width, initial-scale=1"&gt;
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<!-- APRO LA PAGINA --><div data-role="page"><!-- APRO HEADER --><div data-role="header"><h1>My App</h1></div><!-- CHIUDO HEADER --> <!-- APRO CONTENT --><div data-role="content"><p>Hello world</p></div><!-- CHIUDO CONTENT --> <!-- APRO FOOTER --><div data-role="footer"><h2>Footer</h2></div><!-- CHIUDO FOOTER --></div><!-- CHIUDO LA PAGINA -->

</body>
</html>


Ora non resta che salvare la pagina come helloworld.html e visualizzarla con un browserper renderci conto del risultato.

Esempio della pagina Hello World

Ricapitolando ciò che abbiamo preso in esame in questa pagina in jquerymobile esistono dei tag in grado di formattare la pagina, o alcune sue parti, in un dato modo.
I tag incontrati in questo capitolo sono:

  • data-role="page" -> CREA UNA PAGINA
  • data-role="header" -> CREA UNA BARRA HEADER
  • data-role="content" -> CREA UNO SPAZIO FORMATTATO PER I CONTENUTI
  • data-role="footer" -> CREA UNA BARRA FOOTER


Questo è quanto per questo nostro primo articolo su JQuery Mobile.
Nei prossimi articoli prenderemo in esame un uso più avanzato e completo di questo linguaggio.

Joomla SEF URLs by Artio