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.

1. Sencha Touch 2:
Mobile Multiplataforma
Loiane Groner
ww.loiane.com
@loiane

2. Loiane Groner
Evangelista Java e Sencha
Autora internacional
Gerente de Projetos
http://loiane.com
@loiane

3. Antes de começar...

5. Novidades HTML 5
•Melhor Semântica
•Offline Storate
•Acesso ao Device
•Melhor Conectividade
•Multimedia
•Acesso Gráficos nativos
•Melhor Performance
•CSS3

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

7. Offline Storate
•App Cache
•Local storage
•Session storage
•Web database

8. Acesso ao Device
•GeoLocalização
•Acelerômetro
•Input Audio/Câmera
•Compass (iOS 5)

9. Melhor Conectividade
•Web Sockets nativos

10. Multimedia
•Audio
•Video

11. Acesso Gráficos nativos
•SVG, Canvas, VML
•Animações 3D com CSS
•WebGL

12. Melhor Performance
•Webwork
•Threaded JavaScript
•XHR2
•Blob
•Checked data
•Requests cross domain

13. CSS3
•Layouts melhores e mais
rápidos
•Trasições nativas
•aceleração de hardware 3D
•Gradientes
•Formato Web Open Font

14. PQ?

15. 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)

16. Tecnologias

23. O que é
Sencha Touch?

24. Primeiro framework Javascript para
desenvolvimento de apps mobile ricas
usando padrões web

25. O que tem no 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. Forms

28. Scrolling
Scrolling
Momentum/bounce physics
ardware accelerated
hroughout all components:
Lists
Carousel
Pickers

29. Eventos Touch
Baseado em Eventos 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. Plataformas

33. iOS

34. Android

35. Roadmap: Windows Phone

37. Webkit

39. Charts

41. Acesso Nativo

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. Testes

54. Jasmine
PhantomJS
JSLint

56. Free

57. Continuous Integration +
Suporte
Paga = US$ 499

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

59. Demos apps
existentes

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

65. Obrigada!
Loiane Groner
ww.loiane.com
@loiane