Sencha touch: panoramica e orientamento sul codice

  • 514 views
Uploaded on

Talk: …

Talk:
Sencha Touch

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
514
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 11. Documentazione  accurata hJp://docs-­‐‑origin.sencha.com/touch/2.3.1/  
  • 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
  • 17. Configuriamo  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
  • 37. Istanziare  la  classe
  • 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: {
  • 80. GESTIRE  GLI  EVENTI
  • 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