Aprendendo a arquitetura e novidades do ExtJS 4.2

51
Aprendendo a arquitetura e novidades do EXTJS 4.2 Cristian Mathias Leonardo Lima Rafael Audy

description

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/

Transcript of Aprendendo a arquitetura e novidades do ExtJS 4.2

Page 1: Aprendendo a arquitetura e novidades do ExtJS 4.2

Aprendendo a arquitetura e novidades do EXTJS 4.2

Cristian Mathias Leonardo Lima Rafael Audy

Page 2: Aprendendo a arquitetura e novidades do ExtJS 4.2

História do HTML

Page 3: Aprendendo a arquitetura e novidades do ExtJS 4.2

A tríade do desenvolvimento web

Aplicações ricas, leve e semânticas.

Page 4: Aprendendo a arquitetura e novidades do ExtJS 4.2

• Uma única página • Protocolo HTTP • Stateless • JSON • XML • REST • Muito javascript

O que é SPA (Single Page Applications)?

Page 5: Aprendendo a arquitetura e novidades do ExtJS 4.2

Exemplo de arquitetura SPA

Page 6: Aprendendo a arquitetura e novidades do ExtJS 4.2

BIBLIOTECAS E FRAMEWORKS PARA SPA

Page 7: Aprendendo a arquitetura e novidades do ExtJS 4.2

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)

Page 8: Aprendendo a arquitetura e novidades do ExtJS 4.2

URI E VERBOS HTTP

Page 9: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 10: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 11: Aprendendo a arquitetura e novidades do ExtJS 4.2

• 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

Page 12: Aprendendo a arquitetura e novidades do ExtJS 4.2

COMPONENTES - GRID

Page 13: Aprendendo a arquitetura e novidades do ExtJS 4.2

COMPONENTES - TREE

Page 14: Aprendendo a arquitetura e novidades do ExtJS 4.2

COMPONENTES – FORMULÁRIO + VALIDAÇÃO

Page 15: Aprendendo a arquitetura e novidades do ExtJS 4.2

COMPONENTES – TOOLBAR + BUTTONS

Page 16: Aprendendo a arquitetura e novidades do ExtJS 4.2

COMPONENTES – CHART

Page 17: Aprendendo a arquitetura e novidades do ExtJS 4.2

Entendendo o MVC do EXT JS

• View • Model • Controller • Proxy (REST, AJAX, Local

Storage) • Store

Page 18: Aprendendo a arquitetura e novidades do ExtJS 4.2

ESTRUTURA BÁSICA DO EXT JS

Page 19: Aprendendo a arquitetura e novidades do ExtJS 4.2

VIEW

Page 20: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 21: Aprendendo a arquitetura e novidades do ExtJS 4.2

Um “modelo” representa uma entidade, um objeto, é um conjunto de funções e campos para operar os dados.

MODEL

Page 22: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 23: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 24: Aprendendo a arquitetura e novidades do ExtJS 4.2

Em um modelo, você pode declarar campos, e você também pode declarar funções para manipular as informações do model.

MODEL

Page 25: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 26: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 27: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 28: Aprendendo a arquitetura e novidades do ExtJS 4.2

Para validar o model Patient, é preciso chamar o método validate. Estes métodos retornam um objeto Ext.data.Errors:

VALIDAÇÃO DO MODEL

Page 29: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 30: Aprendendo a arquitetura e novidades do ExtJS 4.2

• Has Many (tem muitos) = 1:N • Belongs To (pertence a) = N:1 • Has One (tem um) = 1:1

ASSOCIAÇÕES DE MODEL

Page 31: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 32: Aprendendo a arquitetura e novidades do ExtJS 4.2

Server Proxy Proxies de servidor são usados para carregar e salvar dados de / para um servidor web através de solicitações HTTP.

Page 33: Aprendendo a arquitetura e novidades do ExtJS 4.2

SERVER PROXY REST

Page 34: Aprendendo a arquitetura e novidades do ExtJS 4.2

SERVER PROXY AJAX

Page 35: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 36: Aprendendo a arquitetura e novidades do ExtJS 4.2

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

Page 37: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 38: Aprendendo a arquitetura e novidades do ExtJS 4.2

• Regras de aplicação • É o que “liga” os componentes

• Tratamento de eventos • Fluxo das telas

CONTROLLER

Page 39: Aprendendo a arquitetura e novidades do ExtJS 4.2

CONTROLLER

Page 40: Aprendendo a arquitetura e novidades do ExtJS 4.2

CONTROLLER

Page 41: Aprendendo a arquitetura e novidades do ExtJS 4.2

CONTROLLERS

CSS Selector para busca! Tipo: •‘[id=meuid]’ •‘[name=meuid]’ •‘minhaview[id=meuid]’

Page 42: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Mão na massa!!!

Page 43: Aprendendo a arquitetura e novidades do ExtJS 4.2

OUTROS – EXTENSÕES

Page 44: Aprendendo a arquitetura e novidades do ExtJS 4.2

OUTROS – EXTENSÕES

Page 45: Aprendendo a arquitetura e novidades do ExtJS 4.2

OUTROS - QUERY

Page 46: Aprendendo a arquitetura e novidades do ExtJS 4.2

OUTROS - MIXINS

Page 47: Aprendendo a arquitetura e novidades do ExtJS 4.2

OUTROS – PLUGINS

Page 48: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Documentação excelente!

http://docs.sencha.com/extjs/4.2.1/

Page 49: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Sencha Touch

Page 50: Aprendendo a arquitetura e novidades do ExtJS 4.2

STORE

Quer saber mais? Sobre o que?

Theming? Layouts? Chega!!??

Page 51: Aprendendo a arquitetura e novidades do ExtJS 4.2