Apresentação




Empresário e Analista de Sistemas
BLOG: www.davidruiz.eti.br
SITE: www.zaptrade.com.br
COMUNIDADE: www.ga...
Agenda

Quarta-Feira ( 13/02 ) às 16h
* Entenda o XMLHttpRequest;

* API DOM (Document Object Model);

* AJAX Toolkits e F...
Agenda

Quinta-Feira ( 14/02 ) às 16h
* Desenvolvimento de Aplicação WEB 2.0;
 - FINALIZAÇÃO DO PROJETO.

* Conclusão.
Refrescando a memória

Características da WEB 2.0:
• WEB COMO PLATAFORMA;
• COLABORAÇÃO / INTELIGÊNCIA COLETIVA;
• CONTEÚD...
Refrescando a memória

AJAX permite trabalhar com modelo assíncrono:
Refrescando a memória

Veja como aplicar o AJAX em seus projetos:
• VALIDAÇÃO EM TEMPO REAL;
   Ex: Verificar o nível de s...
XMLHttpRequest : Características

Objeto em JavaScript que fornece a comunicação
assíncrona com o servidor.
• Objeto JavaS...
XMLHttpRequest : Características

Principais características:
• Comunica-se com o servidor utilizando requisições HTTP
com...
XMLHttpRequest : Métodos

Método:                          Descrição:
open(method, URL, asyncFlag,     Abre e prepara uma ...
XMLHttpRequest : Propriedades

Propriedade:                  Descrição:
onreadystatechange            Informa a função Jav...
XMLHttpRequest : Propriedades

Propriedade:                 Descrição:
responseText                 Representação textual ...
XMLHttpRequest : Exemplo Prático

Exibindo o contéudo de uma página utilizando AJAX:
( EXEMPLO 1 )

var url = 'index.html'...
XMLHttpRequest : Exemplo Prático

Exibindo o contéudo de uma página utilizando AJAX:
( EXEMPLO 1 )

function processReqCha...
API DOM (Document Object Model)

API DOM:
•API DOM (Document Object Model);
    •Os navegadores mantém uma representação d...
AJAX Toolkits e Frameworks

Tipos de soluções disponíveis hoje:
• Bibliotecas JavaScript (lado do cliente);
• Frameworks d...
AJAX Toolkits e Frameworks

Bibliotecas JavaScript (lado do cliente):
• Pode ser utilizada com qualquer tecnologia do lado...
AJAX Toolkits e Frameworks

Frameworks de chamada remota via Proxy:
•Similar ao modelo de comunicação RPC;
Arquitetura bas...
AJAX Toolkits e Frameworks

Componentes JSF com comportamento AJAX:
Esconde toda a complexidade da programação AJAX;
• O a...
AJAX Toolkits e Frameworks

Wrappers:
• Atualmente existem vários toolkits com diferentes componentes
e sintaxes de uso;
•...
AJAX Toolkits e Frameworks

Tradutor Java para JavaScript:
• Desenvolve a aplicação AJAX usando apenas código Java;
•Quand...
AJAX Toolkits e Frameworks

Frameworks com extensão para AJAX:
• Alguns Frameworks de desenvolvimento de aplicação para We...
ExtJS e Mootools

Características:
• Frameworks são quase sempre extremamente leves:
 Mootools < 30Kb completo.
• Modular ...
ATÉ AMANHÃ!

BLOG: www.davidruiz.eti.br
SITE: www.zaptrade.com.br
COMUNIDADE: www.gamedev.com.br/cpbr2008/

CONTATO: wupsb...
Próximos SlideShares
Carregando em…5
×

Web 2.0 e AJAX - Parte 2 / 3

2.720 visualizações

Publicada em

Segunda parte da palestra sobre Web 2.0 e AJAX.

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.720
No SlideShare
0
A partir de incorporações
0
Número de incorporações
35
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web 2.0 e AJAX - Parte 2 / 3

  1. 1. Apresentação Empresário e Analista de Sistemas BLOG: www.davidruiz.eti.br SITE: www.zaptrade.com.br COMUNIDADE: www.gamedev.com.br/cpbr2008/ CONTATO: wupsbr@gmail.com
  2. 2. Agenda Quarta-Feira ( 13/02 ) às 16h * Entenda o XMLHttpRequest; * API DOM (Document Object Model); * AJAX Toolkits e Frameworks; - ExtJS; - MOOTOOLS; - EXEMPLOS DE UTILIZAÇÃO. * Desenvolvimento de Aplicação WEB 2.0. - INÍCIO DO PROJETO.
  3. 3. Agenda Quinta-Feira ( 14/02 ) às 16h * Desenvolvimento de Aplicação WEB 2.0; - FINALIZAÇÃO DO PROJETO. * Conclusão.
  4. 4. Refrescando a memória Características da WEB 2.0: • WEB COMO PLATAFORMA; • COLABORAÇÃO / INTELIGÊNCIA COLETIVA; • CONTEÚDO DINÂMICO / RSS ( Really Simple Syndication ); • FASE quot;BETAquot; CONTÍNUO; • CONTEÚDO DINÂMICO; • MASHUPS / INTEGRAÇÃO COM SERVIÇOS EXISTENTES; • CLOUD COMPUTING.
  5. 5. Refrescando a memória AJAX permite trabalhar com modelo assíncrono:
  6. 6. Refrescando a memória Veja como aplicar o AJAX em seus projetos: • VALIDAÇÃO EM TEMPO REAL; Ex: Verificar o nível de segurança da senha informada. • AUTOCOMPLETAR; Ex: Ao digitar o CEP o mesmo preenche automaticamente o endereço, bairro e etc. • OPERAÇÕES MESTRE-DETALHE; Ex: Seleciona o ESTADO o mesmo retorna as CIDADES correspondentes. • COMPONENTES DE INTERFACE AVANÇADOS (WIDGETS); Ex: Árvores, menus, barra de progresso. • NOTIFICAÇÕES PROVENIENTES DO SERVIDOR. Ex: Notificação de um novo e-mail.
  7. 7. XMLHttpRequest : Características Objeto em JavaScript que fornece a comunicação assíncrona com o servidor. • Objeto JavaScript; • Adotado pelos navegadores modernos; * Primeira implementação nativa no Mozilla 1.0 (2002) • A World Wide Web Consortium publicou uma especificação como “Working Draft” em 5 de abril de 2006; • No Internet Explorer é um controle ActiveX chamado MSXML; • O IE7 suporta o objeto XMLHttpRequest de forma nativa.
  8. 8. XMLHttpRequest : Características Principais características: • Comunica-se com o servidor utilizando requisições HTTP comuns: GET/POST; • Permite comunicação assíncrona; • Funciona em background; • Não interrompe a operação do usuário; • O tipo da resposta (ContentType) pode ser: • text/xml • text/plain • text/json • text/javascript
  9. 9. XMLHttpRequest : Métodos Método: Descrição: open(method, URL, asyncFlag, Abre e prepara uma requisição HTTP identificada username, password) pelo método e URL. asynchFlag indica se a comunicação deve ser assíncrona ou não. setRequestHeader(label, value) Associa um valor a um cabeçalho HTTP antes de fazer a requisição. send(postdata) Executa a requisição HTTP. getAllResponseHeaders() Retorna uma lista de todos os cabeçalhos HTTP da resposta. getResponseHeader(label) Retorna o cabeçalho HTTP associado ao label. abort() Interrompe uma requisição que está sendo processada.
  10. 10. XMLHttpRequest : Propriedades Propriedade: Descrição: onreadystatechange Informa a função JavaScript que deve ser chamada a cada mudança de estado. readystate Estado atual da requisição, pode ser: 0 = não iniciada 1 = iniciando conexão 2 = conexão estabelecida 3 = em atividade (algum dado foi recebido) 4 = completa status Status HTTP recebido do servidor: 200 = OK 403 = Forbidden 500 = Internal Error
  11. 11. XMLHttpRequest : Propriedades Propriedade: Descrição: responseText Representação textual (string) dos dados enviados pelo servidor. responseXML Representação do documento XML enviado pelo servidor. statusText Representação textual (string) do status HTTP recebido do servidor (OK, Not Found, etc).
  12. 12. XMLHttpRequest : Exemplo Prático Exibindo o contéudo de uma página utilizando AJAX: ( EXEMPLO 1 ) var url = 'index.html'; try { // Firefox, Opera 8.0+, Safari, IE7 request = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { // Internet Explorer < 7 request = new ActiveXObject(quot;Msxml2.XMLHTTPquot;); } catch (e) { try { // Internet Explorer < 7 request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } catch (e) { alert(quot;Seu browser não suporta AJAX!quot;); } } }
  13. 13. XMLHttpRequest : Exemplo Prático Exibindo o contéudo de uma página utilizando AJAX: ( EXEMPLO 1 ) function processReqChange () { // codigo 4 para 'status complete' if (request.readyState == 4 && request.status == 200) { var s = 'Status: t' + request.status + 'n'; s += 'StatusText: t' + request.statusText + 'n'; s += 'ResponseText: t' + request.responseText; alert(s); } } var url = 'index.html'; var request = new XMLHttpRequest(); request.onreadystatechange = processReqChange; request.open(quot;GETquot;, url, true); request.send(quot;quot;);
  14. 14. API DOM (Document Object Model) API DOM: •API DOM (Document Object Model); •Os navegadores mantém uma representação dos documentos que estão sendo exibidos; •Disponível pelo objeto JavaScript document; •A API DOM permite que código JavaScript altere a árvore DOM programaticamente; • Exemplos: • Adicionar uma nova linha a uma tabela; • Alterar o conteúdo de uma DIV; • Alterar o estilo CSS de um elemento.
  15. 15. AJAX Toolkits e Frameworks Tipos de soluções disponíveis hoje: • Bibliotecas JavaScript (lado do cliente); • Frameworks de chamada remota via Proxy; • Componentes JSF com comportamento AJAX; • Wrappers; • Tradutor Java para JavaScript; • Frameworks com extensão para AJAX.
  16. 16. AJAX Toolkits e Frameworks Bibliotecas JavaScript (lado do cliente): • Pode ser utilizada com qualquer tecnologia do lado do servidor; • Podem ser combinadas com outras bibliotecas; • Cuida de incompatibilidades de browsers; • Utiliza IFrame oculto se necessário; • Captura eventos de navegação como os botões avançar e voltar; • Componentes de interface avançados (widgets); • API JavaScript mais fácil de usar para controle de eventos, erros, etc.; • Ex: Dojo Toolkit, Rico, Script.aculo.us.
  17. 17. AJAX Toolkits e Frameworks Frameworks de chamada remota via Proxy: •Similar ao modelo de comunicação RPC; Arquitetura baseada em stubs e skeletons; •O framework gera o stub do cliente (proxy) para chamadas ao código do servidor; •Faz o marshalling de todos os parâmetros; •Ex: Direct Web Remoting (DWR), JSONRPC; •DWR 2.0 irá suportar AJAX Reverso; Chamada JavaScript a partir do código Java;
  18. 18. AJAX Toolkits e Frameworks Componentes JSF com comportamento AJAX: Esconde toda a complexidade da programação AJAX; • O autor não precisa saber JavaScript; • Componentes JSF são reutilizáveis; • Ex: ajax4jsf, ICEfaces, DynaFaces.
  19. 19. AJAX Toolkits e Frameworks Wrappers: • Atualmente existem vários toolkits com diferentes componentes e sintaxes de uso; • Empacota (wrap) os componentes visuais em custom tags (JSP) ou componentes JSF; • Tenta consolidar as diferentes bibliotecas JavaScript (lado do cliente): Depende de bibliotecas como o Dojo, DHTML Goodies, Script.aculo.us. •Ex: jMarki
  20. 20. AJAX Toolkits e Frameworks Tradutor Java para JavaScript: • Desenvolve a aplicação AJAX usando apenas código Java; •Quando a aplicação é implantada, converte código Java para JavaScript; •“Hosted Mode” – permite depuração do código; •Ex: Google Web Toolkit (GWT).
  21. 21. AJAX Toolkits e Frameworks Frameworks com extensão para AJAX: • Alguns Frameworks de desenvolvimento de aplicação para Web já estão trazendo o comportamento nativo ao AJAX: •Ex: Ruby on Rails, Echo2, Shale
  22. 22. ExtJS e Mootools Características: • Frameworks são quase sempre extremamente leves: Mootools < 30Kb completo. • Modular e orientado a objetos; • Produção de animações; Exemplos: http://extjs.com/deploy/dev/examples/ http://demos.mootools.net/
  23. 23. ATÉ AMANHÃ! BLOG: www.davidruiz.eti.br SITE: www.zaptrade.com.br COMUNIDADE: www.gamedev.com.br/cpbr2008/ CONTATO: wupsbr@gmail.com

×