QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Sencha Touch 2: Mobile MultiplataformaLoiane Gronerww.loiane.com@loiane

Loiane GronerEvangelista Java e SenchaAutora internacionalGerente de Projetoshttp://loiane.com@loiane

Antes de começar...

Novidades HTML 5•Melhor Semântica•Ofﬂine Storate•Acesso ao Device•Melhor Conectividade•Multimedia•Acesso Gráﬁcos nativos•Melhor Performance•CSS3

Melhor Semântica•Mais tags HTML•Microdata•Microformats

Ofﬂine 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áﬁcos 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 maisrápidos•Trasições nativas •aceleração de hardware 3D•Gradientes•Formato Web Open Font

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)

Tecnologias

O que éSencha Touch?

Primeiro framework Javascript paradesenvolvimento 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, SortableCarouselPickerOverlaySlider ComponentsForms & ﬁelds Toolbars & buttons HTML5- Audio Lists- Video - Nested, Grouped, Sortable- GeoLocationCarousel Picker Overlay Slider Forms & ﬁelds Toolbars & buttons HTML5 - Audio - Video

ScrollingScrollingMomentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers

Eventos TouchBaseado em Eventos NativosAbstraído para PerformanceEventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop

Data PackageModels, Stores, e Proxies- Associations- Validation- Local & server storageConsumir web services- JSON/P- XML- YQL

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:

Plataformas

Android

Roadmap: Windows Phone

Webkit

Charts

Acesso Nativo

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 }); }});

GeolocationExt.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!); }});

NotiﬁcationExt.device.Notification.show({ title: One Button, message: This is a simple notification with onebutton.});Ext.device.notification.vibrate();

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)); }});

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); }});

Ofﬂine 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

. .Views Views . Controllers Models Stores json Proxies json Servidor

Testes

JasminePhantomJS JSLint

Continuous Integration + Suporte Paga = US$ 499

Show me the code! Exemplo app nativa iOS e Android em 5 minutos

Demos apps existentes

Curso Gratuito ExtJS 4 Sencha Touch 2http://loiane.com

Obrigada!Loiane Gronerww.loiane.com@loiane

http://eventifier.co	31
http://localhost	4
https://si0.twimg.com	3
https://twitter.com	1

QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

by Loiane Groner on Aug 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 39

Statistics