Sencha touch: panoramica e orientamento sul codice
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Sencha touch: panoramica e orientamento sul codice

on

  • 528 views

Talk:

Talk:
Sencha Touch

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

Statistics

Views

Total Views
528
Views on SlideShare
256
Embed Views
272

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 272

http://www.giuseppetoto.it 272

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha touch: panoramica e orientamento sul codice Presentation 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