Qual a diferença entre HTML e XHTML

Qual a diferença entre HTML e XHTML

Como nossa aplicação 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 anteriores 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.  

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:

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:  

Vinicius dos Santos

Apenas um apaixonado por Ciência da Computação e forma com que ela pode transformar vidas!

Deixe uma resposta