Este documento apresenta uma introdução ao framework Sencha Touch 2 para desenvolvimento de aplicações móveis ricas usando padrões web. Explica que o Sencha Touch é o primeiro framework JavaScript para esse fim e permite desenvolver apps cross-platform reutilizando habilidades web. Também descreve os principais componentes, layouts, temas e funcionalidades como animações, eventos touch e arquitetura MVC.

1. Curso
Sencha
Touch 2:
Introdução
Loiane Groner
http://loiane.com

2. O que é
Sencha Touch?

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

4. http://www.sencha.com/
Ext JS
Touch
Touch Charts
Ext GWT == GXT
Animator
Designer
Sencha.io

5. Por que usar
Sencha Touch?

6. Apps Mobile

10. Linguagens
Mobile
Objective C
Java
C++
C#
Java ME
etc

11. Vai Aprender
Todas?

12. Claro que NÃO!

13. Retorno para
WEB
Cross Platform
Já tem Skills e conhece as ferramentas
Descentralizada
Fácil Update
Indexada
Tecnologias Conhecidas

15. Arquitura Mobile Hoje
Fontes Video Audio Gráficos

16. Arquitura Mobile Hoje
Fontes Video Audio Gráficos
CSS e Layouts
Javascript
Semântica HTML

17. Arquitura Mobile Hoje
Fontes Video Audio Gráficos
CSS e Layouts
Javascript
Semântica HTML
Sist. Arquivos
Processamento
DB Mensagens
Paralelo
Cache

18. Arquitura Mobile Hoje
Servidor e
Fontes Video Audio Gráficos Serviços
HTTP
CSS e Layouts
AJAX
Javascript
Eventos
Semântica HTML Sockets
SSL
Sist. Arquivos
Processamento
DB Mensagens
Paralelo E mais...
Cache

19. Arquitura Mobile Hoje
Acesso Servidor e
Dispositivo Fontes Video Audio Gráficos Serviços
Câmera HTTP
CSS e Layouts
GeoLocalização AJAX
Javascript
Contatos Eventos
SMS Semântica HTML Sockets
Orientação SSL
Sist. Arquivos
Processamento
DB Mensagens
Gyro Paralelo E mais...
Cache

20. Aplicações

21. WORA:
Write Once
Run Anywhere

22. WEB

23. WEB

24. Mobile

25. Sencha Touch!

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

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

28. Forms

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

30. Eventos Touch
Baseado em Eventos Nativos
Abstraído para Performance
Eventos Adicionais:
- Tap
- Double tap
- Tap & hold - Swipe
- Rotate
- Drag & drop

31. Data Package
Models, Stores, e Proxies
- Associations
- Validation
- Local & server storage
Consumir web services
- JSON/P
- XML
- YQL

32. 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:

33. Gráficos
Touch Charts

34. Sencha Touch
==
WORA?

35. Quase!!!

37. Reuso
de
Código

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

39. Ext JS Touch
Sencha Platform

40. E como faço para acessar o
dispositivo?

41. PhoneGap!
PhoneGap
Plataforma que permite que você empacote a
aplicação web e tenha acesso a API do dispositivo
http://phonegap.com
http://phonegap.com

42. PhoneGap oferece:

43. Recursos Nativos

44. Perfeito né? :)

45. Calma que tem mais!

46. Documentação

47. Comunidade Show!
http://www.sencha.com/forum/
http://extjs.com.br/

48. Licença
ree !!!
F

49. Livros
v1/v2 v1 v1

50. Todas as Aulas do Curso
http://www.loiane.com/2012/03/
curso-de-sencha-touch-2-gratuito

51. Contato
contato = {
email: ‘curso@extjs4.com’,
blog: ‘loiane.com’,
facebook: ‘facebook.com/loianegroner’,
twitter: ‘@loiane’,
github: ‘loiane’,
vimeo: ‘loiane’,
youtube: ‘loianeg’
}

52. O brig a da!