UNID 3 - Tecnologias Web UNID 3 - Tecnologias Web

UNAMA – Universidade da AmazôniaPRÓ-REITORIA DE PESQUISA, PÓS-GRADUAÇÃO E EXTENSÃOPÓS-GRADUAÇÃO LATO SENSUCurso de Especialização em Desenvolvimento de Sistemas Baseado em Software Livre

Desenvolvimento de Aplicações Multicamadas

Prof. Cláudio Martins claudiomartins2000@gmail.com

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

2

AssuntosAssuntos

Contêiner Web

Java Servlet

JavaServer Pages

Padrão de Arquitetura MVC

JSF (Java Server Faces)

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

3

Contêiner Web

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

4

O Contêiner Web do Servidor JEEO Contêiner Web do Servidor JEE

Um Contêiner Web (também chamado de servidor web) é onde as aplicações web devem ser implantadas para uso nos browsers ou em clientes (softwares) que falam o protocolo HTTP.

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

5

Arquitetura de um Servidor WebArquitetura de um Servidor Web

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

6

Servidor Web como Contêiner Web do JEEServidor Web como Contêiner Web do JEE

O Tomcat é o servidor web que serve de Container Web do

Glassfish

Nossa instação usa o Glassfish

3.1.1 como servidor JEE

O Tomcat é um servidor web Java, mais especificamente, um container web de servlets. É distribuído como software livre, sendo oficialmente apoiado pela Oracle/Sun como a implementação de referência para as tecnologias Java Servlet e JavaServer Pages (JSP). Ele cobre parte da especificação J2EE com tecnologias como servlet e JSP.

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

7

Tipos de Aplicações WebTipos de Aplicações Web Em JEE há dois tipos de estratégia para desenvolver

essas aplicações:

– Baseado em Apresentação: é a forma mais comum, onde a aplicação web gera dinâmicamente o conteúdo em forma de páginas web, em formatos de linguagem de marcação (HTML, XML, etc) em resposta às solicitações que vem do cliente (browser).● Java EE utiliza as tecnologias Servlet e JSP para realizar essa

tarefa.

– Baseado em Serviços Web: uma aplicação web baseada em serviços implementa um mecanismo chamado “web service”. Neste caso, tanto aplicações web tradicionais (baseadas em apresentação) quanto aplicações em janelas (desktop) podem ser clientes de web services.

http://docs.oracle.com/javaee/5/tutorial/doc/bnadr.html

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

8

Funcionamento de uma Aplicação Web com Funcionamento de uma Aplicação Web com um Contêiner Web – Componentes Webum Contêiner Web – Componentes Web

Em JavaEE os componentes web são construídos com: servlets, páginas JSP e web services.

A interação entre um cliente web (browser) e a aplicação web é vista na figura:

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

9

Funcionamento de uma Aplicação Web com Funcionamento de uma Aplicação Web com um Contêiner Web (JEE)um Contêiner Web (JEE)

(1) O cliente (browser) envia uma solicitação (request) HTTP para o servidor web.

Um servidor web (contêiner web) que implementa as tecnologias Java Servlet e JavaServer Pages (JSP) converte a solicitação em um objeto HTTPServletRequest (2).

Este objeto é entregue como um componente web, que pode interagir com componentes JavaBeans (3) ou acessar um banco de dados (4) para gerar conteúdo dinâmico.

O componente web pode gerar um objeto HTTPServletResponse ou pode repassar o controle para outros componentes web.

(5) Eventualmente um componente web gera um reposta a partir do objeto HTTPServletResponse. (6) O servidor web converte este objeto para uma resposta HTTP e retorna para o cliente (como página html, imagem ou outro formato de conteúdo).

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

10

Java Servlet

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

11

O que são Servlets?O que são Servlets? Servlets são classes programadas em Java que

dinamicamente processam as solicitações (requests) e constróem a resposta (responses) para o cliente (browser).

Servlet é a tecnologia base para outras tecnologias que rodam em um contêiner web (como JSP, JSF, etc).

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

12

Exemplo de código de uma classe Servlet gerada no Exemplo de código de uma classe Servlet gerada no NetBeans 7.1NetBeans 7.1

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

13

JavaServer Pages

14

Tecnologia JSP● Java Server Pages (JSP) é uma tecnologia de

web-scripting (linguagem de script de página) para desenvolvimento de aplicações Web.– Semelhante a várias linguagens de script em

um servidor web, como o Microsoft Active Server Pages (ASP) e PHP, por exemplo.

● As páginas JSP utilizam a tecnologia Java do

lado do servidor (chamadas de servlets) para a criação de conteúdo dinâmico aliado com as tags HTML para manter o conteúdo estático.

15

Arquitetura de Aplicações web com JSP

● As páginas JSP são submetidas a um processo de tradução (uma única vez) e em uma fase de processamento de requisição.

● A tradução (compilação) acontece apenas uma vez, a não ser que a página JSP em questão sofra alterações. – Caso não ocorram erros de compilação, o resultado desta fase é uma

classe que implementa a inteface Servlet, como mostrado na figura:

16

Resultado da compilação da página JSP em classe Servlet

17

Arquitetura de Aplicações web com páginas JSP

• Quando uma página JSP é requisitada pelo cliente, através de um browser, a classe equivalente a esta página é executada pelo servidor.

• A partir daí será gerada uma página HTML que será enviada de volta ao browser do cliente.

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

18

Exemplo de uma aplicação web com JSP e Servlet

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

19

Criando um aplicação web com Servlet no Criando um aplicação web com Servlet no Netbeans 7.xNetbeans 7.x

Crie um novo projeto Java do tipo Java Web

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

20

Definição do nome do ProjetoDefinição do nome do Projeto

Defina o nome do projeto web e o local

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

21

Escolha do Contêiner Web (Servidor Web)Escolha do Contêiner Web (Servidor Web) Escolha o servidor Glassfish. Em seguida, clique em

Finalizar.

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

22

Estrutura do projeto web e página index.jspEstrutura do projeto web e página index.jsp No final, o Netbeans cria a estutura do projeto web e

uma página inicial JSP de boas vindas (index.jsp).

23

Executando (exibindo) a página index.jsp

● Por padrão é criado no projeto web a página index.jsp. Ao executar o arquivo index.jsp a página é exibida no browser que está definido como default do sistema.

Ou clique em RUN

Caso o projeto seja oPrincipal.

24

Criando uma classe Servlet● Utilize os atalho e siga os passos:

25

Nome e localização do Servlet● (1) O nome do Servlet é “Controlador”

● (2) Defina o pacote com nome de “controle”

26

Finalizando o processo de criação do Servlet● A etapa 3 (Configurar implementação...) define como o

servlet será chamado na URL (em Padrão de URL).

● Clique em Finalizar.

27

Exibindo o conteúdo do Servlet● O Netbeans gera um código de teste para exibir ao executar

o servlet. Execute o servlet e veja o resultado na página web.

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

28

Padrão de Arquitetura MVCPadrão de Arquitetura MVC

29

Padrão Arquitetural MVC● O padrão Model-View-Controller (MVC) é um

padrão de arquitetura no desenvolvimento de software, atualmente considerado uma "arquitetura padrão" (ou referência) na Engenharia de Software.

● O modelo isola a "lógica" (A lógica da aplicação) da interface do usuário (Inserir e exibir dados), permitindo desenvolver, editar e testar separadamente cada parte.

30

Padrão Arquitetural MVC● O padrão Model-view-controller (MVC) é um

modelo de desenvolvimento de Software, atualmente considerado uma "arquitetura padrão" (ou referência) na Engenharia de Software.

● O modelo isola a "lógica" (A lógica da aplicação) da interface do usuário (Inserir e exibir dados), permitindo desenvolver, editar e testar separadamente cada parte.

31

Padrão de Arquitetura MVC ● MVC – é um dos padrões arquiteturais mais

utilizados no desenvolvimento de aplicações web.

● O modelo de arquitetura MVC busca impor a divisão dos interesses, isto é, a separação em “camadas” para

– Dados e regras de negócio (MODELO),

– Visualização/Apresentação/interface (VISÃO) e

– Controle da aplicação (CONTROLADOR).

● Para aplicações web sofre mudanças no padrão e no nome (MVC2, MVP), mas a ideia é a mesma do MVC.

32

MVC em Arquitetura Web (Java)● Na plataforma Web, usando JAVA, podemos

ver isso da seguinte forma:– A VISÃO é representada por páginas JSP

e HTML– O CONTROLADOR é delegado a classes

Servlet’s (ou JSP sem tags html)– O MODELO pode ser utilizado objetos

“beans” (em tempo de “request” ou de “sessão”).

33

MVC em Arquitetura Web

Browser envia a solicitação (request)

Controlador interage com o modelo

Controlador chama a visão

Visão formata a resposta ao browser

34

Estereótipos UML para MVCO uso de estereótipos em UML pemite representar objetos com semântica própria.

Um estereótipo é representado por um ícone ou um texto entre « e » Boundary (fronteira) – representam objetos que realizam a interfaceda fronteira entre o sistema com os atores de interação.São as páginas web contendo apenas controles de interação com o usuário.

Controller (controlador) – representam objetos que realizam o controledo sistema, instanciando os objetos de dados e a navegação entre os objetos de fronteira.Na arquitetura Java (web) são os servlets. Podem ser páginas JSP contendoapenas comandos de controle, não existindo marcas HTML de saída.

Entity (entidade de dados) – representam objetos que armazenam os dados processados no sistema.São os objetos java beans, contendo os dados manipulados na aplicação.

35

MVC em Arquitetura Web (Java)

36

MVC em Arquitetura Web (Java)● Para facilitar a construção de aplicações web

empregando MVC, há no mercado diversas tecnologias (frameworks) disponíveis seguindo essa técnica:– JSF (Java Server Faces) – modelo MVC de

referência do Java;

– Struts2

– Ruby Rails

– Webwork

– Spring MVC ●Entre outros

37

Qual Java framework web MVC escolher ?

● Fonte: http://www.javalobby.org/java/forums/t101110.html

38

MVC com Servlet e JSP● Apesar de existir ferramentas (frameworks)

MVC, pode-se perfeitamente desenvolver aplicações web somente com as tecnologias básicas do Java para Web (Servlets e JSP).

● Porém, o programador deve implementar todos os mecanismos presentes na arquitetura MVC, como controle de navegação, redirecionamento de páginas, chamada da lógica de negócio, exibição dos dados, etc.

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

39

Exemplo de Aplicação Web (Servlet + JSP)Exemplo de Aplicação Web (Servlet + JSP)usando MVCusando MVC

40

Processamento de formulário, para exibição de dados em todas as páginas

● Considere uma página de um formulário de login (identificação do usuário).

● Após a identificação do nome do usuário, todas as páginas seguintes devem exibir esse nome.

Homepage

pag1

pag2

41

Mapa de Navegação

42

Visão arquitetônica MVC p/ Web/Java

Controlador (servlet)

homepage.jsp USUARIO_NOME

<<cria bean>>

<< usa o bean >>

<< forward >>

1

2

34

5

<<submit>>

{nome}

43

Códigos (formulário, Servlet e página homepage.jsp)

<form action="Controlador" method="post"> Informe seu nome: <input name="nome" size="30" type="text" > <br> <input type="submit" value="ENVIAR"></form>

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String nomeUsuario = request.getParameter("nome"); request.getSession().setAttribute("USUARIO_NOME", nomeUsuario); request.getRequestDispatcher("homepage.jsp").forward(request, response); } // fim do método

<body> <h1>Hello World!</h1> Bem vindo ${USUARIO_NOME} <hr> <br><a href="pag1.jsp">Chama página 1</a> <br><a href="pag2.jsp">Chama página 2</a> </body>

44

Passos para construção no NetBeans● Para realizar o código usando o IDE

Netbeans, foi utilizado as seguintes versões:– Netbeans: 7.1

– Tomcat: 7.x

– OBS: ao usar versões anteriores a essas, você terá que observar alguns detalhes de configuração.

45

Passo 1: Escolher o tipo de projeto Web● Abra o Netbeans e escolha no menu: Arquivo – Novo Projeto

● Em seguida, escolha o tipo do projeto: Java Web – Aplicação Web

46

Passo 2: Definir o local (pasta) onde ficará o projeto

● Defina o diretório (pasta) onde ficará o projeto.

47

Passo 3: Definir o servidor web● Escolha o servidor web. Caso ele não esteja na lista, clique

em “Adicionar” (deve estar instalado na sua máquina). Neste exemplo usaremo o GlassFish.

48

Passo 4: Definição de frameworks de apoio● Neste caso, não usaremos nenhum. Clique

em “Finalizar”

49

Projeto gerado no NetBeans● Ao finalizar o projeto é construído (ver figura) e uma página inicial é

criada (index.jsp).

50

Definição do formulário

<form action="Controlador" method="get"> Informe seu nome: <input name="nome" size="30" type="text" > <br> <input type="submit" value="ENVIAR"> </form>

● Crie um novo arquivo JSP com o nome formlogin.jsp ou aproveite o arquivo index.jsp e renomei para formlogin.jsp.

● Acrescente o código para representa um formulário como na figura a seguir.

51

Criando a classe Servet (Controlador)

● Utilize os atalho e siga os passos:

52

Nome e localização do Servlet● (1) O nome do Servlet é “Controlador”

● (2) Defina o pacote com nome de “controle”

53

Finalizando o processo de criação do Servlet

● Verifique como o servlet será nomeado e chamado na URL. Clique em Finalizar.

54

Exibindo o conteúdo do Servlet● O Netbeans gera um código de teste para exibir ao

executar o servlet.

55

Ajustando o código do servlet● Para o nosso exemplo, delete o corpo do

código do método processRequest e insira o código (em azul):

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String nomeUsuario = request.getParameter("nome"); request.getSession()

.setAttribute("USUARIO_NOME", nomeUsuario); request.getRequestDispatcher("homepage.jsp")

.forward(request, response); } // fim do método

56

Código da página “homepage.jsp”● Crie uma nova página JSP com nome

homepage.jsp e acrescente o código:

57

Código das páginas “pag1.jsp” e “pag2.jsp”

● Crie as páginas JSP “pag1.jsp” e “pag2.jsp”

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

58

JSF (Java Server Faces)

59

O que é JSF?O que é JSF?

Mais que um framework para desenvolver aplicações web de forma ágil, JSF foi incorporado ao especificação JEE (já esta definido na arquitetura a partir do Java 6).

Características do JSF:

– MVC para aplicações web

– Utiliza componentes extensíveis

– Código aberto

– É um padrão para trabalhar Java na Web

– Trabalha com o conceito de evento para os componentes (similar à programação dos componentes swing)

– Gerencia estados dos componentes (os java beans)

60

Arquitetura JSF e outros componentesArquitetura JSF e outros componentesRelação entre as tecnologias de aplicação java web

61

JSF – IntroduçãoJSF – Introdução (cont.)(cont.)

JSF contém:

– JavaBeans – Event Listener– Páginas JSP– Classes auxiliares do lado do servidor– Biblioteca de componentes UI– Biblioteca de event handlers, validators, e etc...– Managed (Backing) Beans (classes que gerenciam

dados)– Arquivo de configuração da aplicação

62

Classe ManagedBeanClasse ManagedBean

São classes simples (estilo POJO, Java Bean).

Possuem os métodos de acesso (getters e setters) seguindo a convenção JavaBean

Possuem os métodos relacionados às ações para as regras de navegação

Podem conter métodos validadores dos dados (Validation methods: métodos de validação :)

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

63

Criando um projeto JSF no Netbeans

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

64

Definindo o nome do projeto e localDefinindo o nome do projeto e local

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

65

Escolha do Servidor WebEscolha do Servidor Web

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

66

Escolha do Framework JSF (JavaServer Faces)Escolha do Framework JSF (JavaServer Faces)

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

67

Resultado (projeto e página index.xhtml)Resultado (projeto e página index.xhtml)

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

68

Código da página “index”Código da página “index”

<h:body> Hello from Facelets <h:form> Nome: <h:inputText value="#{cadastro.nome}"/> <BR/> Sobrenome: <h:inputText value="#{cadastro.sobrenome}"/><BR/> ...

<h:commandButton value="Cadastrar Dados" action="#{cadastro.cadastrar}"/> </h:form>

</h:body>

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

69

Criando a página “benvindo.xhtml”Criando a página “benvindo.xhtml”

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

70

Criando a página “benvindo.xhtml” (2)Criando a página “benvindo.xhtml” (2)

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

71

Código da página “benvindo”Código da página “benvindo”

<h:body> <f:view> USANDO JSP Cadastro do usuário ${cadastro.nome} / ${bean.sobrenome} aceito. Parabéns.

<br/> USANDO JSF: <br/> Benvindo, <h:outputText value="#{cadastro.nome}" /> / <h:outputText value="#{cadastro.sobrenome}" /> </f:view>

</h:body>

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

72

Criando o componente bean gerenciável Criando o componente bean gerenciável (Managed Bean)(Managed Bean)

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

73

Definindo o nome e o local do beanDefinindo o nome e o local do bean

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

74

Código do BeanCódigo do Bean

@ManagedBean (name="cadastro")@RequestScopedpublic class CadastroBean {

private String nome; private String sobrenome;

public CadastroBean() { }

public String cadastrar() { if (nome.trim().equals("") || sobrenome.trim().equals("")) { return ("index"); } else { return ("benvindo"); } }

// gets e setts

Desenvolvimento de Aplicações MulticamadasProf. Cláudio Martins

75

Referências bibliográficasReferências bibliográficas Geary, David; Horstmann Cay - Core JavaServer Faces, 2004

Bergsten, Hans; JavaServer Faces, O’Reilly, 2004

Site oficial do JEE: http://www.oracle.com/technetwork/java/javaee/overview/index.html