PhoneGap
Realizzare applicazioni per periferiche differenti - iPhone, Android, Windows Mobile etc - richiede di volta in volta framework e linguaggi diversi.
PhoneGap uses standards-based web technologies to bridge web applications and mobile devices.
PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS (and access to native APIs).
I requisiti minimi richiesti da PhoneGap sono identici a quelli di Android:
Per iniziare, scarica l'ultima versione di PhoneGap da (qui) e poi...
unzip phonegap-2.5.0.zipcd phonegap-2.5.0/lib/android/./bin/create ~/src/HelloWorld \it.alcacoop.helloworld HelloWorld
./create project_folder_path package_name project_name
<!DOCTYPE html><html><head><title>Hello World</title></head><body><h1>My first Cordova app</h1></body></html>
Come una qualunque applicazione Android:
$ ant debug...$ ant installd
Ad esempio per poter utilizzare l'API delle notifiche android è necessario:
<plugin name="Notification"value="org.apache.cordova.Notification"/>
<uses-permissionandroid:name="android.permission.VIBRATE" />
function alertDismissed() {// do something}navigator.notification.alert('You are the winner!', // messagealertDismissed, // callback'Game Over', // title'Done' // buttonName);
JQM include una vasta gamma di widgets UI touch-friendly: bottoni, elementi dei form, collapsible, accordion, popup, dialog, tabelle responsive, etc.
Vediamo come utilizzarli...
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<a href="#" data-role="button"data-icon="star">Star button</a>
<ul data-role="listview" data-inset="true"data-filter="true"><li><a href="#">Acura</a></li><li><a href="#">Audi</a></li><li><a href="#">BMW</a></li><li><a href="#">Cadillac</a></li><li><a href="#">Ferrari</a></li></ul>
<ul data-role="listview" data-inset="true"><li><a href="#"><img src="../../_assets/img/album-bb.jpg"><h2>Broken Bells</h2><p>Broken Bells</p></a></li><li><a href="#"><img src="../../_assets/img/album-hc.jpg"><h2>Warning</h2><p>Hot Chip</p></a></li></ul>
<div data-role="collapsible-set"data-theme="c" data-content-theme="d"><div data-role="collapsible"><h3>Section 1</h3><p>I'm the collapsible content for section 1</p></div><div data-role="collapsible"><h3>Section 2</h3><p>I'm the collapsible content for section 2</p></div></div>
<form><div data-role="fieldcontain"><label for="select-native-1">Basic:</label><select name="select-native-1" id="select-native-1"><option value="1">The 1st Option</option><option value="2">The 2nd Option</option><option value="3">The 3rd Option</option></select></div></form>
JQM include un set di elementi form standard, adattati per essere widget touch-friendly.
<form><label for="textinput-s">Text Input:</label><input type="text" name="textinput-s" id="textinput-s"placeholder="Text input" value="" data-clear-btn="true"><label for="select-native-s">Select:</label><select name="select-native-s" id="select-native-s"><option value="small">One</option><option value="medium">Two</option></select><label for="slider-s">Input slider:</label><input type="range" name="slider-s" id="slider-s" value="25"min="0" max="100" data-highlight="true"></form>
Utilizzato per fornire opzioni di scelta booleana, del tipo vero/falso o on/off.
<form><label for="flip-1">Flip toggle switch:</label><select name="flip-1" id="flip-1" data-role="slider"><option value="off">Off</option><option value="on">On</option></select></form>
<div data-role="navbar"><ul><li><a href="#" class="ui-btn-active">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul></div>
JQM possiede un framemork di customizzazione grafica molto robusto che supporta fino a 26 set di colori per le toolbar, i contenuti e i bottoni. Questi set prendono il nome di "swatch".
<a href="#" data-role="button"data-icon="star" data-theme="a">data-theme="a"</a>
I temi già inclusi in JQM corrispondono alle lettere comprese tra la "a" e la "e" (a è lo swatch di default).
Per costruire in maniera semplice temi grafici molto customizzati, si può ricorrere all'applicazione web ThemeRoller.
Una volta costruito il tema, è sufficiente scaricarlo ed includerlo nel proprio progetto JQM.
L'utilizzo di tecnologie web per lo sviluppo di applicazioni mobile ci permette di affrontare il debug delle nostre applicazioni con strumenti conosciuti. Per esempio, Firebug (o i Developer Tool già contenuti in molti browser) ci consente di:
Pro:
Contro: