Introdução Ao JSF e Primefaces - Lab

24/08/2017 Introduo ao JSF e Primefaces - Lab.
Java com Testes, JSF e Design Patterns

APOSTILA LAB. JAVA COM TESTES, JSF E DESIGN PATTERNS
CAPTULO 7
Introduo ao JSF e Primefaces

"Eu no temo computadores, eu temo a falta deles"
Isaac Asimov
Durante muitos anos, os usurios se habituaram com aplicaes Desktop. Este

tipo de aplicao instalada no computador local e acessa diretamente um banco
de dados ou gerenciador de arquivos. As tecnologias tpicas para criar uma
aplicao Desktop so Delphi, VB (Visual Basic) ou, no mundo Java, Swing.
Para o desenvolvedor, a aplicao Desktop construda com uma srie de

componentes que a plataforma de desenvolvimento oferece para cada sistema
operacional. Esses componentes ricos e muitas vezes sofisticados esto
associados a eventos ou procedimentos que executam lgicas de negcio.
Problemas de validao de dados so indicados na prpria tela sem que

qualquer informao do formulrio seja perdida. De uma forma natural, esses
componentes lembram-se dos dados do usurio, inclusive entre telas e aes
diferentes.
Nesse tipo de desenvolvimento so utilizados diversos componentes ricos,

como por exemplo, calendrios, menus diversos ou componentes drag and drop
(arrastar e soltar). Eles ficam associados a eventos, ou aes, e guardam
automaticamente seu estado, j que mantm os valores digitados pelo usurio.
https://www.caelum.com.br/apostila-java-testes-jsf-web-services-design-patterns/introducao-ao-jsf-e-primefaces/#7-12-exercicio-opcional-adicio 1/50
24/08/2017 Introduo ao JSF e Primefaces - Lab. Java com Testes, JSF e Design Patterns
Esses componentes no esto, contudo, associados exclusivamente ao

desenvolvimento de aplicaes Desktop. Podemos criar a mesma sensao
confortvel para o cliente em uma aplicao web, tambm usando componentes
ricos e reaproveitveis.
7.1 - DESENVOLVIMENTO DESKTOP OU WEB?
Existem algumas desvantagens no desenvolvimento desktop. Como cada

usurio tem uma cpia integral da aplicao, qualquer alterao precisaria ser
propagada para todas as outras mquinas. Estamos usando um cliente gordo, isto
, com muita responsabilidade no lado do cliente.
Note que, aqui, estamos chamando de cliente a aplicao que est rodando na
mquina do usurio.
Para piorar, as regras de negcio rodam no computador do usurio. Isso faz com
que seja muito mais difcil depurar a aplicao, j que no costumamos ter acesso
to fcil maquina onde a aplicao est instalada. Em geral, enfrentamos
problemas de manuteno e gerenciabilidade.
O desenvolvimento Web e o protocolo HTTP
Para resolver problemas como esse, surgiram as aplicaes baseadas na web.

Nessa abordagem h um servidor central onde a aplicao executada e
processada e todos os usurios podem acess-la atravs de um cliente simples e
do protocolo HTTP.
Um navegador web, como Firefox ou Chrome, que far o papel da aplicao

cliente, interpretando HTML, CSS e JavaScript -- que so as tecnologias que ele
entende.
Enquanto o usurio usa o sistema, o navegador envia requisies (requests)

para o lado do servidor (server side), que responde para o computador do cliente
(client side). Em nenhum momento a aplicao est salva no cliente: todas as
regras da aplicao esto no lado do servidor. Por isso, essa abordagem tambm
foi chamada de cliente magro (thin client).
Isso facilita bastante a manuteno e a gerenciabilidade, pois temos um lugar

central e acessvel onde a aplicao executada. Contudo, note que ser preciso
conhecer HTML, CSS e JavaScript, para fazer a interface com o usurio, e o
protocolo HTTP para entender a comunicao pela web. E, mais importante ainda,
no h mais eventos, mas sim um modelo bem diferente orientado a requisies
e respostas. Toda essa base precisar ser conhecida pelo desenvolvedor.
Comparando as duas abordagens, podemos ver vantagens e desvantagens em

ambas. No lado da aplicao puramente Desktop, temos um estilo de
desenvolvimento orientado a eventos, usando componentes ricos, porm com
problemas de manuteno e gerenciamento. Do outro lado, as aplicaes web so
mais fceis de gerenciar e manter, mas precisamos lidar com HTML, conhecer o
protocolo HTTP e seguir o modelo requisio/resposta.
Mesclando desenvolvimento Desktop e Web
Em vez de desenvolver puramente para desktop, uma tendncia mesclar os

dois estilos, aproveitando as vantagens de cada um. Seria um desenvolvimento
Desktop para a web, tanto central quanto com componentes ricos, aproveitando o
melhor dos dois mundos e abstraindo o protocolo de comunicao. Essa
justamente a ideia dos frameworks web baseados em componentes.
No mundo Java h algumas opes como JavaServer Faces (JSF), Apache

Wicket, Vaadin, Tapestry ou GWT da Google. Todos eles so frameworks web
baseados em componentes.
7.2 - CARACTERSTICAS DO JSF
JSF uma tecnologia que nos permite criar aplicaes Java para Web utilizando
componentes visuais pr-prontos, de forma que o desenvolvedor no se preocupe
com Javascript e HTML. Basta adicionarmos os componentes (calendrios,
tabelas, formulrios) e eles sero renderizados e exibidos em formato html.
Guarda o estado dos componentes
Alm disso o estado dos componentes sempre guardado automaticamente

(como veremos mais frente), criando a caracterstica Stateful. Isso nos permite,
por exemplo, criar formulrios de vrias pginas e navegar nos vrios passos dele
com o estado das telas sendo mantidos.
Separa as camadas
Outra caracterstica marcante na arquitetura do JSF a separao que fazemos

entre as camadas de apresentao e de aplicao. Pensando no modelo MVC, o JSF
possui uma camada de visualizao bem separada do conjunto de classes de
modelo.
Especificao: vrias implementaes
O JSF ainda tem a vantagem de ser uma especificao do Java EE, isto , todo
servidor de aplicaes Java tem que vir com uma implementao dela e h
diversas outras disponveis.
A implementao mais famosa do JSF e tambm a implementao de

referncia, a Oracle Mojarra disponvel em http://javaserverfaces.java.net/.
Outra implementao famosa a MyFaces da Apache Software Foundation em
http://myfaces.apache.org/.
Primeiros passos com JSF
Nosso projeto utilizar a implementao Mojarra do JSF. Ela j define o modelo

de desenvolvimento e oferece alguns componentes bem bsicos. Nada alm de
inputs, botes e ComboBoxes simples.
No h componentes sofisticados dentro da especificao e isso proposital:

uma especificao tem que ser estvel e as possibilidades das interfaces com o
usurio crescem muito rapidamente. A especificao trata do que fundamental,
mas outros projetos suprem o que falta.
Para atender a demanda dos desenvolvedores por componentes mais

sofisticados, h vrias extenses do JSF que seguem o mesmo ciclo e modelo da
especificao. Exemplos dessas bibliotecas so PrimeFaces, RichFaces e IceFaces.
Todas elas definem componentes JSF que vo muito alm da especificao.
Cada biblioteca oferece ShowCases na web para mostrar seus componentes e

suas funcionalidades. Voc pode ver o showcase do PrimeFaces no endereo
http://www.primefaces.org.
Na sua demo online, podemos ver uma lista de componentes disponveis, como
inputs, painis, botes diversos, menus, grficos e componentes drag & drop, que
vo muito alm das especificaes, ainda mantendo a facilidade de uso:
Para a definio da interface do projeto Argentum usaremos Oracle Mojarra

com PrimeFaces, uma combinao muito comum no mercado.
Preparao do ambiente
Nossa aplicao Argentum precisa de uma interface web. Para isso vamos
preparar uma aplicao web comum que roda dentro de um Servlet Container.
Qualquer implementao de servlet container seria vlida e, no curso, usaremos o
Apache Tomcat 7. Uma outra boa opo seria o Jetty.
Configurao do controlador do JSF
O JSF segue o padro arquitetural MVC (Model-View-Controller) e faz o papel

do Controller da aplicao. Para comear a us-lo, preciso configurar a servlet do
JSF no web.xml da aplicao. Esse Servlet responsvel por receber as requisies
e deleg-las ao JSF. Para configur-lo basta adicionar as seguintes configuraes
no web.xml:
<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>
Ao usar o Eclipse com suporte a JSF 2 essa configurao no web.xml j feita

automaticamente durante a criao de um projeto.
Faces-config: o arquivo de configurao do mundo JSF
Alm disso, h um segundo XML que o arquivo de configurao relacionado com

o mundo JSF, o faces-config.xml.
Como o JSF na verso dois encoraja o uso de anotaes em vez de configuraes

no XML, este arquivo torna-se pouco usado. Ele era muito mais importante na
primeira verso do JSF. Neste treinamento, deixaremos ele vazio:
<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>
Agora j temos as informaes necessrias para criar nosso primeiro projeto

utilizando JSF.
Seus livros de tecnologia parecem do sculo passado?
Conhea a Casa do Cdigo, uma nova editora, com autores de

destaque no mercado, foco em ebooks (PDF, epub, mobi),
preos imbatveis e assuntos atuais.
Com a curadoria da Caelum e excelentes autores, uma

abordagem diferente para livros de tecnologia no Brasil.
Conhea os ttulos e a nova proposta, voc vai gostar.
Casa do Cdigo, livros para o programador.
7.3 - EXERCCIOS: INSTALANDO O TOMCAT E CRIANDO O PROJETO
1. Primeiramente, precisamos instalar o Tomcat. Usaremos a verso 7.x:
a. V no Desktop e entre na pasta Caelum e em seguida na pasta 22.
b. Copie o arquivo zip do TomCat e cole ele na sua pasta Home.
c. Clique com o boto direito e escolha Extract here.
https://www.caelum.com.br/apostila-java-testes-jsf-web-services-design-patterns/introducao-ao-jsf-e-primefaces/#7-12-exercicio-opcional-adici 10/50
d. O Tomcat j est pronto para o uso!
2. O prximo passo criar o nosso projeto no Eclipse.
a. Crie um novo projeto web usando o ctrl + 3 Dynamic Web Project.
b. Em Project name coloque fj22-argentum-web.
c. Na seo Configuration clique em Modify para acrescentarmos suporte ao JSF.
d. Na tela que abre, marque o checkbox com JavaServer Faces 2.0 e clique d ok:
e. De volta tela de criao do projeto, clique em Next. Nessa tela, faremos

como no incio do curso: removeremos a source folder padro (src) e adicione as
source folders src/main/java e src/test/java.
f. D Next mais duas vezes at chegar tela de JSF Capabilities. Nessa tela,
escolha a opo Disable Library Configuration para indicarmos para o Eclipse
que ns mesmos copiaremos os JARs do JSF.Ainda nessa tela, na parte URL
Mapping Patterns, remova o mapeamento /faces/* e adicione um novo
mapeamento como *.xhtml
g. Clique em Finish e o projeto est criado.
3. O prximo passo configurar o Tomcat no Eclipse, para que possamos control-

lo mais facilmente.
a. Dentro do Eclipse, abra a view Servers. Para isso, pressione ctrl + 3, digite
Servers e escolha a view. Ela ser aberta na parte inferior do seu Eclipse.
b. Dentro da aba Servers clique com o boto direito do mouse e escolha New ->
Server. Se no quiser usar o mouse, voc pode fazer ctrl+3 New server.
c. Dentro da Janela New Server escolha Apache Tomcat v7.0 Server e clique em
Next.
d. O prximo passo dizermos ao Eclipse em qual diretrio instalamos o

Tomcat. Clique no boto Browse... e escolha a pasta na qual voc descompactou
o Tomcat.
e. Clique em Next e, na prxima tela, selecione o projeto fj22-argentum-web no

box Available (da esquerda), pressione o boto Add > (mover para o box
Configured da direita) e depois Finish.
f. Clique em Finish.
4. Por fim, precisamos importar do projeto anterior as classes como Negociacao ou

Candlestick. J o temos pronto na pasta /caelum/cursos/22/, com o nome de
modelo-argentum.zip. Precisamos apenas import-lo:
Para import-lo, use ctrl + 3 Archive File e escolha a opo Import (Archive
file).
Em Browse..., selecione o nosso arquivo modelo-argentum.zip e finalize-o.
Note que, com esse import, trouxemos tambm os jars da implementao

Mojarra do JSF e do Primefaces, que usaremos daqui pra frente.
Para casa...
Se voc est fazendo esse exerccio em casa, certifique-se que seu projeto
anterior est funcionando corretamente e simplesmente copie os pacotes
dele para o novo.
No esquea de copiar tambm o jar do XStream para a pasta

WebContent/WEB-INF/lib/.
Alm disso, no zip da aula ainda h os jars do JSF e do PrimeFaces, que

usaremos a seguir. Nesta verso da apostila estamos usando as verses
2.x.x e 3.5.x, respectivamente. Links para o download:
JSF: https://javaserverfaces.java.net/download.html
Primefaces: http://primefaces.org/downloads.html
5. Nossas classes de teste (src/test/java) ainda apresentam problemas

relacionados ao JUnit. Falta adicion-lo ao Build Path.
Abra a classe CandlestickFactoryTest e d ctrl + 1 na anotao @Test. Escolha a

opo Add JUnit 4 library to the build path.
6. Finalmente, para evitar confuses mais para a frente, feche o projeto que
fizemos nos outros dias de curso. Clique com o boto direito no fj22-argentum-
base e escolha a opo Close project
7.4 - A PRIMEIRA PGINA COM JSF
Como configuramos, na criao do projeto, que o JSF ser responsvel por

responder s requisies com extenso .xhtml. Dessa forma, tabalharemos com
arquivos xhtml no restante do curso.
Vale relembrar uma diferena fundamental entre as duas formas de

desenvolvimento para a web. A abordagem action based, como no SpringMVC e no
VRaptor, focam seu funcionamento nas classes que contm as lgicas. A view
meramente uma camada de apresentao do que foi processado no modelo.
Enquanto isso, o pensamento component based adotado pelo JSF leva a view
como a pea mais importante -- a partir das necessidades apontadas pelos
componentes da view que o modelo chamado e populado com dados.
As tags que representam os componentes do JSF esto em duas taglibs

principais (bibliotecas de tags): a core e a html.
A taglib html contm os componentes necessrios para montarmos nossa tela

gerando o HTML adequado. J a core possui diversos componentes no visuais,
como tratadores de eventos ou validadores. Por ora, usaremos apenas os
componentes da h:html
Importando as tags em nossa pgina

Diferente da forma importao de taglibs em JSPs que vimos no curso de Java para
a web (FJ-21), para importar as tags no JSF basta declararmos seus namespaces no
arquivo .xhtml. Dessa forma, teremos:
<!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:h="http://java.sun.com/jsf/html">

</html>
Definindo a interface da aplicao
Como qualquer outro aprendizado de tecnologia, vamos comear a explorar o JSF

criando nossa primeira tela com uma mensagem de boas vindas para o usurio.
Como todo arquivo HTML, todo o cabealho deve estar dentro da tag head e o
que ser renderizado no navegador deve ficar dentro da tag body. Uma pgina
padro para ns seria algo como:
<html ...>
<head>

</head>
<body>

</body>
</html>
Quando estamos lidando com o JSF, no entanto, precisamos nos lembrar de

utilizar preferencialmente as tags do prprio framework, j que, medida que
utilizarmos componentes mais avanados, o JSF precisar gerenciar os prprios
body e head para, por exemplo, adicionar CSS e javascript que um componente
requisitar.
Assim, usando JSF preferiremos utilizar as tags estruturais do HTML que vm

da taglib http://java.sun.com/jsf/html, nosso html vai ficar mais parecido com
esse:
<html ...>
<h:head>

</h:head>
<h:body>

</h:body>
</html>
Mostrando informaes com h:outputText
Como queremos mostrar uma saudao para o visitante da nossa pgina, podemos
usar a tag h:outputText. atravs do seu atributo value que definimos o texto que
ser apresentado na pgina.
Juntando tudo, nosso primeiro exemplo uma tela simples com um texto:

<h:head>
<title>Argentum Web</title>
</h:head>
<h:body>
<h:outputText value ="Ol JSF!" />
</h:body>
</html>
7.5 - INTERAGINDO COM O MODELO: MANAGED BEANS
O h:outputText uma tag com um propsito aparentemente muito bobo e, no

exemplo acima, exatamente equivalente a simplesmente escrevermos "Ol JSF!"
diretamente. E, de fato, para textos fixos, no h problema em escrev-lo
diretamente!
Contudo, se um pedao de texto tiver que interagir com o modelo, uma lgica
ou mesmo com outros componentes visuais, ser necessrio que ele tambm
esteja guardado em um componente.
Exemplos dessas interaes, no caso do h:outputText: mostrar informaes

vindas de um banco de dados, informaes do sistema, horrio de acesso, etc.
Para mostrar tais informaes, precisaremos executar um cdigo Java e

certamente no faremos isso na camada de visualizao: esse cdigo ficar
separado da view, em uma classe de modelo. Essas classes de modelo que
interagem com os componentes do JSF so os Managed Beans.
Estes, so apenas classezinhas simples que com as quais o JSF consegue

interagir atravs do acesso a seus mtodos. Nada mais so do que POJOs anotados
com @ManagedBean.
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 ningum usaria objetos simples nos seus projetos pois no
existia um nome extravagante para ele.
Se quisermos, por exemplo, mostrar quando foi o acesso do usurio a essa

pgina, podemos criar a seguinte classe:
@ManagedBean
public class OlaMundoBean {
public String getHorario() {

SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss");
return "Atualizado em " + sdf.format(new Date());
}
}
E, bem semelhantemente forma padro nas JSPs vistas no treinamento de

Java para a Web, acessaremos o getter atravs da Expression Language. Existe
apenas uma pequena diferena: para chamar os mtodos no JSF, em vez do cifro
($), usaremos a cerquilha (#).
<h:outputText value="#{olaMundoBean.horario}" />
Ao fazer colocar o cdigo acima, estamos dizendo que h uma classe gerenciada
pelo JSF chamada OlaMundoBean que tem um mtodo getHorario -- e que o
retorno desse mtodo ser mostrado na pgina. uma forma extremamente
simples e elegante de ligar a view a mtodos do model.
Agora a melhor hora de aprender algo novo
Se voc gosta de estudar essa apostila aberta da Caelum,

certamente vai gostar dos cursos online que lanamos na
plataforma Alura. Voc estuda a qualquer momento com
a qualidade Caelum.
Conhea a Alura.
7.6 - RECEBENDO INFORMAES DO USURIO
Agora que j sabemos conectar a pgina camada de modelo, fica fcil obter
dados do usurio! Por nossa vivncia com aplicaes web, at mesmo como
usurios, sabemos que a forma mais comum de trazer tais dados para dentro da
aplicao atravs de formulrios.
A boa notcia que no JSF no ser muito diferente! Se para mostrar dados na
pgina usamos a tag h:outputText, para trazer dados do usurio para dentro da
aplicao, usaremos a tag h:inputText. Ela far a ligao entre o atributo do seu
bean e o valor digitado no campo.
Note que a ideia a mesma de antes: como o JSF precisar interagir com os
dados desse componente, no podemos usar a tag HTML que faria o mesmo
trabalho. Em vez disso, usaremos a taglib de HTML provida pelo prprio JSF,
indicando como a informao digitada ser guardada no bean.
<h:outputLabel value="Digite seu nome:"/>

<h:inputText value="#{olaMundoBean.nome}"/>
Apenas com esse cdigo, j podemos ver o texto Digite seu nome e o campo de
texto onde o usurio digitar. Sabemos, no entanto, que no faz sentido ter
apenas um campo de texto! preciso ter tambm um boto para o usurio
confirmar que acabou de digitar o nome e um formulrio para agrupar todas essas
tags.
Boto e o formulrio em JSF
Esse um pequeno ponto de divergncia entre o HTML puro e o JSF. Em um

simples formulrio HTML, configuramos a action dele na prpria tag form e o papel
do boto apenas o de mandar executar a ao j configurada.
Para formulrios extremamente simples, isso o bastante. Mas quando

queremos colocar dois botes com aes diferentes dentro de um mesmo
formulrio, temos que recorrer a um JavaScript que far a chamada correta.
Como dito antes, no entanto, o JSF tem a proposta de abstrair todo o protocolo
HTTP, o JavaScript e o CSS. Para ter uma estrutura em que o formulrio marcado
apenas como um agregador de campos e cada um dos botes internos pode ter
funes diferentes, a estratgia do JSF foi a de deixar seu form como uma tag
simples e adicionar a configurao da ao ao prprio boto.
<h:form>
<h:outputLabel for="nome" value="Digite seu nome:"/>
<h:inputText id="nome" value="#{olaMundoBean.nome}"/>
<h:commandButton value="Ok" action="#{olaMundoBean.digaOi}"/>
</h:form>
Quando o usurio clica no boto Ok, o JSF chama o setter do atributo nome do
OlaMundoBean e, logo em seguida, chama o mtodo digaOi. Repare que esta ordem
importante: o mtodo provavelmente depender dos dados inseridos pelo
usurio.
Note, tambm, que teremos um novo mtodo no managed bean chamado

digaOi. Os botes sempre esto atrelados a mtodos porque, na maior parte dos
casos, realmente queremos executar alguma ao alm da chamada do setter. Essa
ao pode ser a de disparar um processo interno, salvar no banco ou qualquer
outra necessidade.
O que fazer enquanto no ainda houver informao?
Sabendo que, antes de chamar o mtodo correspondente ao do boto, o

JSF preenche os atributos atravs dos setters, sabemos que teremos a
informao a ser mostrada para o usurio.
No entanto, muitas vezes no gostaramos de mostrar um campo enquanto

ele no estiver preenchido e, felizmente, o JSF tem uma forma bastante
simples de s mostrar um h:outputText na tela apenas se a informao
estiver preenchida! Basta usar o atributo rendered:
<h:outputText value="Oi #{olaMundoBean.nome}"

rendered="#{not empty olaMundoBean.nome}"/>
7.7 - EXERCCIOS: OS PRIMEIROS COMPONENTES JSF
1. Use ctrl + N HTML para criar o arquivo olaMundo.xhtml na pasta WebContent da

sua aplicao. Escolha Next e, na prxima tela, escolha o template xhtml 1.0
transitional, usualmente a ltima opo da lista:
Selecione a mesma opo da imagem acima e pressione Finish.
Implemente nosso primeiro cdigo JSF com apenas uma sada de texto:

<h:head>
<title>Argentum</title>
</h:head>
<h:body>
<h:outputText value="Ola Mundo" />
</h:body>
</html>
2. Inicie o Tomcat e acesse a URL: http://localhost:8080/fj22-argentum-

web/olaMundo.xhtml
3. Verifique o cdigo fonte gerado pela pgina. Repare que ele no nada mais que
simples HTML. Para isso, na maior parte dos navegadores, use ctrl + U.
Repare no uso das tags <h:head>, <h:body> e <h:outputText>: elas no aparecem

no html gerado! Sua funo apenas indicar para o JSF como gerar o cdigo HTML
necessrio para o exemplo funcionar.
4. Alm de usar mensagens fixas, poderamos fazer com que a mensagem seja
devolvida de uma classe responsvel por prover objetos para uma view: um dos
chamados ManagedBeans. Vamos comear criando essa classe contendo apenas a
mensagem inicial.
Crie uma classe chamada OlaMundoBean, com apenas o atributo mensagem j

inicializada, seu getter e no esquea de anotar a classe com @ManagedBean
@ManagedBean
private String mensagem = "Quem voc?";
public String getMensagem() {

return mensagem;
}
}
5. Alteremos o arquivo xhtml, ento, para que ele use a mensagem Quem voc?
que escrevemos hard-coded na classe OlaMundoBean. Usaremos a Expression
Language especfica do JSF para isso, que capaz de pegar informaes de
qualquer classe configurada como um ManagedBean.
Basta alterar o value da tag h:outputText:
...
<h:body>
<h:outputText value="#{olaMundoBean.mensagem}" />
</h:body>
6. Agora, se quisermos pegar a resposta do usurio e cumpriment-lo

propriamente, podemos adicionar nossa pgina um campo de texto para que o
usurio digite seu nome. Ento, trocaremos a mensagem cumprimentando ele.
Comecemos pelas alteraes no olaMundo.xhtml, adicionando um h:inputText e
um boto para o usurio enviar seu nome, como abaixo.
Ateno! No esquea da tag h:form em volta do formulrio. Lembre-se que, sem

ela, os botes no funcionam.
...
<h:body>
<h:form>
<h:outputText value="#{olaMundoBean.mensagem}" /><br />
<h:inputText value="#{olaMundoBean.nome}" />
<h:commandButton action="#{olaMundoBean.nomeFoiDigitado}"
value="Ok"/>
</h:form>
</h:body>
7. Essa alterao, no entanto, no suficiente. Se voc rodar o servidor agora,

notar que a pgina, que antes funcionava, agora lana uma ServletException
informando que Property 'nome' not found on type
br.com.caelum.argentum.bean.OlaMundoBean.
Isto , falta adicionarmos o atributo nome e seu getter pgina, como fizemos
com a mensagem, no outro exerccio. Adicione classe OlaMundoBean o atributo e
seu getter.
@ManagedBean
...
private String nome;
public String getNome() {

return nome;
}
...
}
8. Agora sim podemos ver a mensagem, o campo de texto e o boto. Contudo, ao

apertar o boto, levamos uma javax.el.PropertyNotFoundException informando
que nome um atributo no altervel.
Faltou adicionarmos o setter do atributo OlaMundoBean, para que o JSF possa

preench-lo! Alm disso, o boto chamar o mtodo nomeFoiDigitado, que
tambm no existe ainda.
Complete a classe com o setter faltante e o mtodo nomeFoiDigitado, reinicie o

servidor e teste!
@ManagedBean
// ...tudo o que j existia aqui
public void setNome(String nome) {

this.nome = nome;
}
public void nomeFoiDigitado() {

System.out.println("\nChamou o boto");
}
}
9. (Opcional) Para entender melhor o ciclo de execuo de cada chamada ao JSF,

adicione System.out.println("nome do mtodo") a cada um dos mtodos da sua
aplicao e veja a ordem das chamadas pelo console do Eclipse.
7.8 - A LISTA DE NEGOCIAES
Agora que j aprendemos o bsico do JSF, nosso objetivo listar em uma pgina
as negociaes do web service que o Argentum consome. Nessa listagem,
queremos mostrar as informaes das negociaes carregadas -- isto , queremos
uma forma de mostrar preo, quantidade e data de cada negociao. E a forma
mais natural de apresentar dados desse tipo , certamente, uma tabela.
At poderamos usar a tabela que vem na taglib padro do JSF, mas ela
bastante limitada e no tem pr-definies de estilo. Isto , usando a taglib
padro, teremos sim uma tabela no HTML, mas ela ser mostrada da forma mais
feia e simples possvel.
J falamos, contudo, que a proposta do JSF abstrair toda a complexidade

relativa web -- e isso inclui CSS, formataes, JavaScript e tudo o mais. Ento,
em apoio s tags bsicas, algumas bibliotecas mais sofisticadas surgiram. As mais
conhecidas delas so PrimeFaces, RichFaces e IceFaces.
Taglibs como essas oferecem um visual mais bacana j pr-pronto e, tambm,

diversas outras facilidades. Por exemplo, uma tabela que utilize as tags do
Primefaces j vem com um estilo bonito, possibilidade de colocar cabealhos nas
colunas e at recursos mais avanados como paginao dos registros.
O componente responsvel por produzir uma tabela baseada em um modelo se

chama dataTable. Ele funciona de forma bem semelhante ao for do Java 5 ou o
forEach da JSTL: itera em uma lista de elementos atribuindo cada item na varivel
definida.
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Argentum</title>
</h:head>
<h:body>
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}">
</p:dataTable>
</h:body>
</html>
O cdigo acima chamar o mtodo getNegociacoes da classe ArgentumBean e

iterar pela lista devolvida atribuindo o objeto varivel negociacao. Ento, para
cada coluna que quisermos mostrar, ser necessrio apenas manipular a
negociao do momento.
E, intuitivamente o bastante, cada coluna da tabela ser representada pela tag

p:column. Para mostrar o valor, voc pode usar a tag que j vimos antes, o
h:outputText. Note que as tags do Primefaces se integram perfeitamente com as
bsicas do JSF.

<p:column headerText="Preo">
<h:outputText value="#{negociacao.preco}"/>
</p:column>
... outras colunas
</p:dataTable>
Falta ainda implementar a classe que cuidar de devolver essa lista de

negociaes. O cdigo acima sugere que tenhamos uma classe chamada
ArgentumBean, gerenciada pelo JSF, que tenha um getter de negociaes que pode,
por exemplo, trazer essa lista direto do ClienteWebService que fizemos
anteriormente:
@ManagedBean
public class ArgentumBean {
public List<Negociacao> getNegociacoes() {

return new ClienteWebService().getNegociacoes();
}
}
Da forma acima, o exemplo j funciona e voc ver a lista na pgina. No

entanto, nesse exemplo simples o JSF chamar o mtodo getNegociacoes duas
vezes durante uma mesma requisio. Isso no seria um problema se ele fosse um
getter padro, que devolve uma referncia local, mas note como nosso
getNegociacoes vai buscar a lista diretamente no web service. Isso faz com que,
para construir uma simples pgina, tenhamos que esperar a resposta do servio...
duas vezes!
Esse comportamento no interessante. Ns gostaramos que o Argentum

batesse no servio em busca dos dados apenas uma vez por requisio, e no a
cada vez que o JSF chame o getter. Isso significa que o acesso ao servio no pode
estar diretamente no mtodo getNegociacoes, que deve apenas devolver a lista
pr-carregada.
No JSF, o comportamento padro diz que um objeto do ManagedBean dura por

uma requisio. Em outras palavras, o escopo padro dos beans no JSF o de
requisio. Isso significa que um novo ArgentumBean ser criado a cada vez que um
usurio chamar a pgina da listagem. E, para cada chamada a essa pgina,
precisamos buscar a lista de negociaes no servio apenas uma vez. A resposta
para esse problema, ento, bastante simples e apareceu logo no incio do
aprendizado do Java orientado a objetos.
Basta colocar a chamada do web service naquele bloco de cdigo que chamado
apenas na criao do objeto, isto , no construtor. Ao armazenar a listagem em um
atributo, o getter de negociaes passa a simplesmente devolver a referncia,
evitando as mltiplas chamadas a cada requisio.
@ManagedBean
private List<Negociacao> negociacoes;
public ArgentumBean() {
ClienteWebService cliente = new ClienteWebService();
this.negociacoes = cliente.getNegociacoes();
}

return this.negociacoes;
}
}
Juntando as informaes dessa seo, j conseguimos montar a listagem de

negociaes com os dados vindos do web service. E o processo ser muito
frequentemente o mesmo para as diversas outras telas: criamos a pgina usando
as tags do Primefaces em complemento s bsicas do JSF, implementamos a
classe que cuidar da lgica por trs da tela e a anotamos com @ManagedBean.
Voc pode tambm fazer o curso FJ-22 dessa apostila na Caelum
Querendo aprender ainda mais sobre boas prticas de Java,

JSF, Web Services, testes e design patterns? Esclarecer
dvidas dos exerccios? Ouvir explicaes detalhadas com
um instrutor?
A Caelum oferece o curso FJ-22 presencial nas cidades de

So Paulo, Rio de Janeiro e Braslia, alm de turmas incompany.
Consulte as vantagens do curso Lab. Java com Testes, JSF e Design Patterns.
7.9 - FORMATAO DE DATA COM JSF
A tabela j funcional, mas com a data mal formatada. O componente no sabe

como gostaramos de formatar a data e chama por de baixo dos planos o mtodo
toString da data para receber uma apresentao como String.
A forma clssica de resolver esse problema seria atravs de um getter que traria
a data formatada por um SimpleDateFormat. Mas, assim como a JSTL vista no curso
de Java para a Web, o JSF tambm tem uma tag para formatar valores, nmeros e,
claro, datas. Essas tags e muitas outras, so parte da biblioteca fundamental de
tags lgicas do JSF e, para us-las, ser necessrio importar tal taglib.
Assim como as bibliotecas de tags de HTML e do Primefaces, para utilizar essas

ser necessrio declar-las no namespace da sua pgina.
Da, podemos facilmente mudar a forma padro de exibio usando o

componente de formatao f:convertDateTime que define um pattern para a data.
importante lembrar que, internamente, o f:convertDateTime acaba fazendo
uma chamada ao SimpleDateFormat e, assim, s podemos formatar objetos do tipo
java.util.Date com ele. Por essa razo, chamaremos o mtodo getTime que
devolve a representao em Date do Calendar em questo. Mais uma vez podemos
omitir a palavra "get" com expression language. Segue a tabela completa:
xmlns:f="http://java.sun.com/jsf/core"
<h:body>
... outras colunas, e ento:

<p:column headerText="Data">
<h:outputText value="#{negociacao.data.time}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
</p:dataTable>
</h:body>
</html>
7.10 - EXERCCIOS: P:DATATABLE PARA LISTAR AS NEGOCIAES DO WEB

SERVICE
1. Use ctrl + N HTML para criar um novo arquivo na pasta WebContent chamado
index.xhtml. Como j fizemos antes, clique em Next e, na tela seguinte, escolha o
template xhtml 1.0 transitional.
O Eclipse vai gerar um arquivo com um pouco de informaes a mais, mas ainda
muito parecido com o seguinte, onde mudamos o title:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
2. Como vamos usar o JSF nesse arquivo e j temos at mesmo o JAR primefaces-
3.x.jar adicionado ao projeto (veja em WebContent/WEB-INF/lib) basta declarar os
namespaces das taglibs do JSF e do Primefaces, que usaremos no exerccio.
Alm disso, para que os componentes consigam incluir seu CSS nossa pgina,
altere as tags head e body de forma a usar suas verses gerenciadas pelo JSF:
xmlns:f="http://java.sun.com/jsf/core"
<h:head>
</h:head>
<h:body>
</h:body>
</html>
3. Agora, dentro do h:body, vamos comear a montar nossa tabela de

negociaes. O componente que usaremos para isso o p:datatable, do
Primefaces. Ele precisar da lista de negociaes e, assim como um forEach, uma
varivel para que cada coluna seja preenchida.
</p:dataTable>
4. Esse cdigo acima diz que o componente dataTable do Primefaces chamar o

mtodo getNegociacoes() da classe ArgentumBean e, para cada linha da tabela,
disponibilizar a negociao da vez na varivel negociacao.
O problema que o managed bean ArgentumBean ainda no existe e, claro, nem o

mtodo getNegociacoes() dela. E como cada vez que a pgina index.xhtml for
requisitada ela far algumas chamadas ao getNegociacoes, faremos a chamada ao
webservice no construtor e, a cada chamada ao getter, apenas devolveremos a
referncia mesma lista.
a. Crie a classe ArgentumBean com ctrl + N Class, no pacote br.com.caelum.argentum.bean

e anote ela com @ManagedBean.
@ManagedBean
b. Adicione o construtor que faa a chamada ao webservice atravs do

ClienteWebservice, guarde a lista em um atributo e crie o getter que o componente
chamar.
@ManagedBean
private List<Negociacao> negociacoes;
public ArgentumBean() {
negociacoes = new ClienteWebService().getNegociacoes();
}

return negociacoes;
}
}
5. Agora, nossa pgina j no d erro, mas nada mostrado na tela, quando a

acessamos. Falta indicarmos quais colunas queremos na nossa tabela -- no nosso
caso: preo, quantidade, volume e data. Em cada coluna, adicionaremos um ttulo
e cada uma delas tambm mostrar o valor de texto.
Para criar a coluna com o ttulo, usaremos o componente p:column e, como j

fizemos antes, para mostrar o valor necessrio, usaremos a h:outputText.

<p:column headerText="Preo">
<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>
<h:outputText value="#{negociacao.data}"/>
</p:column>
</p:dataTable>
6. Reinicie o Tomcat e acesse em seu navegador o endereo

http://localhost:8080/fj22-argentum-web/index.xhtml. O resultado deve ser
algo parecido com:
7. As informaes de preo, quantidade e volume esto legveis, mas a data das

negociaes est mostrando um monte de informaes que no nos interessam.
Na verdades, o que precisamos na coluna data de informaes de dia, ms, ano e,

no mximo, horrio de cada movimentao.
Adicione a tag f:convertDateTime coluna da data. Essa tag modificar o

comportamento da h:outputText para mostr-lo formatado de acordo com o
padro passado. Note que a tag h:outputText passar a ser fechada depois da
formatao da data:
...
<h:outputText value="#{negociacao.data.time}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>
</p:column>
...
7.11 - PARA SABER MAIS: PAGINAO E ORDENAO
O componente p:dataTable sabe listar items, mas no pra por a. Ele j vem
com vrias outras funcionalidades frequentemente necessrias em tabelas j
prontas e fceis de usar.
Muitos dados
Por exemplo, quando um programa traz uma quantidade muito grande de

dados, isso pode causar uma pgina pesada demais para o usurio que
provavelmente nem olhar com ateno todos esses dados.
Uma soluo clssica para resultados demais mostr-los aos poucos, apenas
conforme o usurio indicar que quer ver os prximos resultados. Estamos, claro,
falando da paginao dos resultados e o componente de tabelas do Primefaces j a
disponibiliza!
Para habilitar a paginao automtica, basta adicionar o atributo

paginator="true" sua p:dataTable e definir a quantidade de linhas por pgina
pelo atributo rows. A definio da tabela de negociaes para paginao de 15 em
15 resultados ficar assim:
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}"

paginator="true" rows="15">


</p:dataTable>
Essa pequena mudana j traz uma visualizao mais legal para o usurio, mas
estamos causando um problema silencioso no servidor. A cada vez que voc
chama uma pgina de resultados, a cada requisio, o ArgentumBean recriado e
perdemos a lista anterior. Assim, na criao da nova instncia de ArgentumBean,

seu construtor chamado e acessamos novamente o webservice.
Como recebemos a lista completa do webservice, podamos aproveitar a mesma

lista para todas as pginas de resultado e, felizmente, isso tambm bastante
simples.
O comportamento padro de um ManagedBean durar apenas uma requisio.

Em outras palavras, o escopo padro de um ManagedBean de request. Com apenas
uma anotao podemos alterar essa durao. Os trs principais escopos do JSF
so:
RequestScoped: o escopo padro. A cada requisio um novo objeto do bean

ser criado;
ViewScoped: escopo da pgina. Enquanto o usurio estiver na mesma pgina, o

bean mantido. Ele s recriado quando acontece uma navegao em s, isto ,
um boto abre uma pgina diferente ou ainda quando acessamos novamente a
pgina atual.
SessionScoped: escopo de sesso. Enquanto a sesso com o servidor no

expirar, o mesmo objeto do ArgentumBean atender o mesmo cliente. Esse escopo
bastante usado, por exemplo, para manter o usurio logado em aplicaes.
No nosso caso, o escopo da pgina resolve plenamente o problema: enquanto o

usurio no recarregar a pgina usaremos a mesma listagem. Para utiliz-lo,
basta adicionar ao bean a anotao @ViewScoped. No exemplo do Argentum:
@ManagedBean
@ViewScoped
...
Sempre que um ManagedBean possuir o escopo maior que o escopo de

requisio, ele dever implementar a interface Serializable:
@ManagedBean
@ViewScoped
public class ArgentumBean implementes Serializable {
...
Tirando informaes mais facilmente
Outra situao clssica que aparece quando lidamos com diversos dados
precisarmos v-los de diferentes formas em situaes diversas.
Considere um sistema que apresenta uma tabela de contatos. Se quisermos

encontrar um contato especfico nela, melhor que ela esteja ordenada pelo
nome. Mas caso precisemos pegar os contatos de todas as pessoas de uma regio,
melhor que a tabela esteja ordenada, por exemplo, pelo DDD.
Essa ideia de ordenao extremamente til e muito presente em aplicaes.

Como tal, essa funcionalidade tambm est disponvel para tabelas do
Primefaces. Apenas, como podemos tornar diversar colunas ordenveis, essa
configurao fica na tag da coluna.
Para tornar uma coluna ordenvel, preciso adicionar um simples atributo

sortBy tag h:column correspondente. Esse atributo torna o cabealho dessa
coluna em um elemento clicvel e, quando clicarmos nele, chamar a ordenao.
Contudo, exatamente pela presena de elementos clicveis, ser necessrio

colocar a tabela dentro de uma estrutura que comporte botes em HTML: um
formulrio. E, como quem configurar o que cada clique vai disparar o JSF, ser
necessrio usar o formulrio da taglib de HTML dele. Resumidamente, precisamos
colocar a tabela inteira dentro do componente h:form.
Se quisssemos tornar ordenveis as colunas da tabela de negociaes, o

resultado final seria algo como:
<h:form id="listaNegociacao">
<p:column sortBy="#{negociacao.preco}" headerText="Preo" >

<h:outputText value="#{negociacao.preco}" />
</p:column>


</p:dataTable>
<h:form>
Se permitirmos ordenar por qualquer coluna do modelo Negociacao, teremos

um resultado bem atraente:
Note que no foi necessrio adicionar cdigo algum classe ArgentumBean!

Note tambm que at possvel usar ambas as funcionalidades na mesma tabela.
E essas so apenas algumas das muitas facilidades que o p:dataTable oferece. Vale
a pena verificar o showcase e documentao no site do Primefaces.
Tire suas dvidas no GUJ Respostas
O GUJ um dos principais fruns brasileiros de computao

e o maior em portugus sobre Java. A nova verso do GUJ
baseada em uma ferramenta de perguntas e respostas (QA) e
tem uma comunidade muito forte. So mais de 150 mil
usurios pra ajudar voc a esclarecer suas dvidas.
Faa sua pergunta.
7.12 - EXERCCIO OPCIONAL: ADICIONE PAGINAO E ORDENAO TABELA
1. Vamos colocar paginao na tabela. Adicione os atributos paginator="true" e

rows="15". Adicione os atributos paginator e rows:
<p:dataTable var="negociacao" value="#{argentumBean.negociacoes}"

paginator="true" rows="15">
Salve a pgina, suba o servidor e acesse no seu navegador o endereo

http://localhost:8080/fj22-argentum-web/index.xhtml. Agora voc j consegue
ver resultados paginados de 15 em 15 negociaes:
2. Para evitar chamar o webservice a cada vez que pedimos os prximos resultados
paginados, adicione a anotao @ViewScoped classe ArgentumBean:
@ManagedBean
@ViewScoped
...
}
3. Como estamos utilizando um escopo maior do que o escopo de requisio, nosso

ManagedBean precisa implementar a interface Serializable. Adicione a
implementao da interface Serializable classe ArgentumBean:
@ManagedBean
@ViewScoped
public class ArgentumBean implements Serializable {
...
}
4. Tambm ser necessrio implementar a interface Serializable na classe

Negociacao, pois ela utilizada pela classe ArgentumBean:
public class Negociacao implements Serializable {

...
}
5. Deixe as colunas ordenveis, use o atributo sortBy em cada atributo. Por

exemplo, para a coluna que mostra o preo da negociao:

</p:column>
Repare que usamos a expression language #{negociacao.preco} do JSF dentro do

sortBy para definir o valor a ordenar.
6. Como estamos permitindo a ordenao das colunas da nossa tabela, temos que
colocar nossa p:dataTable dentro de um h:form:
<h:form id="listaNegociacao">

</p:column>


</p:dataTable>
<h:form>
Salve a pgina e veja o resultado recarregando a pgina (F5) no seu navegador.
h:form sempre usar HTTP POST
importante saber que diferente da tag form no HTML, o h:form sempre

envia uma requisio HTTP do tipo POST. Ele nem nos d a possibilidade de
escolher usar requisies GET.
Isso ocorre porque o JSF tenta abstrair o mundo HTTP e assim fica mais
perto do desenvolvimento Desktop tradicional. Ele esconde do
desenvolvedor o fato de que uma URL est sendo chamada. Em vez disso,
para o desenvolvedor, como se botes efetivamente chamassem mtodos
ou eventos dentro de um Managed Bean.
A deciso automtica pelo POST foi a forma encontrada para abstrair o

HTTP.
CAPTULO ANTERIOR:
Acessando um Web Service
PRXIMO CAPTULO:
Refatorao: os Indicadores da bolsa
Voc encontra a Caelum tambm em:
Blog Caelum
Cursos Online
Facebook
Newsletter
Casa do Cdigo
Twitter

Introdução Ao JSF e Primefaces - Lab

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introdução Ao JSF e Primefaces - Lab

Uploaded by

Copyright:

Available Formats

24/08/2017 Introduo ao JSF e Primefaces - Lab.

Java com Testes, JSF e Design Patterns

Introduo ao JSF e Primefaces

Durante muitos anos, os usurios se habituaram com aplicaes Desktop. Este

Para o desenvolvedor, a aplicao Desktop construda com uma srie de

Problemas de validao de dados so indicados na prpria tela sem que

Nesse tipo de desenvolvimento so utilizados diversos componentes ricos,

Esses componentes no esto, contudo, associados exclusivamente ao

7.1 - DESENVOLVIMENTO DESKTOP OU WEB?

Existem algumas desvantagens no desenvolvimento desktop. Como cada

O desenvolvimento Web e o protocolo HTTP

Para resolver problemas como esse, surgiram as aplicaes baseadas na web.

Um navegador web, como Firefox ou Chrome, que far o papel da aplicao

Enquanto o usurio usa o sistema, o navegador envia requisies (requests)

Isso facilita bastante a manuteno e a gerenciabilidade, pois temos um lugar

Comparando as duas abordagens, podemos ver vantagens e desvantagens em

Mesclando desenvolvimento Desktop e Web

Em vez de desenvolver puramente para desktop, uma tendncia mesclar os

No mundo Java h algumas opes como JavaServer Faces (JSF), Apache

7.2 - CARACTERSTICAS DO JSF

Guarda o estado dos componentes

Alm disso o estado dos componentes sempre guardado automaticamente

Outra caracterstica marcante na arquitetura do JSF a separao que fazemos

Especificao: vrias implementaes

A implementao mais famosa do JSF e tambm a implementao de

Primeiros passos com JSF

Nosso projeto utilizar a implementao Mojarra do JSF. Ela j define o modelo

No h componentes sofisticados dentro da especificao e isso proposital:

Para atender a demanda dos desenvolvedores por componentes mais

Cada biblioteca oferece ShowCases na web para mostrar seus componentes e

Para a definio da interface do projeto Argentum usaremos Oracle Mojarra

Configurao do controlador do JSF

O JSF segue o padro arquitetural MVC (Model-View-Controller) e faz o papel

Ao usar o Eclipse com suporte a JSF 2 essa configurao no web.xml j feita

Faces-config: o arquivo de configurao do mundo JSF

Alm disso, h um segundo XML que o arquivo de configurao relacionado com

Como o JSF na verso dois encoraja o uso de anotaes em vez de configuraes

Agora j temos as informaes necessrias para criar nosso primeiro projeto

Seus livros de tecnologia parecem do sculo passado?

Conhea a Casa do Cdigo, uma nova editora, com autores de

Com a curadoria da Caelum e excelentes autores, uma

Casa do Cdigo, livros para o programador.

7.3 - EXERCCIOS: INSTALANDO O TOMCAT E CRIANDO O PROJETO

1. Primeiramente, precisamos instalar o Tomcat. Usaremos a verso 7.x:

a. V no Desktop e entre na pasta Caelum e em seguida na pasta 22.

b. Copie o arquivo zip do TomCat e cole ele na sua pasta Home.

c. Clique com o boto direito e escolha Extract here.

d. O Tomcat j est pronto para o uso!

2. O prximo passo criar o nosso projeto no Eclipse.

a. Crie um novo projeto web usando o ctrl + 3 Dynamic Web Project.

b. Em Project name coloque fj22-argentum-web.

c. Na seo Configuration clique em Modify para acrescentarmos suporte ao JSF.

e. De volta tela de criao do projeto, clique em Next. Nessa tela, faremos

g. Clique em Finish e o projeto est criado.

3. O prximo passo configurar o Tomcat no Eclipse, para que possamos control-

d. O prximo passo dizermos ao Eclipse em qual diretrio instalamos o

e. Clique em Next e, na prxima tela, selecione o projeto fj22-argentum-web no

4. Por fim, precisamos importar do projeto anterior as classes como Negociacao ou

Em Browse..., selecione o nosso arquivo modelo-argentum.zip e finalize-o.

Note que, com esse import, trouxemos tambm os jars da implementao

No esquea de copiar tambm o jar do XStream para a pasta

Alm disso, no zip da aula ainda h os jars do JSF e do PrimeFaces, que

5. Nossas classes de teste (src/test/java) ainda apresentam problemas

Abra a classe CandlestickFactoryTest e d ctrl + 1 na anotao @Test. Escolha a