Sencha touch: panoramica e orientamento sul codice
1 like•2,214 views
Sencha Touch è un framework JavaScript per lo sviluppo di applicazioni mobile multipiattaforma, progettato per offrire esperienze native in browser WebKit. Supporta vari dispositivi e include funzionalità come la manipolazione dei dati tramite store, personalizzazione tramite widget e strumenti di compilazione automatizzati. Il documento fornisce anche indicazioni su come configurare l'ambiente di sviluppo e creare un'applicazione, con esempi pratici di classi e gestione di eventi.
Sencha touch: panoramica e orientamento sul codice
- 1. Panoramica e Orientamento sul codice Sencha Touch Speaker: Giuseppe Toto
- 2. Cos’è Sencha Touch • E’ un framework javascript per lo sviluppo multipiattaforma di applicazioni mobile ad alte prestazioni. • E’ possibile utilizzare Sencha Touch per produrre un’esperienza nativa all’interno di un browser o di un imbrido. • Sencha Touch supporta dispositivi o Android, iOS o Windows Phone o Microsoft Surface Pro e Rt o BlackBerry • Licenza commerciale (free) e Licenza Open Source (free)
- 3. ST basato su Webkit engine • Sencha Touch è progettato per funzionare solo su browser webkit. Questo implica che la scelta per gli ambienti di testing desktop è limitato a 2 browser: Safari e Google Chrome (entrambi sono basati su webkit engine).
- 4. Panoramica su Sencha Touch
- 5. E’ un framework o Pattern architetturale: • Model View Controller o Basato su javascript o Paradigma di programmazione orientato ad oggetti
- 6. Widget • Comprende una serie di widget da poter utilizzare e personalizzare nei propri progetti • Esempi: o http://docs.sencha.com/touch/ 2.3.0/#!/example/kitchen-sink
- 7. Manipolare i dati o E’ possibile immagazzinare i dati all’interno degli “Store”. I store possono sincronizzarsi tramite un webservice (api restful) oppure possono sfruttare il localstorage del browser. o Gli store possono essere interrogati, filtrati, ordinati, etc. o Validazione dei campi delle form automatizzato
- 8. Temi nativi & Css
- 9. Temi nativi & Css
- 10. Building automatizzato (sencha cmd) • Ottimizzato per app native o Supporto framework Cordova o Comprime i file javascript e file css • Dispositivi supportati o Apple o Window Phone o Blackberry o Android
- 12. Build for Mobile and Desktop hJp://www.sencha.com/products/architect/ Un suo Ide di sviluppo
- 13. Si integra anche con altri ide: (è pur sempre un framework javascript open source) o Webstorm • http://www.jetbrains.com/webstorm
- 14. • Permette di sviluppare applicazioni desktop • Simile in certi versi a Sencha Touch • Stesso ambiente di sviluppo (sencha architect) Due piccioni con una fava: Sencha Ext Js
- 15. Sencha Market
- 16. Esperienze con Sencha Touch
- 18. Download Sencha Touch Clicca qui per la versione commerciale Clicca qui per la versione open source
- 19. Di cosa abbiamo bisogno? 1. Ripple Emulator • E’ un plugin per il browser Chrome che ci permette di visualizzare la nostra “pagina web” all’interno di una cover mobile. Le dimensioni della cover possono essere regolate.
- 20. Di cosa abbiamo bisogno? 2. Sencha Cmd • E’ uno strumento a linea di comando che permette di gestire il ciclo di vita per compilare i vostri progetti in sencha: • Inizializza, comprime e distribuisce il vostro progetto
- 21. Di cosa abbiamo bisogno? 3. Web server • Sencha Cmd Con la linea di comando “sencha web start” (stop per fermarlo)è possibile avviare un web server in pochi istanti sulla directory corrente all’indirizzo http://localhost:1841/ • XAMPP Un webserver apache che supporta php e mysql 4. Java Runtime Environment • Version 1.7 JRE is required for Sencha Cmd features and for Cordova and PhoneGap access.
- 22. Di cosa abbiamo bisogno? 5. Ruby version 1.9.3 – • Utilizzato per comprimere i file CSS/SASS. (Ruby version 2.0 doesn't work correctly with Sencha Cmd.) • Windows: Download Ruby 1.9.3.n from rubyinstaller.org. Download the RubyInstaller .exe file and run it. • Mac: Ruby is pre-installed. You can test which version you have with the ruby -v command. If you have version 2.0, download the Ruby version manager (rvm) and use this command to download and install Ruby: rvm install 1.9.3 --with- gcc=clang Set your PATH variable to point to the Ruby 1.9.3 install directory. • Ubuntu: Use sudo apt-get install ruby1.9.3 to download and install Ruby 1.9.3.
- 23. Hello world Quando il documento html è stato caricato, il browser è pronto a lanciare le istruzioni all’interno della funzione launch
- 24. ORIENTIAMOCI
- 25. Modelliamo il conceJo di “Carrello Virtuale” Proprietà: • prodoJi • totale Metodi: • addProdoJo(…) • stampaScontrino()
- 26. Definire e istanziare una classe in Sencha Touch
- 27. • Ext.define(…) Per definire una classe: Per istanziare un oggeJo di una classe: • Ext.create(…)
- 28. Definiamo la classe “Carrello” Apriamo un nuovo file e salviamolo in /class/ market/Carrello.js
- 29. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 30. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 31. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 32. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 33. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 34. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 35. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 36. N.B: • prodoJi.push è un metodo della classe Array di javascript e permeJe di accodare un elemento all’interno dello stesso array. • Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get
- 38. Istanziare la classe • Per utilizzare la classe Carrello dobbiamo istanziare l’oggeJo aJraverso il metodo Ext.Create(…) • Ricordiamoci di salvare la classe nel file di percorso class/market/ Carrello.js all’interno della cartella del nostro progeJo.
- 39. ESEMPIO COMPLETO: • Ricordiamoci di salvare la classe nel file di percorso /class/market/Carrello.js • Per utilizzare la classe Carrello dobbiamo istanziare un oggeJo di tipo Carrello:
- 40. ESEMPIO COMPLETO: • Ricordiamoci di salvare la classe nel file di percorso /class/market/Carrello.js • Per utilizzare la classe Carrello dobbiamo istanziare un oggeJo di tipo Carrello: Istanzio la classe
- 41. ESEMPIO COMPLETO: • Ricordiamoci di salvare la classe nel file di percorso /class/market/Carrello.js • Per utilizzare la classe Carrello dobbiamo istanziare un oggeJo di tipo Carrello: Aggiungo i prodoJi {
- 42. ESEMPIO COMPLETO: • Ricordiamoci di salvare la classe nel file di percorso /class/market/Carrello.js • Per utilizzare la classe Carrello dobbiamo istanziare un oggeJo di tipo Carrello: Recupero il totale {
- 43. ESEMPIO COMPLETO: • Ricordiamoci di salvare la classe nel file di percorso /class/market/Carrello.js • Per utilizzare la classe Carrello dobbiamo istanziare un oggeJo di tipo Carrello: Verifico la lista dei prodoJi ordinati {
- 44. MODELLIAMO ULTERIORMENTE IL CARRELLO VIRTUALE Creiamo la classe ProdoJo
- 45. Classe ProdoJo ProdoJo • id • nome • prezzo • categoria
- 46. Classe ProdoJo salviamo il file in class/market/ProdoJo.js
- 47. Istanziare la classe ProdoJo e aggiungerla al carrello
- 48. Istanziare la classe ProdoJo e aggiungerla al carrello
- 49. Istanziare la classe ProdoJo e aggiungerla al carrello {
- 50. Istanziare la classe ProdoJo e aggiungerla al carrello
- 51. Istanziare la classe ProdoJo e aggiungerla al carrello
- 52. Istanziare la classe ProdoJo e aggiungerla al carrello {
- 53. Istanziare la classe ProdoJo e aggiungerla al carrello
- 54. ..continua
- 55. ..continua
- 56. ..continua
- 57. ..continua {
- 58. HELLO WORD 2
- 59. Hello world più avanzato
- 60. Hello world più avanzato Container • Html xtype: “container”
- 61. Hello world più avanzato Container TitleBar • html • docked:”top” • title:”Hello World” xtype:”titlebar” xtype: “container”
- 62. Hello world più avanzato Container TitleBar • html • docked:”top” • title:”Hello World” xtype:”titlebar” xtype: “container” Bu@on • text:”change color” • align:”right” listeners: { tap:function(){ //istruzioni per cambiare sfondo colore } }
- 63. soluzione:
- 64. soluzione:
- 65. soluzione:
- 66. soluzione:
- 67. soluzione:
- 68. soluzione:
- 69. soluzione:
- 70. soluzione:
- 71. soluzione:
- 72. soluzione:
- 73. soluzione:
- 74. soluzione:
- 75. soluzione:
- 76. soluzione:
- 77. soluzione:
- 78. soluzione: {
- 79. soluzione: {
- 81. listeners • Per caJurare un evento bisogna meJersi in“ascolto” (listern). • Sui componenti su cui vogliamo caJurare determinati eventi specifichiamo un listeners (gestore di eventi) in cui definiamo principalmente uno o più eventi da caJurare: • il tipo di evento da ca@urare (es. tap) • la funzione da eseguire quando questo evento viene caJurato. • Sulla documentazione è possibile consultare l’elenco completo degli eventi che possono essere ascoltati su un determinato componente. • Ad esempio sul componente “buJon” è possibile caJurare l’evento “tap”
- 82. Lista eventi sul componente BuJon hJp://docs.sencha.com/touch/2.3.0/#!/api/Ext.BuJon