Introdução ao JSF e Primefaces

Prévia do material em texto

CAPÍTULO 7
Introdução ao JSF e Primefaces
"Eu não temo computadores, eu temo é a falta deles"
— Isaac Asimov
7.1 - INTERFACES GRÁFICAS PARA O USUÁRIO - GUI
Usuários se habituaram com aplicações Desktop durante muitos anos. Este tipo
de aplicação é instalada no computador local e acessa diretamente um banco de
dados ou gerenciador de arquivos. As tecnologias típicas para criar uma aplicação
Desktop são Delphi, VB (Visual Basic) ou, no mundo Java, Swing.
Para o desenvolvedor, a aplicação Desktop é construída com uma série de
componentes que a plataforma de desenvolvimento oferece para cada sistema
operacional. Esses componentes ricos e muitas vezes sofisticados estão
associados a eventos ou procedimentos que executam lógicas de negócio.
Problemas de validação de dados são indicados na própria tela sem que qualquer
informação do formulário seja perdida. De uma forma natural, esses componentes
lembram-se dos dados do usuário, inclusive entre telas e ações diferentes.
Nesse tipo de desenvolvimento são utilizados diversos componentes ricos,
como por exemplo, calendários, menus diversos ou componentes drag and drop
(arrastar e soltar). Eles ficam associados a eventos/ações e guardam
automaticamente seu estado, pois mantêm os valores digitados pelo usuário.
APOSTILA LAB. JAVA COM TESTES, JSF, WEB SERVICES E DESIGN PATTERNS
	
 
�
�
Esses componentes não estão, contudo, associados exclusivamente ao
desenvolvimento de aplicações Desktop. Podemos criar a mesma sensação
confortável para o cliente em uma aplicação web, também usando componentes
ricos e reaproveitáveis.
7.2 - O CLIENTE GORDO E O DESENVOLVIMENTO DESKTOP
Existem algumas desvantagens nessa abordagem, visto que cada usuário possui
uma cópia, muitas das vezes integral, dessa aplicação. Qualquer alteração
precisaria ser propagada para todas as outras máquinas. Estamos usando um
cliente gordo, com muita responsabilidade no lado do cliente.
Para piorar, as regras de negócio rodam no computador do usuário, sendo muito
difícil depurar a aplicação. Em geral, enfrentamos problemas de manutenção e
gerenciabilidade.
Você pode também fazer o curso FJ-22 dessa apostila na Caelum
Querendo aprender ainda mais sobre boas práticas de Java,
JSF, Web Services, testes e design patterns? Esclarecer
dúvidas dos exercícios? Ouvir explicações detalhadas com
um instrutor?
A Caelum oferece o curso FJ-22 presencial nas cidades de
São Paulo, Rio de Janeiro e Brasília, além de turmas incompany.
Consulte as vantagens do curso Lab. Java com Testes, JSF, Web Services e
Design Patterns.
7.3 - O DESENVOLVIMENTO WEB E O PROTOCOLO HTTP
Para resolver problemas como esse, surgiram as aplicações baseadas na web.
Nessa abordagem há um servidor central, onde a aplicação é executada e
processada, e todos os clientes podem acessá-la através do protocolo HTTP.
O usuário precisa basicamente instalar um navegador web, como Firefox ou
Internet Explorer, que receberá o HTML, o CSS e o JavaScript, que afinal são
tecnologias que ele entende.
Entre cada requisição (request), trafega o HTML do lado servidor (Server Side)
para o computador do cliente (Client Side). Em nenhum momento a aplicação está
salva no cliente. Todas as regras da aplicação estão sendo processadas no lado do
servidor. Por isso, essa abordagem também foi chamada de cliente magro.
Isso facilita bastante a manutenção e a gerenciabilidade, pois temos um lugar -
central -, onde a aplicação é executada, mas ainda é preciso conhecer bastante de
HTML, CSS e JavaScript para definir a interface com o usuário. Também não há
mais eventos, mas sim um modelo bem diferente orientado a requisição e
resposta. Além disso, ainda é preciso conhecer o protocolo HTTP. Assim, toda
essa responsabilidade fica a cargo do desenvolvedor.
Comparando as duas abordagens, podemos ver vantagens e desvantagens em
ambas. No lado da aplicação puramente Desktop, temos um estilo de
desenvolvimento orientado ao evento, usando componentes ricos, porém com
problemas de manutenção e gerenciamento. Do outro lado, as aplicações web são
mais fáceis de gerenciar e manter, mas precisamos lidar com HTML e conhecer o
protocolo HTTP, e seguir o modelo request-response (requisição-resposta).
7.4 - MESCLAR DESENVOLVIMENTO DESKTOP E WEB
O ideal seria mesclar os dois estilos, aproveitando as vantagens de cada um.
Seria um desenvolvimento Desktop para WEB, central e com componentes ricos,
seguindo as boas práticas de orientação de objetos mas sem problemas de
manutenção e gerenciabilidade. Isso é justamente a ideia dos frameworks web
baseados em componentes.
No mundo Java há algumas opções como JavaServer Faces (JSF), Apache
Wicket, Vaadin, Tapestry ou GWT da Google. Todos eles são frameworks web
baseados em componentes.
7.5 - ESPECIFICAÇÃO E IMPLEMENTAÇÃO DO JSF
JSF é uma tecnologia que nos permite criar aplicações Java para Web utilizando
componentes visuais, fazendo com que o desenvolvedor não se preocupe com
Javascript e HTML. Basta adicionarmos os componentes (calendários, tabelas,
formulários) que eles serão renderizados e exibidos em formato html.
Guarda o estado dos componentes
Além disso o estado dos componentes é sempre guardado automaticamente (como
veremos mais a frente), fazendo o papel de Stateful. Isso nos permite, por
exemplo, criar wizards e navegar nos vários passos dessa wizard com o estado das
telas sendo mantidos, sem ter que resgatá-los novamente.
Separa as camadas
Outra característica marcante na arquitetura do JSF é a separação que fazemos
entre as camadas de apresentação e de aplicação. Pensando no modelo MVC, o JSF
possui uma camada de visualização que, por padrão, se baseia nos Facelets e um
conjunto de classes conhecidas como Managed Beans; ambos veremos com mais
detalhes.
É uma especificação Java EE
Analisando um pouco melhor o JSF, percebemos que ele é na verdade um padrão ou
especificação que faz parte do Java Enterprise Edition (Java EE). Por ser uma
especificação, ou Java Specification Request (JSR), ele é mantido dentro do Java
Community Process (JCP).
O JSF 2 foi lançado em Julho de 2009 através da JSR 314. No lançamento do Java
EE 6 em Dezembro de 2009, passou a ser oficial na plataforma Java EE. A
especificação do JSF pode ser acessada no site da JCP: http://jcp.org/en/jsr/detail?
id=314 
Nesse site é mostrado a versão 2.0 do JSF e todos os documentos disponíveis
para os interessados na implementação dessa especificação JSF.
Várias implementações
Baseado nesta especificação, há várias implementações. A mais famosa, e também
implementação referencial (RI), é a Oracle Mojarra disponível em
http://javaserverfaces.java.net/ , aquela que mostra como o JSF deveria se
comportar. Outra implementação famosa é da Apache Software Foundation, e se
chama MyFaces (http://myfaces.apache.org/ ).
Neste treinamento usaremos a implementação referencial Mojarra. Acessando o
site http://javaserverfaces.java.net , na parte de downloads, podemos encontrar o
JAR do Mojarra.
Tire suas dúvidas no novo GUJ Respostas
O GUJ é um dos principais fóruns brasileiros de computação
e o maior em português sobre Java. A nova versão do GUJ é
baseada em uma ferramenta de perguntas e respostas (QA) e
tem uma comunidade muito forte. São mais de 150 mil
usuários pra ajudar você a esclarecer suas dúvidas.
Faça sua pergunta.
 
7.6 - INTRODUÇÃO AO JSF COM MOJARRA E PRIMEFACES
Como dito antes, nosso projeto utilizará a implementação Mojarra do JSF. Ela já
define o modelo de desenvolvimento e oferece alguns componentes bem básicos.
Nada além de inputs, botões e ComboBox simples. Não há componentes
sofisticados dentro da especificação. Isto é proposital, pois o mundo web evoluirápido (principalmente na questão das interfaces gráficas).
Os componentes da especificação JSF são bem simples:
Para atender a demanda dos desenvolvedores por componentes mais
sofisticados, existem várias extensões do JSF que seguem o mesmo ciclo e modelo
da especificação. Exemplos dessas bibliotecas são: PrimeFaces, RichFaces ou
IceFaces. Todas elas definem componentes JSF, mas muito além da especificação.
Cada biblioteca oferece ShowCases na web para mostrar seus componentes e
suas funcionalidades. O showcase do PrimeFaces está disponível em
http://www.primefaces.org .
Podemos ver na demo online uma lista de componentes disponíveis entre eles
inputs, paneis e botões diversos, menus e charts e componentes drag & drop,
muito além da especificações, porém mantendo a facilidade de uso:
Para a definição da interface do projeto Argentum usaremos Oracle Mojarra
com PrimeFaces, uma combinação muito comum no mercado.
7.7 - PREPARAÇÃO DO AMBIENTE
Nossa aplicação Argentum precisa de uma interface web. Para isso vamos
preparar uma aplicação web comum que roda dentro de um Servlet Container.
Tomcat como Servlet Container
Usaremos Apache Tomcat 7, no entanto, poderia ser utilizado qualquer outro
servlet container como por exemplo Jetty.
Configuração do controlador do JSF
JSF segue o padrão arquitetural MVC (Model-View-Controller) por isso precisamos
configurar o servlet do JSF no web.xml da aplicação que representa o controller (C)
dentro do modelo MVC. Esse Servlet é responsável em receber as requisições e
delegá-las ao core do JSF. Para configurá-lo basta adicionar as seguintes
configurações no web.xml:
Ao usar o Eclipse com suporte a JSF 2 essa configuração no web.xml já é feita
automaticamente.
Faces-config: o arquivo de configuração do mundo JSF
Além disso, há um segundo XML que é o arquivo de configuração relacionado com o
mundo JSF, o faces-config.xml.
Como o JSF na versão dois encoraja o uso de anotações invés de configurações
no XML, este arquivo torna-se pouco usado, sendo muito mais importante na
primeira versão do JSF. Para este treinamento não usaremos o arquivo, ficando
então vazio:
Agora já temos as informações necessárias para criar nosso primeiro projeto
utilizando JSF.
7.8 - EXERCÍCIOS: INSTALANDO O TOMCAT E CRIANDO O PROJETO
1. Primeiramente, precisamos instalar o Tomcat. Usaremos a versão 7.x:
a. Vá no Desktop e entre na pasta Caelum e em seguida na pasta 22.
b. Descompacte o arquivo apache-tomcat-7.x.x.zip no seu Desktop. Para isso dê um
duplo clique no arquivo para abrir o Archive Manager e clique em Extract.
<servlet>
 <servlet-name>FacesServlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
 <servlet-name>FacesServlet</servlet-name>
 <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<faces-config
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
 version="2.0">
</faces-config>
c. Na janela que abriu, selecione no lado esquerdo o item Desktop e clique em
Extract.
d. O Tomcat já está pronto para o uso.
2. O próximo passo é configurar o Tomcat no Eclipse, para que possamos
controlá-lo mais facilmente.
a. Abra o Eclipse, e ao ser perguntado sobre o caminho da sua workspace apenas
confirme.
b. Dentro do Eclipse, abra a aba Servers. Para isso, pressione CTRL + 3, digite
servers e pressione [ENTER]. Ela será aberta na parte inferior do seu Eclipse.
c. Dentro da aba Servers clique com o botão direito do mouse e escolha New ->
Server.
d. Dentro da Janela New Server escolha Apache Tomcat v7.0 Server e clique em
Next.
e. O próximo passo é dizermos ao Eclipse em qual diretório instalamos o
Tomcat. Clique no botão Browse... e escolha a pasta na qual você descompactou o
Tomcat.
f. Clique em Finish.
3. O próximo passo para podermos começar a trabalhar é criar o nosso projeto no
Eclipse.
a. Dentro do Eclipse, vá ao menu File -> New -> Dynamic Web Project
b. Em Project name coloque fj22-argentum-web.
c. Na seção Configuration clique em Modify para acrescentarmos suporte ao JSF.
d. Na tela que abre, marque o checkbox com JavaServer Faces e versão 2.0,
depois clique OK:
e. De volta à tela de criação do projeto, clique em Next três vezes até chegar à
tela de configuração do JSF. Nessa tela, escolha a opção Disable Library
Configuration (isso indica para o Eclipse que nós mesmos copiaremos os JARs
do JSF). Ainda nessa tela, na parte URL Mapping Patterns, remova o
mapeamento /faces/*, se existir, e adicione um novo mapeamento como
*.xhtml
f. Clique em Finish e o projeto está criado.
g. Agora, vamos adicionar o projeto ao servidor Tomcat. Na aba Servers, clique
com o botão direito sobre o nome do servidor e escolha a opção Add and
Remove...:
h. Na tela seguinte, selecione o projeto fj22-argentum-web no box Available (da
esquerda), pressione o botão Add > (moverá para o box Configured da direita) e
depois Finish.
i. Agora precisamos importar o projeto anterior, classes como Negociacao ou
Candlestick. Já o temos pronto na pasta Desktop/caelum/22/, com o nome de modelo-
argentum.zip, copie-o para o seu Desktop.Para importá-lo, dê um clique com o
botão direito sobre o nosso projeto atual, e em seguida, Import > Import.... E
selecione Archive File.
j. Em Browse..., selecione o nosso arquivo modelo-argentum.zip e finalize-o.
k. Agora precisamos remover o src do Build Path. Então, dê um clique com o
direito sobre o diretório src e vá até Build path > Configure Build Path. Feito isto,
clicaremos na aba Source, selecione fj22-argentum-web/src, e após isto,
remova-o, clicando no botão Remove.
l. Precisamos adicionar nossos diretórios src/main/java e src/test/java no
projeto. Para isto, dê um clique em Add Folder..., e marque as devidas caixas,
assim como na imagem abaixo:
Dê OK, e depois OK novamente.
m. Nossas classes de teste (src/test/java) apresentam problemas, e eles estão
relacionados ao JUnit, pois o mesmo não foi adicionado ao Build Path. Abra a
classe ClandlestickFactoryTest, do pacote br.com.caelum.argentum.modelo
e sobre a anotação @Test, dê um simples CTRL + 1 e faça como na imagem
abaixo, salvando as alterações.
Nova editora Casa do Código com livros de uma forma diferente
Editoras tradicionais pouco ligam para ebooks e novas
tecnologias. Não conhecem programação para revisar os
livros tecnicamente a fundo. Não têm anos de experiência em
didáticas com cursos.
Conheça a Casa do Código, uma editora diferente, com
curadoria da Caelum e obsessão por livros de qualidade a preços justos.
Casa do Código, ebook com preço de ebook.
 
7.9 - A PRIMEIRA PÁGINA COM JSF 2
As nossas páginas estarão em arquivos com a extensão .xhtml. Dessa forma,
criaremos um arquivo chamado index.xhtml.
As tag libraries core e html
Os componentes do JSF são usados através de tags novas na nossa tela. O JSF já
define dois conjuntos principais de tags (tag library) que vamos utilizar, a core e a
html.
A html possui os componentes necessários para montarmos a nossa tela
gerando o HTML adequado. Enquanto a core possui diversos componentes não
visuais, como por exemplo, tratadores de eventos ou validadores.
Importando as tags em nossa página
Para importar todas essas tags, no nosso arquivo .xhtml, basta declararmos como
namespace XML do nosso arquivo. Dessa forma, teremos:
Utilizando a implementação Mojarra
O JSF é uma especificação e como foi dito utilizaremos a implementação do Projeto
Mojarra. Para isto,copiaremos o JAR do Mojarra (javax.faces-2.x.x.jar) da pasta
Desktop/caelum/22/jsf-jars para a pasta WebContent/WEB-INF/lib. Assim os taglibs do
namespace serão encontrados.
O JAR do Mojarra também está disponível em http://javaserverfaces.java.net/ .
Definindo a interface da aplicação
Vamos começar a definir a interface para a aplicação fj22-argentum-web e criar nossa
primeira tela utilizando o JSF. Colocaremos uma mensagem de boas vindas para o
usuário.
Como todo arquivo HTML, tudo o que será renderizado no navegador deve ficar
dentro de uma Tag body. Utilizaremos a Tag h:head para definirmos o cabeçalho da
página contendo o título dela e também a Tag h:body na qual colocaremos o
conteúdo da nossa página.
Primeiro componente, o h:outputText
Utilizaremos nosso primeiro componente, o h:outputText. É através do seu atributo
value que definimos o texto que será apresentado na página.
Juntando tudo, nosso primeiro exemplo é uma tela simples com um campo de
texto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core" 
 xmlns:h="http://java.sun.com/jsf/html">
 <!-- aqui usaremos as tags do JSF -->
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
7.10 - EXERCÍCIOS: OS PRIMEIROS COMPONENTES JSF
1. Ao importamos nosso projeto fj22-argentum-web, já temos na pasta
WebContent/WEB-INF/lib os JARs do JSF (javax.faces-2.x.x.jar) e do
Primefaces (primefaces-3.x.jar).
Caso esteja seguindo esses passos em casa, é possível fazer o download dos JARs
do JSF e do primefaces nos sites oficiais dos projetos:
https://javaserverfaces.dev.java.net/ e http://primefaces.org 
2. Em WebContent, crie um arquivo chamado index.xhtml através do menu File -
> New -> Other -> HTML. Após definir o nome do arquivo clique em Next e você
verá a seguinte tela:
Selecione a mesma opção da imagem acima e pressione Finish.
 xmlns:f="http://java.sun.com/jsf/core" 
 xmlns:h="http://java.sun.com/jsf/html">
 <h:head>
 <title>Argentum Web</title>
 </h:head>
 <h:body>
 <h:outputText value ="Olá JSF!" />
 </h:body>
</html>
Implemente nosso primeiro código JSF com apenas uma saída de texto:
3. Inicie o Tomcat e acesse a URL: http://localhost:8080/fj22-argentum-
web/index.xhtml 
4. Verifique o código fonte gerado pela página. Repare que ele não é nada mais que
simples HTML. Para isso, nos navegadores Firefox ou Chrome pressione CTRL + U.
Repare no uso das tags <h:head>, <h:body> e <h:outputText>. Elas gerarão o
código HTML necessário para o exemplo funcionar.
7.11 - LISTAGEM DE NEGOCIAÇÕES COM PRIMEFACES
Pretendemos usar Primefaces para a definição da interface web devido aos
componentes muitos mais sofisticados e funcionais. Para usar os componentes
devemos copiar o JAR do Primefaces primefaces-3.X.jar da pasta
Desktop/Caelum/22/jsf-jar para a pasta WebContent/WEB-INF/lib e declarar o
namespace do mesmo no arquivo XHTML. Repare o novo namespace
xmlns:p="http://primefaces.org/ui :
O JAR do Primefaces também está disponível em http://primefaces.org .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core" 
 xmlns:h="http://java.sun.com/jsf/html">
 <h:head>
 <title>Argentum Web</title>
 </h:head>
 <h:body>
 <h:outputText value ="Olá JSF!" />
 </h:body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui">
 ...
</html>
Com isso já podemos usufruir os componentes ricos do Primefaces, por
exemplo, usando um simples painel (p:panel) na página:
Já conhece os cursos online Alura?
A Alura oferece dezenas de cursos online em sua
plataforma exclusiva de ensino que favorece o
aprendizado com a qualidade reconhecida da Caelum.
Você pode escolher um curso nas áreas de Java, Ruby,
Web, Mobile, .NET e outros, ou fazer a assinatura
semestral que dá acesso a todos os cursos.
Conheça os cursos online da Caelum.
 
7.12 - CÓDIGO ATRÁS DA TELA - MANAGED BEANS
Nosso objetivo é listar as negociações do Web Service na tela. O componente que
usaremos para a listagem se chama p:dataTable. O p:dataTable recebe uma lista
pelo atributo value. Nesse atributo devemos usar a Expression Language (EL) que
define a classe e o método que fornece a lista de negociações. Diferentemente da EL
do JSP, a EL do JSF começa com #{expression} (tralha):
Essas classes ligadas à tela se chamam Managed Beans. São classes simples (ou
POJOs) que devem utilizar uma anotação com o mesmo nome: @ManagedBean. Na
<html ...>
 <h:head>
 <title>Argentum Web</title>
 </h:head>
 
 <h:body>
 <p:panel header="Negociações" footer="Argentum Web"> 
 <h:outputText value="Olá JSF!" />
 </p:panel>
 </h:body>
</html>
<p:dataTable value="#{nomeDaClasse.nomeDoMetodoQueDevolveALista}" >
</p:dataTable>
nossa aplicação vamos criar um Managed Bean com nome ArgentumBean:
Agora falta implementar um getter que devolva uma lista de negociações. Nesse
método vamos usar a classe ClienteWebService que chama Web Service:
Isso já basta para chamar o método na página pelo componente p:dataTable.
Repare que usaremos a Expression Language seguindo a nomenclatura Java Beans,
ou seja o método não usa o prefixo get:
O JSF chama o método getNegociacoes várias vezes durante uma requisição.
Como é custoso chamar o Web Service, vamos garantir que ele será inicializado
apenas quando o Managed Bean for criado. O JSF prevê para isso um método
especial que deve ser anotado com a anotação @PostConstruct. Esse método é
chamado apenas uma vez, na criação da classe ArgentumBean. Como o bean é
instanciado em cada requisição (Request Scope), o método é chamado uma vez por
request:
Caso queiramos colocar a Managed Bean na sessão Http basta usar a anotação
@SessionScoped em cima da classe:
@ManagedBean
public class ArgentumBean {
}
@ManagedBean
public class ArgentumBean {
 public List<Negociacao> getNegociacoes() {
 ClienteWebService cliente = new ClienteWebService();
 return cliente.getNegociacoes();
 }
}
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}">
</p:dataTable>
@ManagedBean
public class ArgentumBean {
 
 private List<Negociacao> negociacoes;
 @PostConstruct
 public void preparaDados() { 
 ClienteWebService cliente = new ClienteWebService();
 this.negociacoes = cliente.getNegociacoes();
 }
 public List<Negociacao> getNegociacoes() {
 return this.negociacoes;
 }
}
Com a classe ArgentumBean criado vamos completar a tabela na página. O
próximo passo é definir uma variável que representa uma negociação:
Com essa negociação em mãos podemos declarar o quê queremos apresentar em
cada coluna. A tag p:column define o cabeçalho e recebe o conteúdo da coluna.
Repare que imprimimos o preço, volume e a data da negociação corrente em cada
coluna:
POJO (Plain Old Java Object)
POJO é um termo criado por Martin Fowler, Rebecca Parsons e Josh
MacKenzie que serve para definir um objeto simples. Segundo eles, o termo
foi criado pois ninguém usaria objetos simples nos seus projetos pois não
existia um nomeextravagante para ele.
7.13 - FORMATAÇÃO DE DATA COM JSF
A tabela já é funcional, mas com a data mal formatada. O componente não sabe
@ManagedBean
@SessionScoped
public class ArgentumBean {
 
 //código omitido
}
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}" >
</p:dataTable>
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}">
 <p:column headerText="Preço" >
 <h:outputText value="#{negociacao.preco}" />
 </p:column>
 <p:column headerText="Quantidade">
 <h:outputText value="#{negociacao.quantidade}" />
 </p:column>
 <p:column headerText="Volume">
 <h:outputText value="#{negociacao.volume}" />
 </p:column>
 <p:column headerText="Data">
 <h:outputText value="#{negociacao.data}" />
 </p:column>
 
</p:dataTable>
como gostaríamos de formatar a data e chama por de baixo dos planos o método
toString da data para receber uma apresentação como String.
Podemos facilmente mudar este comportamento usando o componente
f:convertDateTime que define um pattern para a data. É importante saber que o
f:convertDateTime só aceita objetos do tipo java.util.Date, por isso
chamaremos o método getTime da data. Mais uma vez podemos omitir a palavra
"get" com expression language. Segue a tabela completa:
7.14 - PAGINAÇÃO E ORDENAÇÃO DAS NEGOCIAÇÕES
O componente p:dataTable não só sabe listar os negociações, ele já vem com
várias outras funções prontas e fáceis de usar. Primeiramente vamos habilitar a
paginação automática usando o atributo paginator="true" e definir a quantidade
de linhas por página pelo atributo rows. Veja a definição da tabela:
Além disso, vamos deixar as colunas ordenáveis através do simples atributo
sortBy. Para a ordenação funcionar é preciso colocar a tabela dentro de um
formulário (h:form). Veremos mais para frente como os formulários funcionam
com mais detalhe:
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}">
 <p:column headerText="Preço" >
 <h:outputText value="#{negociacao.preco}" />
 </p:column>
 <p:column headerText="Quantidade">
 <h:outputText value="#{negociacao.quantidade}" />
 </p:column>
 <p:column headerText="Volume">
 <h:outputText value="#{negociacao.volume}" />
 </p:column>
 <p:column headerText="Data">
 <h:outputText value="#{negociacao.data.time}" >
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputText>
 </p:column>
 
</p:dataTable>
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}" 
 paginator="true" rows="15">
 <!-- colunas omitidas -->
</p:dataTable>
<h:form id="listaNegociacao">
Usando todas as colunas do nosso modelo Negociacao temos um resultado mais
atraente:
Isso são apenas algumas das muitas funcionalidades que o p:dataTable oferece.
Vale a pena verificar o showcase e documentação no site do Primefaces.
Você não está nessa página a toa
Você chegou aqui porque a Caelum é referência nacional em
cursos de Java, Ruby, Agile, Mobile, Web e .NET.
Faça curso com quem escreveu essa apostila.
Consulte as vantagens do curso Lab. Java com Testes, JSF,
Web Services e Design Patterns.
7.15 - EXERCÍCIOS: P:DATATABLE PARA LISTAR AS NEGOCIAÇÕES DO WEB
 <p:dataTable var="negociacao" value="#{argentumBean.negociacoes}" 
 paginator="true" rows="15">
 <p:column sortBy="#{negociacao.preco}" headerText="Preço" >
 <h:outputText value="#{negociacao.preco}" />
 </p:column>
 <!-- outras colunas omitidas -->
 </p:dataTable>
<h:form>
SERVICE
1. Como já termos os JARs necessários adicionados ao projeto, para usar os
componentes do Primefaces, devemos declarar o namespace do mesmo no arquivo
index.xhtml. Acrescente o namespace xmlns:p="http://primefaces.org/ui ":
2. Agora, o próximo passo é preparar o Managed Bean. Ainda no projeto fj22-
argentum-web, pasta src/main/java, crie uma nova classe ArgentumBean dentro
da pacote br.com.caelum.argentum.bean. Use a anotação @ManagedBean e
@SessionScoped em cima da classe:
3. Na classe ArgentumBean crie um método preparaDados. Nele chamaremos o
Web Service para inicializar a lista de negociações. Para garantir que o JSF chame o
método na criação do bean usaremos a anotação @PostConstruct:
4. Falta gerar um getter para o atributo negociacoes. Na classe digite getN e
aperte Ctrl+Espaço para usar o auto-complete do Eclipse:
5. Abra novamente a página index.xhtml que se encontra na pasta WebContent.
Dentro da tag <h:body>, coloque o componente <p:panel> e remova o
componente <h:outputText> do exercício anterior:
6. Ainda na página index.xhtml, adicione o formulário com a tabela dentro do
componente p:panel:
package br.com.caelum.argentum.bean;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class ArgentumBean {
 
}
private List<Negociacao> negociacoes;
 
@PostConstruct
public void preparaDados() {
 ClienteWebService cliente = new ClienteWebService();
 this.negociacoes = cliente.getNegociacoes();
}
public List<Negociacao> getNegociacoes() {
 return negociacoes;
}
<h:body>
 <p:panel header="Negociações" footer="Argentum Web">
 
 </p:panel>
</h:body>
7. Dentro do componente p:dataTable adicione as três primeiras colunas :
8. Reinicie o Tomcat e acesse em seu navegador o endereço
http://localhost:8080/fj22-argentum-web/index.xhtml . O resultado deve
ser algo parecido com:
9. Vamos colocar paginação na tabela. Adicione os atributos paginator="true" e
rows="15". A definição da tabela fica como (a primeira parte já existe, adicione
somente os últimos dois atributos):
Salve a página e acesse no seu navegador o endereço
http://localhost:8080/fj22-argentum-web/index.xhtml .
<h:form id="listaNegociacao">
 <p:dataTable var="negociacao" value="#{argentumBean.negociacoes}">
 <!-- aqui vamos definir as colunas -->
 </p:dataTable>
</h:form>
<p:column headerText="Preço" >
 <h:outputText value="#{negociacao.preco}" />
</p:column>
 
<p:column headerText="Quantidade">
 <h:outputText value="#{negociacao.quantidade}" />
</p:column>
<p:column headerText="Volume">
 <h:outputText value="#{negociacao.volume}" />
</p:column>
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}" 
 paginator="true" rows="15">
10. (opcional) Deixe as colunas ordenáveis, use o atributo sortBy em cada atributo,
Por exemplo, para a coluna que mostra o preço da negociação:
Repare que usamos dentro do sortByexpression language (#{negociacao.preco})
para definir o valor a ordenar.
Salve a página e acesse novamente em seu navegador:
http://localhost:8080/fj22-argentum-web/index.xhtml 
11. (opcional) Adicione mais uma coluna para a data da negociação. Para formatar a
data usaremos um novo componente f:convertDateTime que recebe um pattern.
<p:column sortBy="#{negociacao.preco}" headerText="Preço" >
 <h:outputText value="#{negociacao.preco}" />
</p:column>
<p:column sortBy="#{negociacao.data}" headerText="Data">
 <h:outputText value="#{negociacao.data.time}" >
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputText>
</p:column>
CAPÍTULO ANTERIOR:
7.16 - O PADRÃO MODEL VIEW CONTROLLER
Generalizando o modelo acima, podemos dar nomes a cada uma das partes dessa
nossa arquitetura. Quem é responsável por apresentar os resultados na página web
é chamado de Apresentação (View).
O responsável em ligar a View com o modelo, neste caso o ManagedBean, atua
como um Controlador (Controller).
As classes que representam suas entidades e as que te ajudam a armazenar e
buscar os dados são chamadas de Modelo (Model).
Esses três formam um padrão arquiteturalchamado de MVC, ou Model View
Controller. Ele pode sofrer variações de diversas maneiras. O que o MVC garante é
a separação de tarefas, facilitando assim a reescrita de alguma parte, e a
manutenção do código.
A figura abaixo ilustrar o modelo MVC.
Acessando um Web Service
PRÓXIMO CAPÍTULO:
Refatoração: os Indicadores da bolsa
Você encontra a Caelum também em:
Blog Caelum
 
Cursos Online
 
Facebook
 
Newsletter
Casa do
Código
 
Twitter