Aula Prática Programação Web II

Pague pelo PIX ou cartão e faça o download agora mesmo. Parcele suas compras em até 12x.

Visa Boleto Mastercard American Express Diners Club Elo Hipercard Mercado Pago

Descrição

Aula Prática Programação Web II

ROTEIRO DE AULA PRÁTICA NOME DA DISCIPLINA: PROGRAMAÇÃO WEB

Unidade: U1_ PROGRAMAÇÃO_EM_JSF

Aula: A2_COMPONENTES_VISUAIS_DO_JSF


OBJETIVOS

Definição dos objetivos da aula prática:
Definição dos objetivos da aula prática: Ensinar o aluno a criar um projeto web dinâmico utilizando
conceitos iniciais de JSF na camada de visão, além de estruturar as partes desse projeto segundo
o padrão de arquitetura MVC, tudo isso sendo aplicado à linguagem de programação Java. Após
a criação e estruturação dos arquivos, aplicaremos uma folha de estilo no formulário criado.

Eclipse e Wildfly

Ide Eclipse ou correlata que possua configurações para construção de classes seguindo o Java
EE, com configurações para ter servidor de aplicação e utilizar o framework JSF para a camada
de visão. Recomenda-se o uso do servidor wilfly.

Acesse o site oficial: https://eclipseide.org/
Clique em Download:
Escolha a versão “Eclipse IDE for Enterprise Java and Web Developers” que compatível
com o sistema operacional do seu computador.

Após o download, descompacte o já estará pronto para uso.

Atividade proposta: Criaremos um projeto baseado em Java EE (Projeto de WEB Dinâmico)
com organização preconizada pelo MVC, para cadastro de faculdades.

Você deve elaborar, pelo menos, uma classe de modelo chamada Faculdade. Essa classe terá
um id (int), nomeCompleto (String) e nomeFantasia (String). Esses dados devem ser obtidos
através de um formulário que contenha esses três elementos para ser digitados pelo usuário.

Esse formulário deve estar presente na página faculdades.xhtml e ela deve obrigatoriamente
utilizar conceitos de JSF que seja compatível com as premissas de utilização de
ManagedBeans. A classe Java FaculdadeMB será a responsável por controlar as requisições
oriundas da camada de visão e passá-las para a camada modelo. As etapas descritas a seguir
foram criadas usando a IDE Eclipse, com o servidor Wildfly.

Para iniciar a atividade, vamos criar um projeto web dinâmico:

Figura 1 – Criando um Dynamic Web Project

Vamos dar o nome “Faculdade” ao projeto e colocar as configurações conforme a Figura 7. Caso
seu “Target runtime” esteja vazio como na Figura 2 então clique em “New Runtime…”, então uma
janela abrirá, procure por “WildFly” da mesma forma que a Figura 3, selecione “JBoss AS, WildFly
& EAP Server Tools” e clique em next, prossiga com a instalação até a conclusão, e no final, aceite
os termos. Atenção, mesmo após o aceite dos termos o download e a instalação ainda podem
estar ocorrendo, cheque no canto inferior esquerdo (Figura 4) e logo após a finalização o Eclipse
precisará ser reiniciado, então repita o processo de criação do projeto, caso ainda não tenha o
“Target runtime” clique novamente em “New Runtime…” e procure por “WildFly” (Figura 5),
então selecione “WildFly 10.x Runtime” e clique em next, na próxima clique em “Download and
install runtime…”, vamos utilizar a versão, selecione ela e clique em next, prossiga com a
instalação até a finalização, agora podemos prosseguir com a configuração do projeto.

Figura 2 – Configurando runtime
Figura 3 – Instalando WildFly
Figura 4 – Processo de download e instalação
Figura 5 – Seleção Runtime WildFly 10
Figura 6 – Instalação WildFly 10
Figura 7 – Configurações para criação do projeto

Para criação do formulário, clique com o botão direito sobre o projeto e escolha New >> HTML
File. Dê o nome para o arquivo de faculdades.xhtml e clique em finish. Crie os campos necessários
usando os recursos JSF, conforme código na Figura 8.

Figura 8 – Código para criação do formulário faculdade.xhtml o

Criada a interface para a tela de cadastro, o próximo passo é criar o pacote “model” e dentro do
pacote criar a classe “Faculdade”, com o código da Figura 9.

Figura 9 – Classe Faculdade

O próximo passo consiste em criar uma classe especial, uma Managed Bean, para fazer o
controle da comunicação entre a camada de visão e a camada modelo. Para isso, no
projeto crie um pacote chamado “control” e dentro do pacote uma nova classe Java
chamada “FaculdadeMB”, com o código da Figura 10.

Figura 10 – Classe FaculdadeMB

O próximo passo é configurar o arquivo faces-config.xml, que se encontra dentro da pasta
webapp > WEB-INF, clique duas vezes para abrir, caso de primeira não consiga ver o código, no
menu inerior dessa janela clique em “source”. Com o código da Figura 11, adicione as tags das
linhas 8 a 10.

Figura 11 – Classe FaculdadeMB

Para testar, clique com o botão direito no arquivo faculdades.xhtml e selecione Run as > Run on
Server. Caso uma janela se abra pedindo para selecionar o server, procure por “WildFly”,
selecione “WildFly 10.x” e clique em next (Figura 12), prossiga até finalizar.

Figura 12 – Selecionar server

Caso de o erro 404 ao rodar o server, siga os seguintes passos:

No Eclipse, vá em:
Project → Properties → Java Compiler
Marque “Enable project specific settings”.
Em Compiler compliance level, selecione 1.8.
Vá em Project → Clean… e limpe/recompile o projeto.
Pare e reinicie o WildFly.

Se todos os códigos foram feitos corretamente, o resultado após preencher e clicar no botão
submit, deverá ser similar ao da Figura 13.

Figura 12 – Resultado esperado até o momento

Observe o caminho:

Localhost:8080/Faculdade/faces/faculdade.xhtml

A tag no arquivo web.xml é quem especifica o mapeamento do JSF, veja como está
para esse projeto. Na linha 13 /faces/* implica diretamente no caminho.

Agora passaremos para a finalização do projeto criando o arquivo de estilos. Dando continuidade
crie uma nova pasta, dentro de “webapp”, chamada “resources”. Dentro dessa nova pasta, crie
uma nova, chamada “css”. Quando construímos essa estrutura de pastas, basta adicionar a
seguinte diretriz para que o arquivo xhtml aplique as regras do CSS:

<h:outputStylesheet library=”css” name=”arquivo.css” />

Onde arquivo.css é o nome que dará ao arquivo de folha de estilo.

Vamos criar, dentro da pasta css o arquivo estilo1.css com o seguinte código:

Pare a execução do servidor, e execute novamente. Veja se o resultado é similar ao da Figura 13.

Figura 13 – Resultado da atividade

Ao final da aula, deverá ser entregue um projeto web chamado Faculdade, com uma interface
gráfica, uma classe modelo e uma classe de controle. O sistema deverá estar funcionando.

Utilize esta tabela para organizar os passos realizados e adicionar capturas de tela:

Estrutura do Projeto Criada [Insira o Print]
Arquivo faculdades.xhtml [Insira o Print]
Arquivo Faculdade.java [Insira o Print]
Arquivo FaculdadeMB.java [Insira o Print]
Arquivo estilo1.css [Insira o Print]
Resultado Testado [Insira o Print]

✓ Estrutura do projeto criada corretamente;
✓ Arquivo xhtml criado;
✓ Classe modelo para o objeto Faculdade;
✓ Arquivos organizados nos devidos pacotes;
✓ ManagedBean criado;
✓ Configuração do arquivo faces-config.xml
✓ Projeto executando em um browser
✓ Pasta “resources” criada dentro de “webapp”
✓ Pasta “css” criada dentro de “resources”
✓ Arquivo css chamado estilo1.css criado dentro da pasta css
✓ Arquivo estilo1.css anexado no arquivo xhtml através da referência:
 <h:outputStylesheet library=”css” name=”estilo1.css” />

Resultados do experimento:

O arquivo deverá conter:

Capa
Folha de rosto com os dados da disciplina e do aluno
Métodos: Explique as técnicas que utilizou
Resultado:
 Captura de tela da página WEB.
 Captura de tela da estrutura do projeto.

Evidências (códigos):
 faculdades.xhtml
 Faculdade.java
 FaculdadeMB.java
 estilo1.css

Após concluir esta atividade, você terá aprendido:

Criar um projeto web dinâmico em Java utilizando o servidor de aplicações WildFly.
Estruturar uma aplicação seguindo o padrão MVC (Model–View–Controller).
Desenvolver páginas de interface utilizando JSF (JavaServer Faces) e componentes
XHTML.

Implementar Managed Beans para comunicação entre a camada de visão e a camada de
modelo.

Aplicar estilos personalizados em páginas JSF utilizando folhas de estilo (CSS) e a pasta
de recursos padrão do framework.


Definição dos objetivos da aula prática:

Nessa aula o objetivo é criar um sistema de agenda fazendo a persistência dos dados usando o
framework Hibernate.

Para isso o sistema será dividido em duas partes:

Na primeira deverão ser criados os arquivos de configuração com o banco, bem como a
transação de inserção de dados.

Na segunda, serão criados os arquivos necessários à interação do usuário com o sistema,
ou seja, a Managed Bean e o arquivo.xhtml.

Eclipse, Wildfly e XAMPP

Ide Eclipse ou correlata que possua configurações para construção de classes seguindo o Java
EE, com configurações para ter servidor de aplicação e utilizar o framework JSF para a camada
de visão. Recomenda-se o uso do servidor wilfly.

Acesse o site oficial: https://eclipseide.org/
Clique em Download:
Escolha a versão “Eclipse IDE for Enterprise Java and Web Developers” que compatível
com o sistema operacional do seu computador.

Após o download, descompacte o já estará pronto para uso.

Atividade proposta: Criaremos um projeto baseado em Java EE (Projeto Web Dinâmico),
organizado segundo o padrão MVC, para o cadastro de contatos.

Você deve elaborar, pelo menos, uma classe de modelo chamada Contato, contendo os atributos
id (Long), nome (String), telefone (String) e email (String). Esses dados serão obtidos por meio de
um formulário presente na página Contato.xhtml, na qual o usuário poderá cadastrar, listar, alterar
e excluir registros.

A página deve utilizar os componentes e tags do JSF, de forma compatível com as premissas de
utilização de ManagedBeans. A classe Java ContatoMB será responsável por controlar as
requisições oriundas da camada de visão e encaminhá-las à camada de persistência.

A persistência dos dados deve ser implementada por meio da API JPA, com o provedor
Hibernate, realizando a integração com o banco de dados MySQL. A configuração do acesso ao
banco será feita no arquivo persistence.xml, e as operações de CRUD serão estruturadas nas
classes DAO e CRUD, utilizando EntityManager para gerenciar as transações.

As etapas descritas a seguir foram desenvolvidas utilizando a IDE Eclipse e o servidor WildFly,
em conjunto com o XAMPP (phpMyAdmin) para gerenciamento do banco de dados.

Usando o Xampp (ou outro SGBD), crie um banco de dados chamado “agenda”.
Faça o download do conector MySql pelo link:
https://repo1.maven.org/maven2/mysql/mysql-connector-java/8.0.11/mysqlconnector-java-8.0.11.jar

Faça o download do Hibernate, os links para download das libs:
https://repo1.maven.org/maven2/antlr/antlr/2.7.7/antlr-2.7.7.jar
https://repo1.maven.org/maven2/com/fasterxml/classmate/1.3.0/classmate-1.3.0.jar
https://repo1.maven.org/maven2/dom4j/dom4j/1.6.1/dom4j-1.6.1.jar
https://repo1.maven.org/maven2/org/hibernate/common/hibernate-commonsannotations/5.0.1.Final/hibernate-commons-annotations-5.0.1.Final.jar
https://repo1.maven.org/maven2/org/hibernate/hibernatecore/5.2.17.Final/hibernate-core-5.2.17.Final.jar
https://repo1.maven.org/maven2/org/hibernate/hibernateentitymanager/5.0.7.Final/hibernate-entitymanager-5.0.7.Final.jar
https://repo1.maven.org/maven2/org/javassist/javassist/3.18.1-GA/javassist-3.18.1-GA.jar
https://repo1.maven.org/maven2/org/jboss/logging/jboss-logging/3.3.0.Final/jbosslogging-3.3.0.Final.jar

Crie um projeto Dynamic Web com p nome “Agenda” (Figura 1).
Dentro da pasta webapp > WEB-INF > lib, coloque tanto o conector MySql, quanto os
arquivos do Hibernate que você realizou o download nos passos 2 e 3.

Clique com o botão direito no nome do projeto, selecione “Properties” e depois Java Build
Path > aba Libraries. Clique em Add Jars e selecione a pasta lib que você copiou os
arquivos no passo 6 (Figura 2).

Ajustar o compilador

Clique com o botão direito no projeto Agenda → Properties
Vá em Java Compiler
Marque Enable project specific settings
Em Compiler compliance level, selecione 1.8
Clique em Apply and Close

Ajustar o “Project Facet”
Clique novamente com o botão direito no projeto → Properties
Vá em Project Facets
Procure a linha Java
Altere a Version para 1.8
Se estiver cinza:
Clique no link “Further configuration available…”
No campo “Runtimes”, marque o WildFly 10 Runtime (ou configure
se ainda não existir)

Clique em OK e volte para 1.8
Clique em Apply and Close

Figura 1 – Criando o projeto
Figura 2 – Adicionando libs

Dentro da pasta webpp> META-INF crie o arquivo persistence.xml

<persistence xmlns=”http://xmlns.jcp.org/xml/ns/persistence”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://xmlns.jcp.org/xml/ns/persistence
http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd”
version=”2.1″>

org.hibernate.jpa.HibernatePersistenceProvider
model.Contato

<property name=”javax.persistence.jdbc.url”
value=”jdbc:mysql://localhost:3306/agenda?serverTimezone=UTC”/>

Crie um pacote chamado “model” dentro da pasta raiz “src” e crie a classe “Contato”, com
o seguinte código:

package model;

import javax.persistence.*;

@Entity
@Table(name = “Contato”)
public class Contato {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column
private int id;

@Column
private String nome;

@Column
private String sobrenome;

@Column
private String telefone;

@Column
private String email;

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}

public String getSobrenome() {
return sobrenome;
}

public void setSobrenome(String sobrenome) {
this.sobrenome = sobrenome;
}

public String getTelefone() {
return telefone;
}

public void setTelefone(String telefone) {
this.telefone = telefone;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}

}

Dentro da pasta model crie a classe DAO, para fazer a conexão com o banco
package model;

import javax.persistence.*;

public class DAO {

private static final EntityManagerFactory emFactory;

static {
emFactory = Persistence.createEntityManagerFactory(“agendaPersist”);
}

public static EntityManager getEntityManager() {
return emFactory.createEntityManager();
}

public static void fecharFactory() {
emFactory.close();
}

}

Dentro da pasta model crie agora a classe CRUD.
package model;

import javax.persistence.*;

public class CRUD {

public static void inserir(Contato c1) {
try {
EntityManager entityManager = DAO.getEntityManager();
entityManager.getTransaction().begin();
entityManager.persist(c1);
entityManager.getTransaction().commit();
entityManager.close();
System.out.println(“conectado Salvo!”);
} catch(Exception ex) {
ex.printStackTrace();
}
}

}

Nesse momento, fique à vontade caso queira implementar as demais transações com o banco, elas estão
disponíveis no texto principal da seção 2.3.

Agora vamos criar os componentes necessários para a interação do usuário com o sistema.

Crie o pacote “controller” dentro da pasta raiz “src” e dentro dele crie a classe ContatoMB com o
seguinte código:

package controller;

import javax.faces.bean.ManagedBean;

import model.*;

@ManagedBean
public class ContatoMB {

public ContatoMB() {
}

private Contato c = new Contato();

public String getId() {
return String.valueOf(c.getId());
}

public void setId(String id) {
c.setId(Integer.parseInt(id));
}

public String getNome() {
return c.getNome();
}

public void setNome(String nome) {
c.setNome(nome);
}

public String getSobrenome() {
return c.getSobrenome();
}

public void setSobrenome(String sobrenome) {
c.setSobrenome(sobrenome);
}

public String getTelefone() {
return c.getTelefone();
}

public void setTelefone(String telefone) {
c.setTelefone(telefone);
}

public void setEmail(String email) {
c.setEmail(email);
}

public String getEmail() {
return c.getEmail();
}

public void salvar() {
try {
CRUD.inserir(c);
} catch(Exception ex){
ex.printStackTrace();
}
}

}

Configure arquivo faces-config.xml na pasta webapp>WEB-INF, deixando com o seguinte
código:

<faces-config
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-facesconfig_2_2.xsd”
version=”2.2″>

contatoMB
controller.ContatoMB
request

Por fim, crie o arquivo Contato.xhtml dentro da pasta webapp, com o seguinte código:

Com a criação dos 6 arquivos de códigos descritos nas duas atividades, juntamente com as
configurações que foram realizadas, o projeto “Agenda” está pronto para ser executado e persistir
dados.

✓ Criar o Banco de dados Usuários no MySQL;
✓ Criação da estrutura do projeto no Eclipse;
✓ Criação o arquivo de persistência;
✓ Criação da classe Contato.java;
✓ Criação da classe DAO.java;
✓ Criação da classe CRUD.java;
✓ Criação da classe Managed Bean chamada “ContatoMB”;
✓ Configuração do arquivo faces-config.xml;
✓ Criação da interface gráfica em um arquivo xhtml.

Resultados do experimento:

O arquivo deverá conter:

Capa
Folha de rosto com os dados da disciplina e do aluno
Métodos: Explique as técnicas que utilizou
Resultado:
 Captura de tela da raiz do projeto;
 Captura de tela da página Contato funcionando;
 Captura de tela da tabela do banco de dados com pelo menos 5 dados inseridos.

Evidências (códigos):
 Persistence.xml
 Contato.java
 DAO.java
 CRUD.java
 ContatoMB.java
 Contato.xhtml

Após concluir esta atividade, você terá aprendido:

Criação e configuração de um projeto Java EE (Web Dinâmico) estruturado segundo o
padrão MVC.

Implementação de um CRUD (Create, Read, Update, Delete) utilizando JSF como camada
de visão.

Mapeamento de entidades e persistência de dados com JPA/Hibernate integrando com o
banco de dados MySQL.

Configuração e utilização do arquivo persistence.xml para definir o provedor de
persistência e os parâmetros de conexão.

Manipulação de dados por meio da API EntityManager, aplicando boas práticas de
transações e controle de exceções.

Integração entre as camadas View, Controller e Model, garantindo comunicação eficiente
entre os componentes do sistema.


Definição dos objetivos da aula prática:

Compreender o papel dos frameworks Tomahawk, HighFaces e BootsFaces no
ecossistema JSF, reconhecendo como eles ampliam os recursos visuais e funcionais das
aplicações web.

Explorar a integração do BootsFaces com o JSF, aplicando componentes visuais
baseados em Bootstrap para criar interfaces modernas, responsivas e de fácil
manutenção.

Desenvolver uma aplicação prática utilizando BootsFaces, aplicando seus principais
componentes (como <b:form>, <b:inputText>, <b:commandButton>, <b:dataTable>, entre
outros) em conjunto com ManagedBeans e a arquitetura MVC.

Eclipse e BootsFaces

Ide Eclipse ou correlata que possua configurações para construção de classes seguindo o Java
EE, com configurações para ter servidor de aplicação e utilizar o framework JSF para a camada
de visão. Recomenda-se o uso do servidor wilfly.

Acesse o site oficial: https://eclipseide.org/
Clique em Download:
Escolha a versão “Eclipse IDE for Enterprise Java and Web Developers” que compatível
com o sistema operacional do seu computador.

Após o download, descompacte o já estará pronto para uso.

Atividade proposta:

Criaremos um projeto baseado em Java EE (Projeto Web Dinâmico) utilizando o framework JSF
e a biblioteca BootsFaces, com o objetivo de desenvolver uma interface moderna e responsiva
para listagem de veículos.

Você deverá elaborar uma classe de modelo chamada Veículo, contendo os atributos id
(Integer), modelo (String), fabricante (String), ano (int) e valor (double). Esses dados serão
manipulados por meio de uma tabela dinâmica na página veiculos.xhtml, utilizando o
componente <b:dataTable> do BootsFaces.

O projeto deve seguir o padrão MVC, utilizando uma classe ManagedBean (VeiculoMB) para
controlar as ações do usuário e repassar os dados para a camada de modelo. A tabela deve
permitir a exibição dos registros cadastrados e aplicar o estilo visual oferecido pelo BootsFaces,
garantindo uma interface limpa e intuitiva.

As etapas descritas a seguir foram desenvolvidas na IDE Eclipse, com o servidor WildFly,
demonstrando a integração entre JSF e BootsFaces na criação de aplicações web modernas e
compatíveis com o padrão Java EE.

Crie um novo projeto chamado PraticaBootsFaces, com as configurações da
Figura 1.

Figura 1 – Criando o projeto

Ajustar o compilador
 Clique com o botão direito no projeto Agenda → Properties
 Vá em Java Compiler
 Marque Enable project specific settings
 Em Compiler compliance level, selecione 1.8
 Clique em Apply and Close

Dentro da pasta java raiz “src”, criar um novo pacote chamado model. Dentro
desse pacote criar a classe Carro.java com o seguinte código:

package model;

public class Carro {

private String modelo;

private String marca;

public Carro(String marca, String modelo) {
this.modelo = modelo;
this.marca = marca;
}

public String getModelo() {
return modelo;
}

public void setModelo(String modelo) {
this.modelo = modelo;
}

public String getMarca() {
return marca;
}

public void setMarca(String marca) {
this.marca = marca;
}

}

Dentro da pasta java raiz “src”, criar um novo pacote chamado control, e dentro
dele criar uma nova classe java chamada CarrosMB.java, com o seguinte código:

package control;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;

import model.Carro;

@ManagedBean
public class CarrosMB {

public CarrosMB() {
carros = new ArrayList();
carros.add(new Carro(“Marca 1”, “Modelo 1”));
carros.add(new Carro(“Marca 2”, “Modelo 2”));
carros.add(new Carro(“Marca 3”, “Modelo 3”));
}

private List carros;

public List getCarros() {
return carros;
}

public void setCarros(List carros) {
this.carros = carros;
}

}

Dentro do arquivo faces-config.xml acrescentar a seguinte configuração:

carrosMB
control.CarrosMB
request

Agora vamos criar a interface gráfica para usar os dados da Managed Bean CarrosMB.java.

Acesse o site https://github.com/TheCoder4eu/BootsFacesOSP/releases/download/v1.3.0/BootsFaces-OSP-1.3.0-dist.jar e faça o download do framework
BootsFaces. Descompacte o arquivo e copie o JAR para a pasta lib do projeto. Utilizamos o
arquivo “BootsFaces-OSP-1.3.0-dist”.

Dentro da pasta webapp crie um arquivo chamado pagina.xhtml, com o respectivo código:

Se todos os passos foram devidamente seguidos, o resultado será como na Figura 2.

Figura 2 – Resultado do roteiro

Após o experimento responda as seguintes questões:

Qual é a principal vantagem de usar o BootsFaces em relação aos componentes padrão
do JSF na criação das interfaces web?

Como o uso de componentes BootsFaces, como <b:inputText> e <b:dataTable>,
contribui para a usabilidade e organização visual da aplicação?

De que forma o BootsFaces se integra ao JSF, e por que essa integração é importante
para o funcionamento da aplicação?

✓ Criar um projeto com as especificações sugeridas
✓ Criar o pacote model e dentro dele a classe Carro.java
✓ Criar o pacote model e dentro dele a classe CarrosMB.java
✓ Acrescentar a configuração da Managed Bean no arquivo faces-config.xml
✓ Fazer o download do framework BootsFaces
✓ Copiar o JAR para a pasta lib do projeto
✓ Dentro da pasta webappcriar o arquivo pagina.xhtml com o devido código.
✓ Responder as questões.

Resultados do experimento:

O arquivo deverá conter:

Capa
Folha de rosto com os dados da disciplina e do aluno
Métodos: Explique as técnicas que utilizou
Resultado:
 Respostas das questões do avaliando resultados.

Evidências:
 Captura de tela do projeto.
 Captura de tela do resultado do experimento.

Formato de entrega:

Arquivo PDF

Após concluir esta atividade, você terá aprendido:

A compreender a função dos frameworks Tomahawk, HighFaces e BootsFaces no
aprimoramento das aplicações desenvolvidas com JSF.

A utilizar componentes visuais do BootsFaces para construir interfaces web modernas,
responsivas e integradas ao padrão MVC.

A integrar o BootsFaces ao JSF, configurando corretamente as bibliotecas e aplicando
seus recursos de forma prática no desenvolvimento de páginas XHTML.

A diferenciar os frameworks visuais para JSF, reconhecendo suas vantagens e o contexto
mais adequado para o uso de cada um.


Definição dos objetivos da aula prática:

Compreender o funcionamento de APIs RESTful e seus princípios básicos.
Implementar endpoints usando JAX-RS no Java EE.
Produzir e consumir dados no formato JSON.
Executar e testar serviços REST em um servidor de aplicação (WildFly).

Eclipse

Ide Eclipse ou correlata que possua configurações para construção de classes seguindo o Java
EE, com configurações para ter servidor de aplicação e utilizar o framework JSF para a camada
de visão. Recomenda-se o uso do servidor wilfly.

Acesse o site oficial: https://eclipseide.org/
Clique em Download:
Escolha a versão “Eclipse IDE for Enterprise Java and Web Developers” que compatível
com o sistema operacional do seu computador.

Após o download, descompacte o já estará pronto para uso.

Atividade proposta:

Nesta atividade, o aluno desenvolverá uma API RESTful utilizando os recursos da especificação
JAX-RS presentes no Java EE (através do servidor WildFly).

A aplicação, chamada RestBook, tem como objetivo expor endpoints REST para listar e cadastrar
livros em formato JSON, aplicando os princípios de comunicação sem estado (stateless) e
padronização de verbos HTTP.

A classe Livro representará o modelo principal da aplicação, contendo os atributos id, titulo e
autor.

Em seguida, será criada a classe LivroResource, responsável por definir os endpoints com as
anotações @Path, @GET, @POST e @Produces(MediaType.APPLICATION_JSON).

Esses endpoints permitirão consultar todos os livros e cadastrar novos livros via requisições
HTTP.

  1. Criar o projeto (Figura 1)

No Eclipse: File > New > Dynamic Web Project.
Nome: RestBook.
Target runtime: selecione o WildFly instalado.
Configuration: “Default Configuration for WildFly”.
Finish.

Figura 1 – Criando o projeto

  1. Certifique-se de que o projeto está com Java 8

Project > Properties > Project Facets: Java 1.8

  1. Habilitar JAX-RS (RESTEasy) e JSON

O WildFly já traz o RESTEasy. Para garantir a serialização em JSON via Jackson:

Crie a pasta: src/main/webapp/WEB-INF/ (se não existir).
Dentro dela, crie o arquivo jboss-deployment-structure.xml com o conteúdo:

Isso adiciona o provider Jackson2 do WildFly ao seu WAR (sem precisar baixar libs).

  1. Definir o pacote base

Crie um pacote Java, por exemplo: br.com.restbook

  1. Configurar o ponto de entrada do JAX-RS

Crie a classe JaxRsConfig:
package br.com.restbook;

import javax.ws.rs.ApplicationPath;

import javax.ws.rs.core.Application;

@ApplicationPath(“/api”)
public class JaxRsConfig extends Application {
// sem código: a anotação já registra o JAX-RS em /api
}

A sua API responderá em URLs que começam com /api.

  1. Criar o modelo (Resource Representation)

Crie a classe Livro:
package br.com.restbook;

public class Livro {

private Integer id;

private String titulo;

private String autor;

public Livro() {}

public Livro(Integer id, String titulo, String autor) {
this.id = id;
this.titulo = titulo;
this.autor = autor;
}

public Integer getId() { return id; }

public void setId(Integer id) { this.id = id; }

public String getTitulo() { return titulo; }

public void setTitulo(String titulo) { this.titulo = titulo; }

public String getAutor() { return autor; }

public void setAutor(String autor) { this.autor = autor; }

}

  1. Criar o recurso REST (endpoints)

Crie a classe LivroResource:
package br.com.restbook;

import java.util.*;

import java.util.concurrent.atomic.AtomicInteger;

import javax.ws.rs.*;

import javax.ws.rs.core.*;

import javax.ws.rs.core.Response.Status;

@Path(“/livros”)
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public class LivroResource {

private static final List LIVROS = new ArrayList<>();

private static final AtomicInteger SEQ = new AtomicInteger(1);

static {
LIVROS.add(new Livro(SEQ.getAndIncrement(), “Clean Code”, “Robert C. Martin”));
LIVROS.add(new Livro(SEQ.getAndIncrement(), “Effective Java”, “Joshua Bloch”));
}

@GET
public List listar() {
return LIVROS; // 200 + JSON
}

@GET
@Path(“/{id}”)
public Response obter(@PathParam(“id”) int id) {
return LIVROS.stream()
.filter(l -> l.getId() == id)
.findFirst()
.map(l -> Response.ok(l).build())
.orElse(Response.status(Status.NOT_FOUND).build());
}

@POST
public Response adicionar(Livro novo, @Context UriInfo uriInfo) {
if (novo == null || novo.getTitulo() == null || novo.getAutor() == null) {
return Response.status(Status.BAD_REQUEST).entity(“{\”erro\”:\”Titulo e autor são
obrigatórios\”}”).build();
}

novo.setId(SEQ.getAndIncrement());
LIVROS.add(novo);

UriBuilder uriBuilder =
uriInfo.getAbsolutePathBuilder().path(String.valueOf(novo.getId()));
return Response.created(uriBuilder.build()).entity(novo).build(); // 201 + Location +
JSON
}

@DELETE
@Path(“/{id}”)
public Response remover(@PathParam(“id”) int id) {
boolean removed = LIVROS.removeIf(l -> l.getId() == id);
return removed ? Response.noContent().build() :
Response.status(Status.NOT_FOUND).build();
}

}

  1. Deploy no WildFly

Run As > Run on Server (selecione o WildFly).
Verifique no Console se a aplicação subiu sem erros.
Acesse no navegador para testar o GET:
http://localhost:8080/RestBook/api/livros

  1. Testes rápidos (Postman ou cURL)

Listar livros (GET)
URL: GET http://localhost:8080/RestBook/api/livros
Headers: Accept: application/json

Obter por id (GET)
URL: GET http://localhost:8080/RestBook/api/livros/1

Adicionar livro (POST)
URL: POST http://localhost:8080/RestBook/api/livros
Headers:
Content-Type: application/json
Accept: application/json
Body (raw/JSON):
{
“titulo”: “Domain-Driven Design”,
“autor”: “Eric Evans”
}

  1. Remover (DELETE)

URL: DELETE http://localhost:8080/RestBook/api/livros/2

cURL exemplo (POST):
curl -i -X POST “http://localhost:8080/RestBook/api/livros” \
-H “Content-Type: application/json” \
-d “{\”titulo\”:\”Refactoring\”,\”autor\”:\”Martin Fowler\”}”

Após o experimento responda as seguintes questões:

Qual é a principal diferença entre um método REST anotado com @GET e outro com
@POST?

Por que o formato JSON é amplamente utilizado em APIs RESTful modernas?

Explique o papel da anotação @Path em uma classe que representa um recurso REST.

✓ Criar o projeto “RestBook” no Eclipse (Dynamic Web Project com suporte a JAX-RS).
✓ Configurar a classe Livro com os atributos e métodos getters/setters.
✓ Criar a classe LivroResource com os métodos listarLivros() e adicionarLivro().
✓ Garantir o retorno em JSON usando @Produces(MediaType.APPLICATION_JSON).
✓ Testar os endpoints /livros e /livros/add no Postman ou navegador.

Resultados do experimento:

O arquivo deverá conter:

Capa
Folha de rosto com os dados da disciplina e do aluno
Métodos: Explique as técnicas que utilizou
Resultado:
 Respostas das questões do avaliando resultados.

Evidências:
 Captura de tela do projeto;
 Captura de tela da página dos dois GETs no navegador.

Formato de entrega:

Arquivo em Word ou PDF com as capturas de tela.

Ao final desta atividade, o aluno será capaz de:

Compreender a estrutura e funcionamento de uma API RESTful desenvolvida em Java
EE, reconhecendo o papel dos recursos, métodos HTTP e formato de troca de dados
(JSON).

Implementar e expor endpoints REST utilizando JAX-RS (RESTEasy), aplicando
anotações como @Path, @GET, @POST e @Produces para definir o comportamento da
API.

Testar e validar requisições HTTP (GET, POST e DELETE) através de ferramentas como
Postman ou navegador, analisando os códigos de status e as respostas retornadas em
JSON.

Configurar e executar uma aplicação REST no servidor WildFly, garantindo o correto
funcionamento do módulo de serialização JSON (Jackson Provider).

Como se realizam os envios?

O seu trabalho é disponibilizado pronto, respondido e nas normas já na mesma hora aqui em nosso site na sua área de downloads e também no seu e-mail.

Em quanto tempo recebo o portfólio?

Os envios são imediatos. Após sua compra, o trabalho já é disponibilizado instantaneamente aqui em nosso site e no seu e-mail.

E se o portfólio que comprei precisar de correção?

Caso haja alguma solicitação de correção/alteração por parte do tutor, basta entrar em contato conosco pelo WhatsApp que providênciaremos sem custo algum.

Qual o formato do arquivo?

Os arquivos são enviados em formato Word e são editáveis.

Caso eu tiver alguma dúvida, terei suporte no pós venda?

Sim, com certeza. Basta clicar no ícone do WhatsApp no cantinho da tela. Será um prazer atendê-lo(a).

Quais os seus canais de contato?

Whatsapp: 53 984751621 – Clicar no canto da tela ou ESCANEIE O QRCODE ABAIXO

projeto de extensão unopar

E-mail:portifoliosp@gmail.com

Portfólio em Word, respondido, completo e já nas normas

Main Menu