Sencha touch: panoramica e orientamento sul codice

1,688 views

Published on

Talk:
Sencha Touch

Articolo di riferimento:
www.giuseppetoto.it/mobile/sencha-touch-2-build-mobile-web-apps-html5

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

No Downloads
Views
Total views
1,688
On SlideShare
0
From Embeds
0
Number of Embeds
496
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sencha touch: panoramica e orientamento sul codice

  1. 1. Panoramica  e  Orientamento  sul  codice Sencha Touch Speaker:  Giuseppe  Toto
  2. 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. 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. 4. Panoramica  su  Sencha   Touch
  5. 5. E’  un  framework   o Pattern architetturale: • Model View Controller o Basato su javascript o Paradigma di programmazione orientato ad oggetti
  6. 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. 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. 8.  Temi  nativi  &  Css
  9. 9.  Temi  nativi  &  Css
  10. 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
  11. 11. Documentazione  accurata hJp://docs-­‐‑origin.sencha.com/touch/2.3.1/  
  12. 12. Build for Mobile and Desktop hJp://www.sencha.com/products/architect/   Un  suo  Ide  di  sviluppo
  13. 13. Si  integra  anche  con  altri  ide:     (è  pur  sempre  un  framework  javascript   open  source) o Webstorm •  http://www.jetbrains.com/webstorm
  14. 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. 15. Sencha  Market
  16. 16. Esperienze  con   Sencha  Touch
  17. 17. Configuriamo  Sencha   Touch
  18. 18. Download  Sencha   Touch Clicca  qui  per  la   versione   commerciale Clicca  qui  per   la  versione   open  source
  19. 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. 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. 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. 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. 23. Hello  world Quando  il  documento  html  è  stato   caricato,  il  browser  è  pronto  a  lanciare  le   istruzioni  all’interno  della  funzione   launch
  24. 24. ORIENTIAMOCI  
  25. 25. Modelliamo  il  conceJo  di   “Carrello  Virtuale” Proprietà: •  prodoJi •  totale Metodi: •  addProdoJo(…) •  stampaScontrino()
  26. 26. Definire  e  istanziare  una   classe  in   Sencha  Touch
  27. 27. •  Ext.define(…) Per  definire  una  classe: Per  istanziare  un  oggeJo  di  una  classe: •  Ext.create(…)
  28. 28. Definiamo  la  classe  “Carrello” Apriamo  un  nuovo  file  e  salviamolo  in  /class/ market/Carrello.js
  29. 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. 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. 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. 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. 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. 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. 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. 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
  37. 37. Istanziare  la  classe
  38. 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. 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. 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. 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. 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. 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. 44.  MODELLIAMO   ULTERIORMENTE  IL   CARRELLO  VIRTUALE Creiamo  la  classe  ProdoJo  
  45. 45. Classe  ProdoJo ProdoJo •  id •  nome •  prezzo •  categoria
  46. 46. Classe  ProdoJo salviamo    il  file  in  class/market/ProdoJo.js
  47. 47. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello
  48. 48. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello
  49. 49. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello {
  50. 50. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello
  51. 51. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello
  52. 52. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello {
  53. 53. Istanziare  la  classe  ProdoJo  e  aggiungerla  al  carrello
  54. 54. ..continua
  55. 55. ..continua
  56. 56. ..continua
  57. 57. ..continua {
  58. 58. HELLO WORD 2
  59. 59. Hello  world  più  avanzato
  60. 60. Hello  world  più  avanzato Container •  Html xtype:  “container”
  61. 61. Hello  world  più  avanzato Container TitleBar •  html •  docked:”top” •  title:”Hello   World” xtype:”titlebar” xtype:  “container”
  62. 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. 63. soluzione:
  64. 64. soluzione:
  65. 65. soluzione:
  66. 66. soluzione:
  67. 67. soluzione:
  68. 68. soluzione:
  69. 69. soluzione:
  70. 70. soluzione:
  71. 71. soluzione:
  72. 72. soluzione:
  73. 73. soluzione:
  74. 74. soluzione:
  75. 75. soluzione:
  76. 76. soluzione:
  77. 77. soluzione:
  78. 78. soluzione: {
  79. 79. soluzione: {
  80. 80. GESTIRE  GLI  EVENTI
  81. 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. 82. Lista  eventi  sul  componente  BuJon hJp://docs.sencha.com/touch/2.3.0/#!/api/Ext.BuJon  

×