LinuxDay2012 - Android, PhoneGap and jQuery Mobile

450 views
354 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
450
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LinuxDay2012 - Android, PhoneGap and jQuery Mobile

  1. 1. jQuery Mobile e Cordova/PhoneGap in applicazioni Android Salvatore Carotenuto, StartUp Solutions LinuxDay 2012 – 26/10/2012, Teatro Carlo Gesualdo, Avellino
  2. 2. 1. scarichiamo l'Android SDK
  3. 3. 2. aggiorniamo i pacchetti dell'Android SDK
  4. 4. 2. aggiorniamo i pacchetti dell'Android SDK
  5. 5. 3. apriamo NetBeans e installiamo il plugin per lo sviluppo Android
  6. 6. 3b. aggiungiamo la sorgente da dove scaricare il plugin per lo sviluppo Android
  7. 7. 3b. aggiungiamo la sorgente da dove scaricare il plugin per lo sviluppo Android
  8. 8. 3c. selezioniamo i pacchetti “Android” e “Android Test Runner” dalla lista dei plugin disponibili, e clicchiamo su “Install”
  9. 9. 4. ora siamo pronti per creare un nuovo progetto Android:
  10. 10. 4b. visto che non è ancora stato assegnato l'Android SDK all'ambiente, clicchiamo sul bottone “Manage Android SDK”
  11. 11. 4c. si aprirà una finestra di opzioni, nella quale inseriremo il path dove abbiamo scompattato l'Android SDK
  12. 12. 4d. selezioniamo la target platform, definiamo gli altri campi (nome progetto, package...) e procediamo cliccando su “Finish”
  13. 13. 4e. a questo punto il nostro progetto è (quasi) pronto
  14. 14. 5. (opzionale) creiamo un Android Virtual Device
  15. 15. 5b. (opzionale) creiamo un Android Virtual Device
  16. 16. 5c. (opzionale) creiamo un Android Virtual Device
  17. 17. 6. lanciamo “Run” da NetBeans (se avete scelto di usare l'emulazione, si aprirà il Virtual Device)
  18. 18. 6. ...e verrà eseguita la vostra applicazione
  19. 19. Cordova? PhoneGap? ??? Nel 2011, Adobe/Nitobi ha donato il codice base di PhoneGap alla Apache Software Foundation. Inizialmente il nuovo progetto doveva chiamarsi Apache 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 WebKit is the engine that Powers Chrome or Safari.“ (fonte: http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/ )
  20. 20. 7. scarichiamo PhoneGap
  21. 21. 8. scompattiamo PhoneGap, e procediamo ad integrarlo nel nostro progetto
  22. 22. 8a. creiamo, nel nostro progetto, due nuove directory: ./assets ./assets/www
  23. 23. 8c. dalla sottodirectory android di PhoneGap, ci interessano i files cordova-x.x.x.jar, cordova-x.x.x.js e la directory xml
  24. 24. 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
  25. 25. 9. riapriamo NetBeans, e apportiamo le piccole modifiche necessarie per utilizzare PhoneGap
  26. 26. 9b. settiamo le permissions nel file AndroidManifest.xml
  27. 27. 9c. e infine creiamo un nuovo file index.html sotto assets/www
  28. 28. 9d. et voilà! PhoneGap è servito
  29. 29. 10. jQuery Mobile! Scarichiamo l'ultima versione dal sito jquerymobile.com, e scompattiamola
  30. 30. 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
  31. 31. 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
  32. 32. 10c. ora editiamo il file index.html in modo da includere i javascript e il css appena copiati
  33. 33. 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

×