Existe uma diferença muito grande entre HTML e XHTML, mas explicar o porquê eles são diferentes exige que você compreenda vários conceitos importantes sobre programação web. Então eu preparei um post bem completo pra você entender mais do que apenas a diferença entre eles, mas também construir exemplos práticos de como você pode usá-los em aplicações Java.
Antes de mais nada você precisa entender o que é o HTML, em resumo essa é uma linguagem de marcação usada para estruturar o conteúdo de uma página web. Quando dizemos “estruturar o conteúdo” significa que o HTML é uma ferramenta para que você consiga criar uma forma válida de apresentar seu conteúdo para o navegador dos clientes. Se você quer saber mais sobre esse assunto não deixe de acessar nosso post: O que é HTML e pra que serve?
Agora que você já tem uma ideia do que é HTML, você deve estar esperando que eu explique o que é o XHTML. Mas calma aí, não é bem assim. Antes você precisa entender também o que são os servlets do Java, em resumo, essa tecnologia permite que você construa “mini-servidores” capazes de responder requisições HTTP. Os servlets foram criados para fornecer suporte a programação web ao usar a linguagem Java. Se você quer saber mais sobre esse assunto, não deixe de acessar nosso post: O que são Servlets em Java?
Os servlets recebem uma requisição, processam os dados no servidor e respondem a requisição com um documento (seja ele texto plano, JSON, HTML, CSS, etc). Nesse contexto, os desenvolvedores criaram um Servlet que ficou muito famoso no mundo Java, chamado de Faces Servlet. Esse Servlet tem o poder de realizar o “parse” de um documento XHTML e transformar essas páginas em HTML puro.
PS: sim, você leu certo, todo XHTML na verdade é transformado em HTML.
O XHTML é considerado um HTML estendido, isso por que ele possui várias TAGs adicionais que permitem executar ações que o HTML não dá suporte (ou então são muito difíceis de construir). Vamos a um exemplo bastante simples: O HTML possui uma TAG chamada “anchor” representada por <a>, essa TAG permite que você crie um link para um outro site. No XHTML, existe uma TAG equivalente chamada <outputLink>, no entanto, sua sintaxe é significativamente diferente.
<h:outputLink value = "page1.jsf" >Page 1</h:outputLink> Agora, você deve estar se perguntando: mas pra quê tudo isso? qual a vantagem?
É uma pergunta justa, visto que aprender o HTML não é tão simples, agora temos que aprender outra sintaxe para a mesma funcionalidade. O JSF permite que você use o XHTML para facilitar a entrada e a saída de dados, por exemplo: o “selectOneMenu” simplifica a criação e carregamento dos dados de um combo box:
<h:selectOneMenu value = "#{userData.data}">
<f:selectItem itemValue = "1" itemLabel = "Item 1" />
<f:selectItem itemValue = "2" itemLabel = "Item 2" />
</h:selectOneMenu> Agora que já entendemos o que é o XHTML vamos aos exemplos práticos. O primeiro utiliza 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.
Exemplo 01 – Java web Puro
No primeiro exemplo, vamos criar 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 é bastante simples, veja:
<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>
Nesse exemplo, nosso objetivo é cadastrar uma “pessoa” no banco de dados. Portanto, é preciso também que sejam criados os modelos e controlers JPA (você pode acessar esses códigos em nosso github.
Agora, vamos começar a construir o servlet que irá responder as requisições do usuário. Para isso, vamos criar uma classe chamada “CriarPessoa” que extende de HttpServlet. Essa classe deve ser anotada com @WebServlet e informar os parâmetros “name” e “urlPatterns”.
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:
Exemplo 02 – Java web com faces servlet
Agora chegou a hora de experimentar todo o poder do nosso amigo JSF. Para isso, precisamos fazer algumas alterações no nosso projeto. A primeira alteração que deve ser feita é 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” tem um nome especial: “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 com o caminho que você deseja que sua aplicação siga. Quando o JSF encontra um comando 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:
Conclusão
Na minha opinião, usar XHTML exige um esforço grande do programador para configurar o ambiente e principalmente de se “acostumar” com o padrão de navegação entre páginas (sem falar nas TAGs diferentonas). As vezes até pensamos: “ah, não vale a pena esse esforço”. No entanto, é fato que quando uma aplicação Java web cresce, ela se torna muito difícil de gerenciar sem nenhuma ajuda de frameworks. Atualmente, existem outras opções (talvez até melhores) e você não precisa necessariamente usar o JSF.
Se você gostou do artigo, compartilhe com seus amigos e deixe um comentário 🙂
