jQuery Mobile e Cordova/PhoneGapin applicazioni Android

Salvatore Carotenuto, StartUp Solutions

LinuxDay 2012 – 26/10/2012, Teatro Carlo Gesualdo, Avellino

1. scarichiamo l'Android SDK

2. aggiorniamo i pacchetti dell'Android SDK

2. aggiorniamo i pacchetti dell'Android SDK

3. apriamo NetBeans e installiamo il plugin per lo sviluppo Android

3b. aggiungiamo la sorgente da dove scaricare il plugin per lo sviluppo Android

3b. aggiungiamo la sorgente da dove scaricare il plugin per lo sviluppo Android

3c. selezioniamo i pacchetti “Android” e “Android Test Runner” dalla lista dei plugin disponibili, e clicchiamo su “Install”

4. ora siamo pronti per creare un nuovo progetto Android:

4b. visto che non è ancora stato assegnato l'Android SDK all'ambiente, clicchiamo sul bottone “Manage Android SDK”

4c. si aprirà una finestra di opzioni, nella quale inseriremo il path dove abbiamo scompattato l'Android SDK

4d. selezioniamo la target platform, definiamo gli altri campi (nome progetto, package...) e procediamo cliccando su “Finish”

4e. a questo punto il nostro progetto è (quasi) pronto

5. (opzionale) creiamo un Android Virtual Device

5b. (opzionale) creiamo un Android Virtual Device

5c. (opzionale) creiamo un Android Virtual Device

6. lanciamo “Run” da NetBeans (se avete scelto di usare l'emulazione, si aprirà il Virtual Device)

6. ...e verrà eseguita la vostra applicazione

Cordova? PhoneGap????

Nel 2011, Adobe/Nitobi ha donato il codice basedi PhoneGap alla Apache Software Foundation.

Inizialmente il nuovo progetto doveva chiamarsiApache Callback, poi è stato scelto Apache Cordova

in onore di Nitobi, la cui sede era in Cordova Street, Vancouver

“PhoneGap is a distribution of Apache Cordova.You can think of Apache Cordova as the engine that

powers PhoneGap, similar to how WebKitis the engine that Powers Chrome or Safari.“

(fonte: http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/ )

7. scarichiamo PhoneGap

8. scompattiamo PhoneGap, e procediamo ad integrarlo nel nostro progetto

8a. creiamo, nel nostro progetto, due nuove directory: ./assets ./assets/www

8c. dalla sottodirectory android di PhoneGap, ci interessano i files cordova-x.x.x.jar, cordova-x.x.x.js e la directory xml

8d. copiamo il file cordova-x.x.x.js in assets/www, il file cordova-x.x.x.jar in libs, e la directory xml in res

9. riapriamo NetBeans, e apportiamo le piccole modifiche necessarie per utilizzare PhoneGap

9b. settiamo le permissions nel file AndroidManifest.xml

9c. e infine creiamo un nuovo file index.html sotto assets/www

9d. et voilà! PhoneGap è servito

10. jQuery Mobile! Scarichiamo l'ultima versione dal sito jquerymobile.com, e scompattiamola

10a. jQuery Mobile è basata su jQuery, quindi scarichiamo anche l'ultima versione di jQuery da qui: http://code.jquery.com/jquery-1.8.2.min.js

10b. Copiamo nel nostro progetto Android il javascript di jQuery appena scaricato, e dalla directory di jQuery Mobile scaricata in precedenza, i due files jquery.mobile-x.x.x.min.js e jquery.mobile-x.x.x.min.css. Poniamo il tutto sotto la directory assets/www

10c. ora editiamo il file index.html in modo da includere i javascript e il css appena copiati

10d. ed ecco jQuery Mobile in azione!

nota: la struttura html della pagina proviene dalle demo fornite con jQueryMobile. http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html