Aprendendo a arquitetura e novidades
do EXTJS 4.2
Cristian Mathias
Leonardo Lima
Rafael Audy
História do HTML
A tríade do desenvolvimento web
Aplicações ricas, leve e semânticas.
•Uma única página
•Protocolo HTTP
•Stateless
•JSON
•XML
•REST
•Muito javascript
O que é SPA (Single Page Applications)?
Exemplo de arquitetura SPA
BIBLIOTECAS E FRAMEWORKS PARA SPA
Criado por Roy Fielding, um dos principais autores da especificação
HTTP.
REST é um conjunto de princípios que definem com...
URI E VERBOS HTTP
• .Net: Asp.net Web API - http://www.asp.net/web-api
• Ruby: Ruby on Rails - http://guides.rubyonrails.org/
• Javascript:
...
STORE
Mão na massa!!!
• SPA
• Arquitetura MVC
• Cross browser
• Documentação e Forum
• Classes
• Orientação a objetos
• XML ou JSON
• Fácil inte...
COMPONENTES - GRID
COMPONENTES - TREE
COMPONENTES – FORMULÁRIO + VALIDAÇÃO
COMPONENTES – TOOLBAR + BUTTONS
COMPONENTES – CHART
Entendendo o MVC do EXT JS
• View
• Model
• Controller
• Proxy (REST, AJAX, Local
Storage)
• Store
ESTRUTURA BÁSICA DO EXT JS
VIEW
STORE
Mão na massa!!!
Um “modelo” representa uma entidade, um objeto, é um
conjunto de funções e campos para operar os dados.
MODEL
Para criar um modelo, você precisa apenas a instrução Ext.define para
definir uma nova classe, estender a classe Ext.data....
Para instanciar um model é muito simples. Basta instanciar o objeto
usando a instrução Ext.create e preencher os campos.
A...
Em um modelo, você pode declarar campos, e você também pode declarar
funções para manipular as informações do model.
MODEL
STORE
Mão na massa!!!
1. Presence: Verifica se o valor não é em branco.
2. Length: Verifica se o tamanho do valor não ultrapassa o
estipulado ou...
A declaração de validação (Ext.data.validations) segue a mesma estrutura de uma
declaração de campo: você precisa especifi...
Para validar o model Patient, é preciso chamar o método validate. Estes
métodos retornam um objeto Ext.data.Errors:
VALIDA...
STORE
Mão na massa!!!
• Has Many (tem muitos) = 1:N
• Belongs To (pertence a) = N:1
• Has One (tem um) = 1:1
ASSOCIAÇÕES DE MODEL
Proxies são responsáveis ​​por carregar e salvar os dados em Ext JS. Eles
são usados ​​por Stores e também podem ser utili...
Server Proxy
Proxies de servidor são usados ​​para carregar e salvar dados de / para um
servidor web através de solicitaçõ...
SERVER PROXY REST
SERVER PROXY AJAX
STORE
Mão na massa!!!
O Store é responsável por encapsular o modelo e também por
configurar um proxy para carregar e/ou salvar os dados.
Também ...
STORE
Mão na massa!!!
• Regras de aplicação
• É o que “liga” os componentes
• Tratamento de eventos
• Fluxo das telas
CONTROLLER
CONTROLLER
CONTROLLER
CONTROLLERS
CSS Selector para busca! Tipo:
•‘[id=meuid]’
•‘[name=meuid]’
•‘minhaview[id=meuid]’
STORE
Mão na massa!!!
OUTROS – EXTENSÕES
OUTROS – EXTENSÕES
OUTROS - QUERY
OUTROS - MIXINS
OUTROS – PLUGINS
STORE
Documentação excelente!
http://docs.sencha.com/extjs/4.2.1/
STORESencha Touch
STORE
Quer saber mais? Sobre o que?
Theming? Layouts? Chega!!??
Aprendendo a arquitetura e novidades do ExtJS 4.2
Próximos SlideShares
Carregando em…5
×

Aprendendo a arquitetura e novidades do ExtJS 4.2

1.741 visualizações

Publicada em

Apresentação sobre EXT JS 4.2. A aplicação demo pode ser baixada no git em https://github.com/rafaelaudy/Demo-WebApi-EXT-4.2/

Publicada em: Tecnologia
5 comentários
3 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.741
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
29
Comentários
5
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aprendendo a arquitetura e novidades do ExtJS 4.2

  1. 1. Aprendendo a arquitetura e novidades do EXTJS 4.2 Cristian Mathias Leonardo Lima Rafael Audy
  2. 2. História do HTML
  3. 3. A tríade do desenvolvimento web Aplicações ricas, leve e semânticas.
  4. 4. •Uma única página •Protocolo HTTP •Stateless •JSON •XML •REST •Muito javascript O que é SPA (Single Page Applications)?
  5. 5. Exemplo de arquitetura SPA
  6. 6. BIBLIOTECAS E FRAMEWORKS PARA SPA
  7. 7. Criado por Roy Fielding, um dos principais autores da especificação HTTP. REST é um conjunto de princípios que definem como Web Standards como HTTP e URIs devem ser usados. • URIs bem definidas • Métodos padronizados REPRESENTATIONAL STATE TRANSFER (REST)
  8. 8. URI E VERBOS HTTP
  9. 9. • .Net: Asp.net Web API - http://www.asp.net/web-api • Ruby: Ruby on Rails - http://guides.rubyonrails.org/ • Javascript: • Node.JS - http://nodejs.org/ • Express - http://expressjs.com/ • Java: Jersey - https://jersey.java.net/ • PHP: Slim - http://www.slimframework.com/ FRAMEWORKS PARA CONSTRUÇÃO DE APIS
  10. 10. STORE Mão na massa!!!
  11. 11. • SPA • Arquitetura MVC • Cross browser • Documentação e Forum • Classes • Orientação a objetos • XML ou JSON • Fácil integração • Variedade de componentes PORQUE EXT JS
  12. 12. COMPONENTES - GRID
  13. 13. COMPONENTES - TREE
  14. 14. COMPONENTES – FORMULÁRIO + VALIDAÇÃO
  15. 15. COMPONENTES – TOOLBAR + BUTTONS
  16. 16. COMPONENTES – CHART
  17. 17. Entendendo o MVC do EXT JS • View • Model • Controller • Proxy (REST, AJAX, Local Storage) • Store
  18. 18. ESTRUTURA BÁSICA DO EXT JS
  19. 19. VIEW
  20. 20. STORE Mão na massa!!!
  21. 21. Um “modelo” representa uma entidade, um objeto, é um conjunto de funções e campos para operar os dados. MODEL
  22. 22. Para criar um modelo, você precisa apenas a instrução Ext.define para definir uma nova classe, estender a classe Ext.data.Model e declarar todos os campos do modelo que você precisa. MODEL
  23. 23. Para instanciar um model é muito simples. Basta instanciar o objeto usando a instrução Ext.create e preencher os campos. Agora que temos uma instância do modelo Paciente criada, podemos acessar seus métodos: MODEL
  24. 24. Em um modelo, você pode declarar campos, e você também pode declarar funções para manipular as informações do model. MODEL
  25. 25. STORE Mão na massa!!!
  26. 26. 1. Presence: Verifica se o valor não é em branco. 2. Length: Verifica se o tamanho do valor não ultrapassa o estipulado ou se o tamanho do valor está em um limite mínimo e máximo. 3. Format: Verifica se o valor está no formato definido através de uma expressão regular. 4. Inclusion: Verifica se o valor está em uma lista de valores permitido. 5. Exclusion: verificar se o valor estão em uma lista de valores não permitido. TIPO DE VALIDAÇÃO DO MODEL
  27. 27. A declaração de validação (Ext.data.validations) segue a mesma estrutura de uma declaração de campo: você precisa especificar um tipo (existem cinco tipos de validações) e o nome do campo que você deseja validar. Existem algumas configurações opcionais para algumas validações. Você pode especificar mais de uma validação para um campo. VALIDAÇÃO DO MODEL
  28. 28. Para validar o model Patient, é preciso chamar o método validate. Estes métodos retornam um objeto Ext.data.Errors: VALIDAÇÃO DO MODEL
  29. 29. STORE Mão na massa!!!
  30. 30. • Has Many (tem muitos) = 1:N • Belongs To (pertence a) = N:1 • Has One (tem um) = 1:1 ASSOCIAÇÕES DE MODEL
  31. 31. Proxies são responsáveis ​​por carregar e salvar os dados em Ext JS. Eles são usados ​​por Stores e também podem ser utilizados diretamente em um model. Existe dois tipos de proxies: Client e Server PROXY
  32. 32. Server Proxy Proxies de servidor são usados ​​para carregar e salvar dados de / para um servidor web através de solicitações HTTP.
  33. 33. SERVER PROXY REST
  34. 34. SERVER PROXY AJAX
  35. 35. STORE Mão na massa!!!
  36. 36. O Store é responsável por encapsular o modelo e também por configurar um proxy para carregar e/ou salvar os dados. Também é capaz de classificar, filtrar e agrupar dados. • Sorting • Responsável por ordenar os dados no cliente ou no servidor. • Filtering • Responsável por filtrar os dados no cliente ou no servidor. STORE
  37. 37. STORE Mão na massa!!!
  38. 38. • Regras de aplicação • É o que “liga” os componentes • Tratamento de eventos • Fluxo das telas CONTROLLER
  39. 39. CONTROLLER
  40. 40. CONTROLLER
  41. 41. CONTROLLERS CSS Selector para busca! Tipo: •‘[id=meuid]’ •‘[name=meuid]’ •‘minhaview[id=meuid]’
  42. 42. STORE Mão na massa!!!
  43. 43. OUTROS – EXTENSÕES
  44. 44. OUTROS – EXTENSÕES
  45. 45. OUTROS - QUERY
  46. 46. OUTROS - MIXINS
  47. 47. OUTROS – PLUGINS
  48. 48. STORE Documentação excelente! http://docs.sencha.com/extjs/4.2.1/
  49. 49. STORESencha Touch
  50. 50. STORE Quer saber mais? Sobre o que? Theming? Layouts? Chega!!??

×