QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

  • 1,941 views
Uploaded on

P

P

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,941
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
55
Comments
1
Likes
4

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. Sencha Touch 2: Mobile MultiplataformaLoiane Gronerww.loiane.com@loiane
  • 2. Loiane GronerEvangelista Java e SenchaAutora internacionalGerente de Projetoshttp://loiane.com@loiane
  • 3. Antes de começar...
  • 4. Novidades HTML 5•Melhor Semântica•Offline Storate•Acesso ao Device•Melhor Conectividade•Multimedia•Acesso Gráficos nativos•Melhor Performance•CSS3
  • 5. Melhor Semântica•Mais tags HTML•Microdata•Microformats
  • 6. Offline Storate•App Cache•Local storage•Session storage•Web database
  • 7. Acesso ao Device•GeoLocalização•Acelerômetro•Input Audio/Câmera•Compass (iOS 5)
  • 8. Melhor Conectividade•Web Sockets nativos
  • 9. Multimedia•Audio•Video
  • 10. Acesso Gráficos nativos•SVG, Canvas, VML•Animações 3D com CSS•WebGL
  • 11. Melhor Performance•Webwork •Threaded JavaScript•XHR2 •Blob •Checked data •Requests cross domain
  • 12. CSS3•Layouts melhores e maisrápidos•Trasições nativas •aceleração de hardware 3D•Gradientes•Formato Web Open Font
  • 13. PQ?
  • 14. Escolha HTML 5 se:•Desenvolver app comnúmero pessoas limitadas•App para mobile devices•Deploy apps sem limitaçãode app stores•App tem que ser acessívelem qualquer lugar•Quer usar skills existentes(HTML, CSS, JS)
  • 15. Tecnologias
  • 16. O que éSencha Touch?
  • 17. Primeiro framework Javascript paradesenvolvimento de apps mobile ricas usando padrões web
  • 18. O que tem no Sencha Touch?Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC
  • 19. ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySlider ComponentsForms & fields Toolbars & buttons HTML5- Audio Lists- Video - Nested, Grouped, Sortable- GeoLocationCarousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video
  • 20. Forms
  • 21. ScrollingScrollingMomentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  • 22. Eventos TouchBaseado em Eventos NativosAbstraído para PerformanceEventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop
  • 23. Data PackageModels, Stores, e Proxies- Associations- Validation- Local & server storageConsumir web services- JSON/P- XML- YQL
  • 24. Temas Theming Use CSS3 & SASS Use CSS3 & SASS - Flexible themes - Flexible themes CSS3 com - Highly optimized - Highly optimizedSass e Compass e.g. e.g. $base-color: #ff6699 $base-color:
  • 25. Plataformas
  • 26. iOS
  • 27. Android
  • 28. Roadmap: Windows Phone
  • 29. Webkit
  • 30. Charts
  • 31. Acesso Nativo
  • 32. CâmeraExt.device.Camera.capture({ source: camera, destination: file, success: function(url) { //mostra foto em um widget the Imagem: Ext.create(Ext.Img, { src: url, fullscreen: true }); }});
  • 33. GeolocationExt.device.Geolocation.getCurrentPosition({ success: function(position) { console.log(position.coords); }, failure: function() { console.log(something went wrong!); }});
  • 34. Ext.device.Geolocation.watchPosition({ frequency: 3000, // Update every 3 seconds callback: function(position) { console.log(Position updated!, position.coords); }, failure: function() { console.log(something went wrong!); }});
  • 35. NotificationExt.device.Notification.show({ title: One Button, message: This is a simple notification with onebutton.});Ext.device.notification.vibrate();
  • 36. Push - iOSExt.device.Push.register({ type: Ext.device.Push.ALERT|Ext.device.Push.BADGE|Ext.device.Push.SOUND, success: function(token) { console.log(# Push notification registration successful:); console.log( token: + token); }, failure: function(error) { console.log(# Push notification registration unsuccessful:); console.log( error: + error); }, received: function(notifications) { console.log(# Push notification received:); console.log( + JSON.stringify(notifications)); }});
  • 37. OrientaçãoExt.device.Orientation.on({ scope: this, orientationchange: function(e) { console.log(Alpha: , e.alpha); console.log(Beta: , e.beta); console.log(Gamma: , e.gamma); }});
  • 38. Offline appif (Ext.device.Connection.isOnline()) { Ext.Msg.alert(You are currently connected via + Ext.device.Connection.getType());} else { Ext.Msg.alert(You are not currently connected);}
  • 39. Sencha Touch 2 + ExtJS 4
  • 40. . .Views Views . Controllers Models Stores json Proxies json Servidor
  • 41. Testes
  • 42. JasminePhantomJS JSLint
  • 43. Free
  • 44. Continuous Integration + Suporte Paga = US$ 499
  • 45. Show me the code! Exemplo app nativa iOS e Android em 5 minutos
  • 46. Demos apps existentes
  • 47. Curso Gratuito ExtJS 4 Sencha Touch 2http://loiane.com
  • 48. Obrigada!Loiane Gronerww.loiane.com@loiane