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:
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>
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:
Post a Comment