Aula prática Programação Web II

Aula prática Programação Web II

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.

SOLUÇÃO DIGITAL:
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.

1. Acesse o site oficial: https://eclipseide.org/
2. Clique em Download:

3. Escolha a versão “Eclipse IDE for Enterprise Java and Web Developers” que compatível
com o sistema operacional do seu computador.

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

PROCEDIMENTOS PRÁTICOS E APLICAÇÕES
Procedimento/Atividade nº 1
CONSTRUINDO UM CONJUNTO DE CLASSES COM O MVC E JSF.

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.

Procedimentos para a realização da atividade:
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.