Laboratório de Programação VI
JSF – Java Server Faces
Introdução
Frameworks web baseados em componentes
Utilizam uma mistura das melhores características
de uma aplicação desktop e uma aplicação web
Opções de mercado:
JavaServer Faces (JSF) Struts2
Características do JSF
Permite criar aplicações Java para Web,
utilizando componentes visuais pré-prontos
O desenvolvedor não precisa se preocupar
tanto com HTML, CSS e Javascript
Guarda o estado dos componentes
mantém informações quando navega entre páginas
Separa as camadas
Características do JSF
Possui uma especificação JSF – 2 (JSR – 314) Possui várias implementações:
Oracle Mojarra (implementação de referência) →
http://javaserverfaces.java.net
Apache MyFaces → http://myfaces.apache.org, etc
Não há componentes sofisticados dentro da
especificação (somente o fundamental)
Características do JSF
Extensões do JSF com componentes mais
sofisticados:
PrimeFaces → http://www.primefaces.org RichFaces → richfaces.jboss.org
IceFaces → http://icefaces.org
Cada um possui seu Showcase (uma lista de
componentes disponíveis: inputs, painéis, botões, árvores, menus, gráficos e
Configuração do projeto
Será utilizado Mojarra com PrimeFaces Passos:
Criar um Projeto Java Web
Na criação do projeto, na opção "Configuration",
clicar no botão "Modify" e marcar o facet "JavaServer Faces"
Configurar o "JSF Capabilities"
Configuração do projeto
Verificar a configuração do servlet do JSF no
web.xml
Ajustar caso necessário:
<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>
Configurando o projeto
Antigamente, os parâmetros e regras de
navegação eram feitas no arquivo
faces-config.xml.
Criando uma página .jsf
No JSF, a abordagem é component based:
o model é chamado (e populado com dados) a
partir das chamadas dos componentes da view
As principais tags de componentes do JSF
estão nas bibliotecas:
core: componentes não visuais como tratadores de
eventos ou validadores;
html: contém os componentes necessários para
Criando uma página .jsf
Para usar as tags, é necessário importar as
bibliotecas no xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" >
<!-- conteúdo da página que usa as tags JSF -->
Criando uma página .jsf
Ao invés de usar tags HTML comuns, será
utilizado as tags do próprio JSP e JSF.
Isto faz com que o próprio JSF gerencie todo o
conteúdo (adicionando CSS e Javascript).
<html ...> <h:head>
<!-- conteúdo do cabeçalho--> </h:head>
<h:body>
<!-- conteúdo do corpo da página --> </h:body>
Criando uma página .jsf
Mostrando informações com o h:outputText Primeiro exemplo:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" > <h:head>
<title>Primeiro projeto JSF</title> </h:head>
<h:body>
Managed Beans
Um componente visual pode exibir ou enviar
informações para o model
Esta interação é feita executando um método
de uma classe Java (separado da view)
Essas classes são chamadas de Managed
Beans
Essas classes são POJO's anotados com
Managed Beans
Exemplo:
Para exibir o conteúdo de getHorário na
página, utiliza expression language, porém usando #:
@ManagedBean
public class HoraCertaBean { public String getHorario() { SimpleDateFormat sdf;
sdf = new SimpleDateFormat("hh:mm:ss");
return "Agora é: " + sdf.format(new Date()); }
Managed Beans
Esta é uma forma elegante de conectar a view
ao model
O código anterior diz que há uma classe
gerenciada, chamada HoraCertaBean, que possui o método getHorario
O retorno do método getHorario será exibido
Entrada de dados pelo usuário
Normalmente utiliza-se formulários
Para fazer a entrada de dados utiliza-se a tag
h:inputText
Ela faz a ligação entre o atributo do bean e o
campo da página
De maneira análoga, deve-se utilizar a taglib de
Entrada de dados pelo usuário
Exemplo: o seguinte código JSF mostra um
texto e uma caixa de texto:
O valor digitado na caixa de texto será enviado
para o atributo nome do objeto
horaCertaBean
É necessário criá-lo lá na classe (e set/get) Ainda está faltando o botão...
<h:outputText value="Digite seu nome: "/>
Botão X Formulário
Esta é uma diferença importante form normal:
Usa action e o submit do botão
Há dificuldades em existir 2 botões em um form
O JSF visa abstrair o HTTP, CSS e Javascript Assim, o form somente agrega os campos e
19
Botão X Formulário
Exemplo:
O clique no botão chama o setter do atributo
nome e chama o método gerarMensagem
Esta ordem é importante
<h:form>
<h:outputText for="nome" value="Digite seu nome:"/>
<h:inputText id="nome" value="#{horaCertaBean.nome}"/> <h:commandButton
value="Enviar"
Botão X Formulário
Para a página funcionar, deve-se criar o
método gerarMensagem na classe
HoraCertaBean, que monta a mensagem.
Os botões são atrelados aos métodos, que
realizam alguma lógica de negócio.
public String gerarMensagem() { mensagem = "Olá " + nome
+ ". Agora é: " + getHorario();
Botão X Formulário
Para exibir a resposta com a mensagem, basta
incluir o seguinte código na página:
Após a execução do botão, o JSF direcionará
para a própria página
mostraHorario.xhtml, porém agora
exibindo a mensagem montada.
<h:outputText for="mensagem"
Exercício
Implementar uma calculadora simples
utilizando o JSF com os seguintes itens:
um Managed Bean com as 4 operações (sem valor
de retorno) e um método que retorna uma string com o resultado
uma página de entraga de dados uma página de resultado
A página de resultado deve ter um link para a
Utilizando o PrimeFaces
A tag lib padrão do JSF possui um componente
de tabela, porém ela é simples e limitada
As tags do PrimeFaces possuem mais recursos Estas tags oferecem um visual mais atraente e
várias facilidades (estilo bonito, cabeçalhos nas colunas, paginação dos registros, etc.)
Copiar os jars para WebContent/WEB-INF/lib:
Utilizando o PrimeFaces
Configurar o web.xml
Incluir este fragmento antes da tag <servlet>:
Montando uma Tabela
Copiar as 2 classes para o projeto:
Montando uma Tabela
Criar uma classe AlunoBean
package br.edu.univas.lab6.controller;
@ManagedBean
public class AlunoBean {
private Collection<AlunoTO> alunos;
public String listarAlunos() {
alunos = new AlunoMemDAO().getAllAlunos(); return "listarAluno";
27
Montando uma Tabela
Criar uma página listarAluno.xhtml
Importar as bibliotecas do JSF (ver slide 10) Importar a biblioteca do PrimeFaces
xmlns:p="http://primefaces.org/ui" Atualizar o head e body
<h:head>
<title>Lista de Alunos</title> </h:head>
<h:body> ...
Montando uma Tabela
Agora sim a tabela. Utilizar a tag <p:dataTable>
Esta tag é similar à tag forEach do JSP
Ela itera na coleção de objetos, retornada pelo
método getAlunos da classe AlunoBean
<p:dataTable var="aluno" value="#{alunoBean.alunos}">
Montando uma Tabela
Para cada linha da tabela, é necessário utilizar
o aluno daquela iteração
Cada coluna é contruída pela tag p:column
Para mostrar o valor, use a tag h:outputText As tags do Primefaces se integram
perfeitamente com as tags básicas do JSF.
<p:column headerText="Nome">
Montando uma Tabela
Logo a tabela completa ficará assim:
<p:dataTable var="aluno"
value="#{alunoBean.alunos}">
<p:column headerText="Nome">
<h:outputText value="#{aluno.nome}"/> </p:column>
<p:column headerText="Nome">
<h:outputText value="#{aluno.matricula}"/> </p:column>
<p:column headerText="Nome">
<h:outputText value="#{aluno.email}"/> </p:column>
31
Chamando a tela com a tabela
Criar um arquivo index.xhtml com o seguinte
conteúdo:
Testar a aplicação.
Formatando a data
Utilizar a tag f:convertDateTime para formatar a
coluna com a data de nascimento
<p:column headerText="Nascimento">
<h:outputText value="#{aluno.nascimento}">
<f:convertDateTime pattern="dd/MM/yyyy" /> </h:outputText>
33
Exercício
Incluir no exemplo da aula os seguintes itens:
Limitar a quantidade de linhas e incluir paginação Uma tela para criar um novo registro
Usar a mesma tela anterior para editar um certo
registro, que é selecionado na tabela
Atualizar o managed beam adequadamente
Substituir o inputText da data de nascimento
pela tag <p:calendar>
Validar os campos de entrada com os validators da
Referências
https://javaserverfaces.java.net/ http://www.tutorialspoint.com/jsf/
http://www.dsc.ufcg.edu.br/~jacques/cursos/daca/ht
ml/jsf/jsf.htm
Fim
Referências:
https://javaserverfaces.java.net/ http://www.tutorialspoint.com/jsf/
http://www.dsc.ufcg.edu.br/~jacques/cursos/daca/ht
ml/jsf/jsf.htm
