Advertisement

Aula 09 - Html, XHTML e Faces Servlet;

1- Introdução


Nossa aplicação até a aula anterior já possui conexão com o banco de dados e já utiliza um ORM (mapeador objeto relacional). O passo seguinte é realizar interação com o usuário por meio de páginas HTML. 

Para realizar esta interação é preciso utilizar os conhecimentos obtidos nas aulas 01, 02 e 03 para construir páginas com formulários. Por meio de servlets iremos manipular o html e processar as requisições feitas pelo usuário.

Além disso, iremos entender como utilizar um servlet já construído para facilitar o desenvolvimento java web. Este sevlet é denominado Faces Servlet e dá ao usuário a possibilidade de utilizar XHTML (html com xml) e criar páginas com funcionalidades bastante complexas com maior facilidade.

Nesta aula apresentaremos 2 exemplos, no primeiro utilizaremos um servlet que renderiza uma página HTML pura e realiza a inserção de dados no banco de dados. Já no segundo exemplo iremos utilizar todo o poder do faces servlet para construir a mesma página.

2- Exemplo 01 - Java web Puro

No primeiro exemplo utilizaremos da criação de 3 paginas HMTL (index, sucesso e criarpessoa). 

O index é apenas uma página para redirecionar para o servlet de criação:

<html>
    <head>
        <title>Gerenciando pessoas</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <a href="CriarPessoa">Criar uma nova pessoa</a>
    </body>

</html>


A mensagem de sucesso também não possui segredo algum:

<html>
    <head>
        <title>Mensagem</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Pessoa criada no banco de dados com sucesso</h1>
    </body>

</html>

A página para criação de uma nova pessoa contém um formulário HTML simples que direciona as informações para  o servlet de criação.

<html>
    <head>
        <title>Gerenciando pessoas</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="CriarPessoa" method="POST">
            <input type="text" name="nome" placeholder="Digite seu nome"/>
            <input type="submit" value="Criar"/>
        </form>
    </body>

</html>


A criação de um servlet para tratar as requisições web é necessária. É neste servlet que iremos acessar nossos modelos e controlers JPA.

package Views;

import Controlers.PessoaJpaController;
import Models.Pessoa;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(name = "CriarPessoa", urlPatterns = {"/CriarPessoa"})
public class CriarPessoa extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
          request.getRequestDispatcher("/CriarPessoa.html").forward(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String name = request.getParameter("nome");
        PessoaJpaController control = new PessoaJpaController(EmProvider.getInstance().getEntityManagerFactory());
        Pessoa p = new Pessoa();
        p.setName(name);
        control.create(p);
        request.getRequestDispatcher("/sucesso.html").forward(request, response);
    }

}


Perceba que o método doGet realiza um redirecionamento para a página HTML criarpessoa.html. No mesmo servlet o método doPost realiza a instanciação do controler, do modelo (pessoa) e chama o método para criação da pessoa no banco de dados (create).

Para acessar este código completo acesse nosso github:




3- Exemplo 02 - Java web com faces servlet

A primeira alteração que deve ser feita para utilizar  o JSF é importar a biblioteca do JSF 2.2 para as dependências do seu projeto.


O segundo passo é configurar o faces servlet no web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>

</web-app>

A partir deste momento sua aplicação está habilitada a utilizar o faces servlet para interpretar páginas XHTML. Portanto, iremos alterar as páginas HTML para que sejam agora escritas utilizando recursos do XHTML:

index.xhtml


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <head>
        <title>Gerenciando pessoas</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <h:form>
            <h:commandLink action="#{gerenciarPessoa.gotoAdicionarPessoa()}" value="Adicionar uma nova pessoa"/>
        </h:form>
    </body>

</html>

Observação: é obrigatório que para utilizar as tags do jsf seja declarado o namespace xmlns:h="http://xmlns.jcp.org/jsf/html".

Todos os comandos que precisam obedecer a uma ação (<h:commandLink>) precisam necessariamente estar aninhado em um comando <h:form> </h:form>

O <h:commandLink> é uma tag que ao final gerará um link <a> apontando para uma página definida pelo programador no fluxo de páginas.

CriarPessoa.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <head>
        <title>Criar Pessoa</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <h:form>
            <h:inputText value="#{gerenciarPessoa.pessoaAtual.id}"/>
            <h:inputText value="#{gerenciarPessoa.pessoaAtual.name}"/>
            <h:commandButton value="cadastrar pessoa" action="#{gerenciarPessoa.salvarPessoa()}"/>
        </h:form>
    </body>

</html>


sucesso.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>sucesso</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <h1>Pessoa criada no banco de dados com sucesso</h1>
    </body>
</html>


Você pode perceber que no XHTML em alguns momentos utilizamos Expression Language para nos referenciarmos a um objeto java:

value="#{gerenciarPessoa.pessoaAtual.id}"

Este objeto java chamado de "GerenciarPessoa" é denominado ManagedBean. Este objeto é instanciado e faz parte da camada de view. Ele tem a função de ficar "por trás" de uma ou mais páginas XHTML. Sendo assim, quando o programador deseja utilizar elementos (variáveis, listas, métodos) dentro do Java, basta ele invocar o ManagedBean por meio da expression language correta.

package Views;

import Controlers.PessoaJpaController;
import Models.Pessoa;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;


@ManagedBean
@RequestScoped
public class GerenciarPessoa {
    private Pessoa pessoaAtual = new Pessoa();
    private PessoaJpaController controlPessoa = new PessoaJpaController(EmProvider.getInstance().getEntityManagerFactory());
    
    public GerenciarPessoa() {
    }

    public String gotoAdicionarPessoa(){
        return "CriarPessoa";
    }
    
    public String salvarPessoa(){
        controlPessoa.create(pessoaAtual);
        return "sucesso";
    }
    
    public Pessoa getPessoaAtual() {
        return pessoaAtual;
    }

    public void setPessoaAtual(Pessoa pessoaAtual) {
        this.pessoaAtual = pessoaAtual;
    }
}


Perceba que existem alguns atributos desta classe que são declarados e ganham um Get e um Set. Esse padrão é essencial, visto que é por meio deles que o XHTML consegue acesso as variáveis. 

O método com o nome gotoAdicionarPessoa() retorna uma simples string. Quando o JSF encontra um comando assim que foi invocado por um botão (por meio de um action) ele buscará dentro da pasta de páginas web um XHTML que possui o nome informado e navegará pra ele.

O método de salvarPessoa() é utilizado para gravar uma pessoa no banco de dados e também retorna uma string redirecionando para a página de sucesso.

O código completo está no github:




Nenhum comentário

Conta pra mim sua opinião!

Fale comigo