32
Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Embed Size (px)

Citation preview

Page 1: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Desenvolvimento WEB IIAjax – Utilização de Frameworks Javascript

Professora: Kelly de Paula Cunha

Page 2: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Revisão Framework

O que é um Framework?

• Um framework captura a funcionalidade comum a várias aplicações

• As aplicações devem ter algo razoavelmente grande em comum: pertencem a um mesmo domínio de problema

Page 3: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Revisão Framework

Page 4: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Revisão Framework

"Um framework provê uma solução para uma família de problemas semelhantes, ...Usando um conjunto de classes e interfaces que mostra como decompor a família de problemas, ...E como objetos dessas classes colaboram para cumprir suas responsabilidades, ...O conjunto de classes deve ser flexível e extensível para permitir a construção de várias aplicações com pouco esforço, especificando apenas as particularidades de cada aplicação"

Page 5: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Revisão Framework

Um framework é uma aplicação quase completa, mas com pedaços faltando.

– Ao receber um framework, seu trabalho consiste em prover os pedaços que são específicos para sua aplicação

Page 6: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Utilizando Frameworks AJAX

• A utilização de Ajax sem o uso de frameworks é complicada na construção e depuração da aplicação.

• Pensando nisso, muitos desenvolvedores começaram a se unir e desenvolver boas práticas no desenvolvimento de JavaScript com foco em AJAX.

• Além do envio e recebimento via AJAX já configurados, esses frameworks também possuem tratamento de erros com relação ao uso do JavaScript.

Page 7: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

Dojo Toolkit – biblioteca escrita em JavaScript desenhada para desenvolvimento rápido e fácil de aplicações Web baseadas somente em JavaScript ou totalmente Ajax, independente de plataforma servidora.

Page 8: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

Dojo Toolkit – características:

- Código aberto- Modular- Sintaxe simplificada- Funções para chamada AJAX- Componentes gráficos- Efeitos visuais- Validações

Page 9: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

Dojo Toolkit – informações adicionais:

Onde baixar?http://dojotoolkit.org/download/

Como utilizar?http://www.devmedia.com.br/apresentando-o-dojo-toolkit/25465

Page 10: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

jQuery – pode ser utilizada para:

• Adicionarmos efeitos visuais e animações;• Acessarmos e manipularmos o DOM;• Carregarmos componentes Ajax;• Provermos interatividade;• Fazer alteração de conteúdo;• Simplificarmos tarefas JavaScript.

Page 11: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

jQuery –

cada navegador possui seu próprio conjunto de características de implementação que ainda pode dificultar mais ainda, de acordo com a variação de plataforma e sistema operacional onde esteja executando. Já com a jQuery, nossa programação é única e transparente.

Page 12: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

jQuery – informações adicionais:

Onde baixar? http://jquery.com/

Como utilizar? http://www.devmedia.com.br/introducao-a-jquery/27299

Page 13: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

- DWR – acrônimo para Direct Web Remoting. É um framework Ajax desenvolvido para aplicações escritas em Java.

- Tem como principal característica a integração com as classes Java de dentro do próprio JavaScript.

Page 14: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

DWR - características:

- Open Source- Contém boas práticas de programação- Pouca documentação- Uso somente em aplicações JAVA

Page 15: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

DWR – informações adicionais:

Onde baixar? http://directwebremoting.org/dwr/downloads/

Como utilizar? http://www.devmedia.com.br/dwr-directed-web-remoting-parte-i-i/3284

Page 16: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

JSF - JavaServer Faces é um framework de interface de usuário (IU) para aplicações Java Web.

Foi projetado para facilitar significativamente a trabalhosa tarefa de escrever e manter os aplicações que são executadas em um servidor de aplicações Java e compilar as IUs de volta a um cliente de destino.

Page 17: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

JSF é uma tecnologia que incorpora características de:

• um framework MVC para WEB• um modelo de interfaces gráficas baseado em eventos.

Por basear-se no padrão de projeto MVC, uma de suas melhores vantagens é a clara separação entre a visualização e regras de negócio (modelo).

Page 18: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

A ideia do padrão MVC é dividir uma aplicação em três camadas: modelo, visualização e controle.

Page 19: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

Padrão MVC:

- modelo: é responsável por representar os objetos de negócio, manter o estado da aplicação e fornecer ao controlador o acesso aos dados.

- visualização: representa a interface com o usuário, sendo responsável por definir a forma como os dados serão apresentados e encaminhar as ações dos usuários para o controlador.

- controle: responsável por fazer a ligação entre o modelo e a visualização, além de interpretar as ações do usuário e as traduzir para uma operação sobre o modelo, onde são realizadas mudanças e, então, gerar uma visualização apropriada.

Page 20: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

Arquitetura JSF baseada no modelo MVC:

Page 21: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXNo JSF, o controle é composto por um servlet denominado FacesServlet, por arquivos de configuração e por um conjunto de manipuladores de ações e observadores de eventos.

Page 22: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXO FacesServlet é responsável por receber requisições da WEB, redirecioná-las para o modelo e então remeter uma resposta.

Os arquivos de configuração são responsáveis por realizar associações e mapeamentos de ações e pela definição de regras de navegação.

Os manipuladores de eventos são responsáveis por receber os dados vindos da camada de visualização, acessar o modelo, e então devolver o resultado para o FacesServlet.

Page 23: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXNo JSF, o modelo representa os objetos de negócio e executa uma lógica de negócio ao receber os dados vindos da camada de visualização.

Page 24: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXNo JSF, a visualização é composta por component trees (hierarquia de componentes UI), tornando possível unir um componente ao outro para formar interfaces mais complexas.

Page 25: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAX

É possível criar uma página JavaServer Faces adicionando Ajax criando os seu próprios componentes ou usando bibliotecas já feitas.

Um dos mais populares frameworks JSF que estendem suas aplicações para utilizar AJAX é o Ajax4jsf.

Page 26: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXVantagens de se utilizar o Ajax4Jsf

- adiciona capacidade Ajax nas aplicações que utilizam JSF sem recorrer ao JavaScript

- Não exige grandes alterações para adicionar o Ajax

- Contém boa documentação

- Open Source

Page 27: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXDesvantagens de se utilizar o Ajax4Jsf

- Não é possível utiliza-lo em aplicações Java sem o uso de JSF

Page 28: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Exemplo de Frameworks AJAXInformações adicionais:

- Como baixar? http://labs.jboss.com/portal/jbossajax4jsf

- Como instalar?http://www.devmedia.com.br/conhecendo-o-ajax4jsf/5529

Page 29: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

Referências

Gonçalves, Edson. Jsp, Servlet, Javaserver Faces, Hibernate, Ejb 3 Persistence E Ajax. Editora Ciência Moderna.

Pitanga, Talita. JavaServer Faces: A mais nova tecnologia Java para desenvolvimento WEB. Disponível em: http://www.guj.com.br/content/articles/jsf/jsf.pdf

Netbeans. Introdução ao JavaServer Faces. Disponível em: https://netbeans.org/kb/docs/web/jsf20-intro_pt_BR.html

Page 30: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

AJAXAtividade 8 (Foi passado na ultima aula)

- Continue o desenvolvimento da aplicação Exemplo007(livro WEB TOTAL, pág.230)- Botão Incluir funcionando:

-> Busca automática do ID máximo cadastrado-> Inserção de novo cliente no BD

Page 31: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

AJAXAtividade 9 (Foi passado na ultima aula)

- Crie uma planilha (no Microsoft Excel) com o nome: Controle_erros_ Exemplo007_seu_nome- Preencha a tabela com os erros que aparecerem durante o desenvolvimento do seu projeto

Local numero da linha problema soluçãoquem

solucionou

Controle 12 erro de sintaxe colocar parênteses eu

Banco de dados

configuração do MySQL

seguir tutorial estabelecendo conexão com banco de dados terceiros

Page 32: Desenvolvimento WEB II Ajax – Utilização de Frameworks Javascript Professora: Kelly de Paula Cunha

AJAXAtividade 10

- Continue o desenvolvimento da aplicação Exemplo007(livro WEB TOTAL, pág.230)- Botão Consultar funcionando: