Baixado 57 vezes
Carregado porLoiane Groner
QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
O documento apresenta o framework Sencha Touch, que permite o desenvolvimento de aplicativos móveis multiplataforma usando HTML5, CSS e JavaScript. O Sencha Touch oferece componentes e layouts responsivos, temas personalizáveis, suporte a eventos touch e acesso a recursos nativos dos dispositivos como câmera e geolocalização. Apresenta também o modelo MVC e ferramentas para teste e integração contínua.
![[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?](https://cdn.slidesharecdn.com/ss_thumbnails/devcastphonegap-130813213552-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap](https://cdn.slidesharecdn.com/ss_thumbnails/aula01-introducao-140223172330-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
- 1. Sencha Touch 2: Mobile Multiplataforma Loiane Groner ww.loiane.com @loiane
- 2. Loiane Groner Evangelista Javae Sencha Autora internacional Gerente de Projetos http://loiane.com @loiane
- 3.
- 5. Novidades HTML 5 •MelhorSemântica •Offline Storate •Acesso ao Device •Melhor Conectividade •Multimedia •Acesso Gráficos nativos •Melhor Performance •CSS3
- 6. Melhor Semântica •Mais tagsHTML •Microdata •Microformats
- 7. Offline Storate •App Cache •Localstorage •Session storage •Web database
- 8. Acesso ao Device •GeoLocalização •Acelerômetro •InputAudio/Câmera •Compass (iOS 5)
- 9.
- 10.
- 11. Acesso Gráficos nativos •SVG,Canvas, VML •Animações 3D com CSS •WebGL
- 12. Melhor Performance •Webwork •ThreadedJavaScript •XHR2 •Blob •Checked data •Requests cross domain
- 13. CSS3 •Layouts melhores emais rápidos •Trasições nativas •aceleração de hardware 3D •Gradientes •Formato Web Open Font
- 14.
- 15. Escolha HTML 5se: •Desenvolver app com número pessoas limitadas •App para mobile devices •Deploy apps sem limitação de app stores •App tem que ser acessível em qualquer lugar •Quer usar skills existentes (HTML, CSS, JS)
- 16.
- 23. O que é SenchaTouch?
- 24. Primeiro framework Javascriptpara desenvolvimento de apps mobile ricas usando padrões web
- 25. O que temno Sencha Touch? Componentes e Layouts Themas e Ícones Orientação e Animação Eventos Touch e Scroller Pacote de Dados MVC
- 26. Componentes Lists - Nested, Grouped,Sortable Carousel Picker Overlay Slider Components Forms & fields Toolbars & buttons HTML5 - Audio Lists - Video - Nested, Grouped, Sortable - GeoLocationCarousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video
- 27.
- 28. Scrolling Scrolling Momentum/bounce physics ardwareaccelerated hroughout all components: Lists Carousel Pickers
- 29. Eventos Touch Baseado emEventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
- 30. Data Package Models, Stores,e Proxies - Associations - Validation - Local & server storage Consumir web services - JSON/P - XML - YQL
- 31. Temas Theming Use CSS3 & SASS Use CSS3 & SASS - Flexible themes - Flexible themes CSS3 com - Highly optimized - Highly optimized Sass e Compass e.g. e.g. $base-color: #ff6699 $base-color:
- 32.
- 33.
- 34.
- 35.
- 37.
- 39.
- 41.
- 42. Câmera Ext.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 }); } });
- 43. Geolocation Ext.device.Geolocation.getCurrentPosition({ success: function(position) { console.log(position.coords); }, failure: function() { console.log('something went wrong!'); } });
- 44. 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!'); } });
- 45. Notification Ext.device.Notification.show({ title: 'One Button', message: 'This is a simple notification with one button.' }); Ext.device.notification.vibrate();
- 46. Push - iOS Ext.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)); } });
- 47. Orientação Ext.device.Orientation.on({ scope: this, orientationchange: function(e) { console.log('Alpha: ', e.alpha); console.log('Beta: ', e.beta); console.log('Gamma: ', e.gamma); } });
- 48. Offline app if (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'); }
- 51. Sencha Touch 2 + ExtJS 4
- 52. . . Views Views . Controllers Models Stores json Proxies json Servidor
- 53.
- 54.
- 56.
- 57. Continuous Integration + Suporte Paga = US$ 499
- 58. Show me thecode! Exemplo app nativa iOS e Android em 5 minutos
- 59.
- 64. Curso Gratuito ExtJS 4 Sencha Touch 2 http://loiane.com
- 65.