Sencha Touch 2: Mobile Multiplataforma
Loiane Gronerww.loiane.com@loiane
Loiane Groner
Evangelista Java e Sencha
Autora internacional
Gerente de Projetos
http://loiane.com
@loiane
Antes de começar...
Novidades HTML 5
•Melhor Semântica•Offline Storate•Acesso ao Device•Melhor Conectividade•Multimedia•Acesso Gráficos nativos•Melhor Performance•CSS3
Melhor Semântica
•Mais tags HTML•Microdata•Microformats
Offline Storate
•App Cache
•Local storage
•Session storage
•Web database
Acesso ao Device
•GeoLocalização•Acelerômetro•Input Audio/Câmera•Compass (iOS 5)
Melhor Conectividade
•Web Sockets nativos
Multimedia
•Audio•Video
Acesso Gráficos nativos
•SVG, Canvas, VML•Animações 3D com CSS•WebGL
Melhor Performance
•Webwork•Threaded JavaScript
•XHR2•Blob•Checked data•Requests cross domain
CSS3
•Layouts melhores e mais rápidos•Trasições nativas
•aceleração de hardware 3D•Gradientes•Formato Web Open Font
PQ?
Escolha HTML 5 se:
•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)
Tecnologias
O que éSencha Touch?
Primeiro framework Javascript para desenvolvimento de apps mobile ricas
usando padrões web
O que tem no Sencha Touch?
Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC
ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fields Toolbars & buttons HTML5- Audio- Video- GeoLocation
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
Forms
Scrolling
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
Eventos Touch
Baseado em Eventos Nativos
Abstraído para Performance
Eventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop
Data Package
Models, Stores, e Proxies- Associations- Validation- Local & server storage
Consumir web services- JSON/P - XML- YQL
Temas
Use CSS3 & SASS - Flexible themes - Highly optimized
e.g.
Theming
$base-color: #ff6699
Use CSS3 & SASS - Flexible themes - Highly optimized
e.g.
Theming
$base-color: #ff6699
CSS3 comSass e Compass
Plataformas
iOS
Android
Roadmap: Windows Phone
Webkit
Charts
Acesso Nativo
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 }); }});
Geolocation
Ext.device.Geolocation.getCurrentPosition({ success: function(position) { console.log(position.coords); }, failure: function() { console.log('something went wrong!'); }});
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!'); }});
Notification
Ext.device.Notification.show({ title: 'One Button', message: 'This is a simple notification with one button.'});
Ext.device.notification.vibrate();
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)); }});
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); }});
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');}
Sencha Touch 2+
ExtJS 4
json json
Views Views
Controllers
Models
Stores
Proxies
Servidor
.
.
.
Testes
Jasmine
PhantomJS
JSLint
Free
Continuous Integration + Suporte
Paga = US$ 499
Exemplo app nativa iOS e Android em 5 minutos
Show me the code!
Demos apps existentes
Obrigada!
Loiane Gronerww.loiane.com@loiane
Recommended