Platform. • Oltre un miliardo di smartphone al mondo. • Costruire siti Web e applicazioni per dispositivi mobili utilizzando jQueryMobile e HTML5. • Ulteriori informazioni su PhoneGap per la costruzione di applicazioni "ibride" per ios & android. • Semplice integrazione con servizi e tecnologie web come ajax, xml, json, rest, xml-rpc Limiti: • Limitato accesso all'hardware del dispotivo. • Tecnologie ancora giovani. • Cambiamento ancora in corso di API e librerie.
essere abbastanza grande da potersi toccare. • Ridurre al minimo la necessità di digitare • No mouseover, eventi MouseMove, invece possiamo gestire eventi come swipe, swipeleft, swiperight, orientationchange, tap, taphold, etc • Controlli Form Ottimizzati. • Un solo codice molti device: ◦ ios (Apple) ◦ andorid (vari vendor) ◦ bada (Samsung) ◦ Windows Phone (Microsoft) ◦ Tutti gli altri: blackberry (Rim), Meego (Intel?), Symbian (Nokia), webOS (Palm) • Identico "look and feel" su tutte le piattaforme supportate. (può essere visto come punto a favore o come punto a sfavore.)
di una pagina tramite gli attributi data-role. Le interfacce dell'applicazione vengono definite tramite markup, c'è una buona divisione tra rappresentazione e comportamento. La libreria standard di jquery mobile mette a disposizione molti elementi: • Liste • Pulsanti • Form • Immagini • Header e Footer • Tab, calendari • Link e Pulsanti di navigazione • ... altri sono disponibili tramite plugin • ma è semplice creare "componenti" con html e scriverne la logica in javascript
dal server che fornisce l'applicazione. (con phonegap si può andare oltre ed avere una whitelist di domini accessibili.) 1 $.ajax( 2 { 3 url: 'mio_url/', 4 dataType: 'json', 5 success: function(data) 6 { 7 // manipolare i dati 8 } 9 error: function(e) 10 { 11 // gestire l'errore 12 } 13 }); Tutte le funzionalità di jquery: • eventi • selettori css3 • modifica del dom: modifica elementi, selezione, creazione, nascondi/mostra, etc..
4 { 5 return 'localStorage' in window && window['localStorage'] !== null; 6 } 7 catch(e) 8 { 9 return false; 10 } 11 } 12 13 localStorage.setItem('key', 'value'); 14 15 var value = (localStorage.getItem('key')); localStorage => un sistema di memorizzazione e gestione delle informazioni sul device dell'utente che consente di manipolare in maniera semplice e veloce fino a 5 mega di dati. Sfortunatamente iOS 5.1 ha introdotto il conetto di localstorage non persistente, in quanto safari può cancellarlo quando vuole. (Nota: phonegap 1.6 permette di usare localstorage in maniera persistente anche su ios)
Reset del localstorage 1 localStorage.clear(); Supporto: • Opera & Opera Mobile (ma non da Opera mini) • Safari Desktp & iOS • Android • Firefox • Chrome
poco supportato, al momento nel mobile, si trova solo su versioni recenti di chrome e firefox. • Permette di utilizzare sia api sincrone che asincrone. WebSQL • Praticamente basato su sqlite su tutti i browser che lo supportano • Database relazionale classico si interroga tramite sql.
l' object relational mapping. Può essere utilizzato sia nel browser web e sul server utilizzando node.js. Lato mobile supporta: HTML5 WebSql o in memmory come fallback (con possibilità di essere serializzato e deserializzato su localstorage) 1 // configurazione 2 persistence.store.websql.config(persistence, 'database', 'una qualsiasi descrizione', 5 * 1024 * 1024); 3 // definizione schema 4 var Persona = persistence.define('Persona', 5 { 6 name: 'TEXT', 7 cognome: 'TEXT', 8 mail: 'TEXT' 9 }); 10 // creazione "tabelle" 11 persistence.schemaSync(); 12 var cliente = new Persona; 13 cliente.nome = 'Mario' 14 cliente.cognome = 'Rossi' 15 cliente.mail = '[email protected]'; 16 // insert elemento e transazione 17 persistence.add(cliente); 18 persistence.flush(); Si pensa in termini di oggetti e alle loro relazioni non a tabelle e a chiavi esterne.
utilizzano JavaScript, HTML5 e CSS3, invece linguggi nativi della piattaforma come ad esempio Objective-C o Java. Le applicazioni che ne derivano sono applicazioni ibride, nel senso che queste non sono né veramente nativa (tutto il rendering del layout è fatto tramite una WebView, invece dei widget nativi della piattaforma) né puramente web based (cioè non si va a scrivere una applicazione web, ma un app confezionata per la distribuzione su AppStore, Google Play, Android Market, etc... e di avere accesso ad una parte dell'interfaccia di programmazione dispositivo di applicazione). Tipicamente phonegap permette l'accesso a: • filesystem • camera • accellerometri • rete • suoni • eventi del dispositivo • geolocalizzazione
del sistema, sono disponibili pacchetti per mac e xcode, con target ios, pacchetti per android sdk ed eclipse, per blackberry e per windows phone ma non tutte le funzionalità sono implementate su ogni sistema. La struttura di un applicazione Phonegap è la seguente: • www ◦ index.html ◦ phonegap.js ◦ js ▪ logica dell'applicazione e librerie ◦ css ▪ gli stili ◦ img ▪ asset statici • phonegap.plist • resources ◦ icon.png
casi facilmente automatizzabile (android, java e ant), in altre situazioni dipedente dall'ambiente di sviluppo e difficilmente automatizzabile (vedere ad esempio xcode sotto mac). • Crea una webview, ossia un istanza del browser (ad esempio webkit), senza toolbar, statusbar, etc • copia la directory www e tutto il contenuto dentro il pacchetto dell'applicazione • apre il file index.html • mette a disposizione del motore del javascript le api native • permette di effettuare richieste di rete verso una serie di url definiti dentro phonegap.plist agendo da proxy. • notifica gli eventi esterni (rotazione del dispositivo, pause, pulsante menu premuto, etc) • patcha in alcuni casi la webview per avere un comporamento standard, proponendo la propria versione. (è il caso recente di localstorage sotto ios)
alert di javascript, ma non abbiamo la possibilità di cambiare il title, presenta sempre: "index.html", se può essere usato insieme a console.log per fini di debug è invece poco presentabile in un app finita. Si può ricorrere ad alert realizzati ad hoc con css e javascript ma phonegap mette a disposizione un api molto semplice per la gestione degli alert nativi. 1 navigator.notification.alert 2 ( 3 'messaggio dell'alert, 4 function (event) 5 { 6 // funzione di callback 7 }, 8 'titolo dell'alert, 9 'caption del bottone' 10 );
3 fileSystem.root.getFile("file.txt", {create: true}, gotFileEntry, fail); 4 } 5 function gotFileEntry(fileEntry) 6 { 7 fileEntry.createWriter(gotFileWriter, fail); 8 } 9 function gotFileWriter(writer) 10 { 11 writer.onwrite = function(evt) 12 { 13 console.log("write success"); 14 }; 15 writer.write("un qualsiasi testo"); 16 } 17 function fail(error) 18 { 19 console.log(error.code); 20 } Le api sono tipicamente asincrone, si richiede all'accesso al filesystem, quindi utilizziamo un filewriter o un filereader, per scrivere o leggere. La limitazione più grande è l'impossibilità di gestione di dati binari, si legge e si scrive solo utf8
toshi0383
estie
ruzia
lewuathe
zsmb
bkuhlmann
josepaumard
unvalley
fsubal
mackey0225
yosuke_furukawa
addyosmani
hursman
speakerdeck
trishagee
carmenintech
geeforr
stephaniewalter
sugarenia
lynnandtonic
revolveconf
jnunemaker
