Download do termo de referência - Sema

Conteúdo
FACELETS E LAYOUT CSS ............................................................................................................... 2
O ECLIPSE IDE ..................................................................................................................................... 2
OBTENDO E INSTALANDO O ECLIPSE IDE ................................................................................ 2
O PLUG-IN JBOSS TOOLS ................................................................................................................. 3
INICIANDO NA PLATAFORMA ECLIPSE ..................................................................................... 3
BAIXANDO O JAVASERVER FACES .............................................................................................. 4
AS BIBLIOTECAS DO JAVASERVER FACES ............................................................................... 4
ADICIONANDO O JAVASERVER FACES AO PROJETO NO ECLIPSE IDE .......................... 5
ONDE BAIXAR O FACELETS ........................................................................................................... 6
CRIANDO UM PROJETO SIMPLES COM FACELETS ................................................................ 6
CRIANDO UM JAVABEAN .............................................................................................................. 11
O ARQUIVO FACES-CONFIG.XML ............................................................................................... 13
O ARQUIVO WEB.XML .................................................................................................................... 15
AS PÁGINAS DA APLICAÇÃO ........................................................................................................ 15
Página 1
www.integrator.com.br

Facelets e Layout CSS
JavaServer Faces é muito bom para desenvolver aplicações Web, principalmente se você puder contar
com uma boa ferramenta como o Eclipse IDE. Entretanto, podemos unir as facilidades dos
componentes Faces com as características (X)HTML.
Facelets é um framework de templates JavaServer Faces, baseado em alguns simples princípios:
• Criação de uma árvore de objetos UIComponent e conteúdo entrelaçado completamente com o
processo de ciclo de vida do JavaServer Faces;
• É mais rápido, pois não utiliza o engine do JSP para transformar em Servlets;
• Suporte a templates reutilizáveis, aumentando a produtividade na criação de numerosas páginas,
criando uma base padrão;
• Integração com os processos Faces e com as tags (X)HTML (usa diretamente o XHTML como
tecnologia view do JSF) como membros da árvore de componentes. Isso possibilita a injeção de
componentes JSF com um simples atributo jsfc;
• Erros mais amigáveis e com maior precisão;
• Eliminação de tags JSF como e .
Graças a estas integrações, as aplicações podem ser escritas para serem visualizadas em uma interface
Web 2.0.
O Eclipse IDE
O Eclipse IDE, chamado por muitos de Plataforma Eclipse, é considerada por uma grande maioria de
desenvolvedores Java como a melhor ferramenta para desenvolvimento dessa linguagem.
Desenvolvido inicialmente pela IBM e liberado o código fonte a comunidade, ao qual se criou a
fundação Eclipse (Eclipse Foundation), sua grande vantagem, na atualidade, está no uso de seus
assistentes de código e grande gama de plug-ins, podendo se adaptar a qualquer situação de
desenvolvimento.
Até o momento em que esse tutorial está sendo escrito, a versão mais atual do Eclipse é a 3.3.
Obtendo e instalando o Eclipse IDE
Para desenvolver aplicações Web usando a plataforma Eclipse, primeiramente você deverá ter o
Eclipse em um ambiente voltado para o desenvolvimento Java EE. Para obter o Eclipse IDE, já
configurado com o ambiente Web, vá ao endereço http://www.eclipse.org/downloads/.
Ao carregar a página, vá ao link Eclipse IDE for Java EE Developers.
Figura 1 – Seleção do Eclipse IDE que será baixado na área de downloads do site oficial
Página 2
www.integrator.com.br

Ao baixar, descompacte em um local desejado de sua máquina.
O plug-in JBoss Tools
Após a descompactação do Eclipse, sem executá-lo, você vai baixar o plug-in JBoss Tools, que
auxiliará no desenvolvimento da aplicação. Entre no endereço
http://www.jboss.org/projects/download/ e vá até Tools. Clique no link JBoss Tools, como exibe a
Figura 2.
Figura 2 – Seleção do JBoss Tools para download
Após baixar, o arquivo compactado possui um diretório chamado eclipse, contendo a estrutura que
será necessária para ser adicionada a instalação do Eclipse atual.
Simplesmente cole sobre o diretório eclipse original, obtido da descompactação anterior, que o sistema
operacional se encarregará de adicionar os plug-ins existentes.
Iniciando na plataforma Eclipse
Após descompactar o Eclipse, você pode iniciá-lo diretamente pelo executável eclipse.exe no
Windows.
No Linux você pode iniciar o Eclipse da seguinte maneira, desde que haja as devidas permissões:
shell# /home/edson/eclipse/./eclipse
Assim que iniciar o Eclipse IDE, você pode selecionar ou aceitar o local onde ele vai armazenar seus
projetos, o chamado Workspace. Caso não queira mais ter essa caixa de diálogo aparecendo, marque a
opção Use this as the default and do not ask again. Confirme após clicando no botão OK.
Página 3
www.integrator.com.br

Figura 3 – O Workspace para o desenvolvimento das aplicações
Baixando o JavaServer Faces
Para trabalhar com o JavaServer Faces, primeiramente será preciso configurar os arquivos e a estrutura
necessária.
O container Servlet usado para este tutorial será o Tomcat 6 que, por padrão, não possui suporte direto
ao JavaServer Faces, ou seja, não contém as bibliotecas necessárias para o desenvolvimento com o
mesmo.
Para baixar o JSF, faça download no endereço
http://java.sun.com/j2ee/javaserverfaces/download.html. Como irá trabalhar com JavaServer Faces
voltado para um container compatível com a tecnologia Java EE 5, você deverá baixar a versão JSF
1.2, a utilizada nesse tutorial. Ao baixar o arquivo, simplesmente desempacote em um diretório de sua
escolha.
Atenção: Caso queira utilizar o GlassFish, esse passo é desnecessário.
As bibliotecas do JavaServer Faces
Para ter o JavaServer Faces 1.2 em sua aplicação, você possui dois arquivos do tipo JAR:
1. jsf-api.jar
2. jsf-impl.jar
Para o trabalho com JSF 1.1, há a necessidade de oito arquivos do tipo JAR que incluem as bibliotecas
do JSTL e Commons:
Quatro JARs Commons:
1. commons-beanutils.jar
2. commons-collections.jar
3. commons-digester.jar
4. commons-logging.jar
Dois JARs JSF:
Página 4
www.integrator.com.br

1. jsf-api.jar
2. jsf-impl.jar
Dois JARs JSTL:
1. jstl.jar
2. standard.jar
Para torná-los disponíveis em sua aplicação é simples, bastando apenas colocar esses arquivos listados
e no diretório lib, encontrado em WEB-INF de sua aplicação Web.
Porém, como vamos utilizar um ambiente de trabalho baseado em IDE, será mais fácil essa
configuração.
Configurando o JavaServer Faces no Eclipse IDE
O JSF 1.2 não vem com o plug-in e nem com o Eclipse, assim como o Tomcat. Isso significa que você
deve adicioná-lo ao projeto separadamente. Porém, como você poderá fazer mais de um projeto usando
JSF, será mais fácil criar uma biblioteca personalizada para que possamos adicionar no projeto com
mais facilidade.
Vá ao menu Window e clique em Preferences. Na caixa de diálogo Preferences, digite na parte
superior, onde aparece type filter text, a palavra user. Observe que haverá uma filtragem, onde você
deverá selecionar User Libraries.
Em User Libraries, clique no botão New. Na caixa de diálogo New User Library digite JSF 1.2 em
User library name e confirme.
Figura 4 – Adição das bibliotecas JSF 1.2 ao Eclipse IDE
Com a biblioteca selecionada, clique no botão Add JARs. Selecione os arquivos JARs (jsf-api.jar e
jsf-impl.jar) descompactados do JSF 1.2 que você baixou no início deste capítulo. Confirme a caixa
de diálogo Preferences.
Página 5
www.integrator.com.br

Figura 5 – A biblioteca de usuário JSF 1.2 configurada com os JARs
O Facelets
Você pode baixar o Facelets na sua última versão no endereço oficial https://facelets.dev.java.net/.
Na parte inferior do site, há o link downloadable from here.
Criando um projeto simples com Facelets
O Eclipse IDE possui mais opções de criação de páginas com o framework JavaServer Faces devido a
utilização do plug-in JBoss Tools.
Vá ao menu File, em New, e selecione Project. Na caixa de diálogo New Project, expanda JBoss
Tools Web > JSF e selecione JSF Project. Clique no botão Next para prosseguir.
Página 6
www.integrator.com.br

Figura 6 – Seleção de JSF Project do plug-in JBoss Tools
Digite TrabComFacelets no campo Project Name e altere para JSF 1.2 with Facelets em JSF
Environment. Mantenha então a opção FaceletsBlankWithoutLibs em Template e clique no botão
Next.
Figura 7 – Novo projeto JSF com Facelets
Na terceira etapa será necessário adicionar um servidor ao Eclipse IDE. Clique no botão New, em
Runtime. Na caixa de diálogo New Server Runtime, expanda Apache e selecione Apache Tomcat
v6.0. Clique no botão Next para prosseguir.
Página 7
www.integrator.com.br

Figura 8 – Seleção do Apache Tomcat 6
Em seguida, em Tomcat installation directory, clique no botão Browse e selecione o Tomcat
instalado em sua máquina. Conclua a adição do Tomcat 6 através do botão Finish.
Figura 9 – Apache Tomcat selecionado no seu local de instalação no Windows
Após a adição do Runtime, clique no botão Finish para concluir o assistente.
www.integrator.com.br
Página 8

Figura 10 – Final da criação do projeto no Eclipse IDE
Assim que finalizar, a caixa de diálogo Open Associated Perspective sugira, perguntando se deseja
abrir a perspectiva associada ao projeto. Clique no botão Yes para confirmar.
Figura 11 – Diálogo perguntado se deseja abrir a perspectiva associada ao projeto
Adicionando a biblioteca JSF criada ao projeto
Para adicionar ao projeto a biblioteca JSF criada, clique com o direito do mouse sobre ele e selecione o
item Properties no menu de contexto.
Na caixa de diálogo Properties for TrabComFacelets, em Java Build Path, vá até a guia Libraries
e clique no botão Add Library.
Em Add Library selecione User Library e clique no botão Next.
Página 9
www.integrator.com.br

Figura 12 – Adicionando uma biblioteca de usuário configurada
Na segunda etapa, selecione a biblioteca JSF 1.2 criada e clique em Finish.
Figura 13 – Seleção da biblioteca JSF 1.2
Assim que finalizar, você possui a biblioteca no projeto. Clique em J2EE Module Dependencies na
lateral esquerda. Como a alteração não foi aplicada, a caixa de diálogo Setting Java Build Path
surgirá. Confirme no botão Apply para aplicar as alterações.
Observe que em J2EE Module Dependencies agora existe o JAR/Module JSF 1.2. Marque o
checkbox e confirme.
Página 10
www.integrator.com.br

Criando um JavaBean
Clique com o direito do mouse sobre o projeto, na view Package, e selecione New > Class. Na caixa
de diálogo New Java Class, digite Cadastro em Name. Altere Package para br.com.integrator (ou o
nome do pacote que desejar). Conclua em Finish.
Altere a classe como mostrado na Listagem 1 a seguir.
Listagem 1 – A classe Cadastro.java
package br.com.integrator;
public class Cadastro {
private String nome;
private String email;
private String telefone;
//get e set omitido
}
Para adicionar os métodos Getters e Setters no Eclipse, vá ao menu Source > Generate Getters and
Setters. Clique no botão Select All na caixa de diálogo Generate Getters and Setters e confirme.
Figura 14 – Gerando Getters e Setters no Eclipse IDE
Página 11
www.integrator.com.br

O Bean Cadastro possui apenas três atributos necessários, com os métodos getters e setters, para que
os valores sejam enviados pelos campos de um formulário que será criado adiante.
Crie uma nova classe, a chame de Controle, e a coloque no pacote br.com.integrator.controller.
Altere como mostrado na Listagem 2 a seguir:
Listagem 2 – A classe Controle
…
public class Controle {
private Cadastro cadastro;
private List cadList = new ArrayList();
public Controle() {
cadastro = new Cadastro();
}
public Cadastro getCadastro() {
return cadastro;
}
public void setCadastro(Cadastro cadastro) {
this.cadastro = cadastro;
}
private void adicionar(Cadastro c){
cadList.add(c);
}
public DataModel getTodos() {
return new ListDataModel(cadList);
}
public String novo(){
cadastro = new Cadastro();
return "cadastro";
}
public String salvar( ) {
this.adicionar(cadastro);
FacesContext context = FacesContext.getCurrentInstance( );
FacesMessage message = new FacesMessage("Salvo com sucesso!");
context.addMessage(null, message);
return "cadastrados";
www.integrator.com.br
Página 12

}
}
Faça as importações da classe com o atalho Ctrl + Shift + O .
Com a intenção de simular um banco de dados nesse exemplo, você cria na classe um List da classe
Cadastro.
Para salvar o cadastro, a página que será criada chamará o método salvar() que, por sua vez, chama o
método adicionar(), transmitindo como parâmetro a instância de Cadastro, que populará o List.
A página que será exibida após o cadastro, exibirá os dados salvos no List, através de uma tabela
populada pelo método getTodos(), que retorna um DataModel, da classe Controle.
O arquivo faces-config.xml
Para que o Facelets funcione em sua aplicação Web, é necessário configurar o arquivo facesconfig.xml
com a seguinte linha:
com.sun.facelets.FaceletViewHandler
Uma das grandes características de JavaServer Faces é a sua flexibilidade. Ele é desenhado com um
número de interfaces plugáveis, e uma delas é ViewHandler. Então é necessário adicionar um
elemento , contendo o elemento para que Facelets seja “plugado” ao
JavaServer Faces.
A classe principal para compilar o documento Facelets é a SaxCompiler, encontrada no pacote
com.sun.facelets.compiler. Quando o FaceletViewHandler é inicializado, este instancia esta classe e
usa como argumento para o construtor da classe DefaultFaceletFactory (com.sun.facelets.impl).
Embora existam muitas classes em com.sun.facelets.compiler, basicamente, Facelets usa o
SAXParser para analisar gramaticalmente os documentos XHTML.
O FaceletViewHandler é invocado em duas fases do ciclo de vida de JSF: Restaurar a apresentação
e Renderizar a resposta.
Na fase de Restauração da Apresentação, a ViewHandler cria uma apresentação disponível para
processar em fases subseqüentes. Aqui, o servlet Faces procura FacesContext para a requisição. Se
FacesContext contém um UIRootView, o servlet Faces chama o método restoreView de
ViewHandler, que restabelece o estado da apresentação, armazenando o UIRootView em
FacesContext e pegando o valor destes componentes que possuem ligações em value. Se
FacesContext não contém um UIRootView existente, o servlet Faces chama o método createView de
ViewHandler, o qual cria uma nova apresentação, renderizando a resposta e armazenando o
UIRootView em FacesContext. Até o final desta fase, FacesContext contém um UIRootView, que é
uma apresentação prévia restabelecida ou uma nova apresentação.
Na fase de Renderizar a Resposta, o servlet Faces chama o método renderView da classe
ViewHandler, o que renderiza a resposta para o cliente para a atual apresentação selecionada e salva o
estado da resposta para processamento em requisições posteriores. A ViewHandler renderiza a árvore
www.integrator.com.br
Página 13

de componente JSF e delega o estado salvo para a classe StateManager. Em ambas as fases, a
ViewHandler delega a tarefa de restaurar e salvar o estado à classe StateManager.
Nota: O Eclipse IDE, através do plug-in JBoss Tools, já adiciona esses elementos configurados em
um projeto Facelets.
Para configurar o arquivo faces-config.xml por completo, você precisa adicionar a classe Controle e
determinar a navegação das futuras páginas.
A Listagem 3 mostra as configurações necessárias no arquivo faces-config.xml.
Listagem 3 – O arquivo faces-config.xml
…
controle
br.com.integrator.controller.Controle
session
/cadastro.xhtml
cadastrados
/cadastrados.xhtml
/cadastrados.xhtml
cadastro
/cadastro.xhtml
...
A página cadastrados.xhtml será exibida quando houver a string cadastrados. E cadastro.xhtml será
exibida quando houver a string cadastro.
Página 14
www.integrator.com.br

Figura 15 – Navegação das páginas
O arquivo web.xml
Para ter uma aplicação Web utilizando Facelets funcionando, é necessário também adicionar alguns
elementos no arquivo web.xml.
A principal informação adicionada no deployment descriptor para trabalhar com Facelets é mostrado
na Listagem 4 a seguir:
Listagem 4 – O arquivo web.xml
…
javax.faces.DEFAULT_SUFFIX
.xhtml
...
Observando a configuração, você percebe que o facelets vai utilizar o arquivo com extensão .xhtml
para renderizar a página JSF, que também foi exibida na configuração do arquivo faces-config.xml.
As páginas da aplicação
Com o direito sobre o diretório WebContent, no Eclipse IDE, na view Package, selecione New >
XHTML File no menu de contexto.
Na caixa de diálogo New File XHTML, digite cadastro no campo Name e clique no botão Next.
Página 15
www.integrator.com.br

Figura 16 – Criando uma página XHTML no Eclipse IDE
Na segunda e última etapa da criação da página XHTML, você tem uma série de Taglibs que podem
ser adicionadas a página que será gerada. Marque JSF Core e JSF HTML e clique no botão Finish.
Figura 17 – Adicionando as taglibs ao documento
Uma página XHTML Facelets possui o seguinte cabeçalho:
Página 16
www.integrator.com.br

Com os atributos xmlns:f e xmlns:h você configura os valores para as tags Core e HTML do JSF.
Altere a página cadastro.xhtml para o mostrado na Listagem 5 a seguir.
Listagem 5 – A página cadastro.xhtml
…
Trabalhando com Facelets
#cadastro{
margin:0;
display:block;
position: relative;
height: auto;
float: left;
padding-bottom: 10px;
}
#cadastro fieldset{
padding-left: 25px;
border: solid #CCCCCC 1px;
margin: 0 auto;
text-align: left;
width: 350px;
padding-bottom: 25px;
}
#cadastro legend{
font-weight: bold;
font-size: 11pt;
letter-spacing: 1px;
padding-bottom: 10px;
}
html>body #cadastro legend{
margin-bottom: 0px;
}
#cadastro .field{
border-top: solid #333333 1px;
Página 17
www.integrator.com.br

order-left: solid #333333 1px;
border-bottom: solid #CCCCCC 1px;
border-right: solid #CCCCCC 1px;
font-size: 13px;
margin-bottom: 10px;
color: #0E0659;
}
#cadastro label{
display: block;
width: 80px;
float: left;
color: #000;
border-bottom: 1px solid #f1f1f1;
}
#cadastro .msg{
padding-left: 5px;
}
#cadastro fieldset {
width:400px;
margin:0;
padding:5px;
}
#cadastro dd span{
padding-left: 5px;
}
Cadastro
Nome:

Observando a Listagem 5, você percebe que não precisamos da tag JSF , importantíssima no
desenvolvimento sem Facelets. A página é feita em um (X)HTML comum, formatada com CSS,
contendo em algumas tags apenas a injeção de alguns atributos. O atributo jsfc é o que determina o
componente JSF ao qual aquela tag pertence. Isso realmente facilita a vida de um designer que utiliza
um programa diferente do Eclipse IDE, como por exemplo o Dremweaver. Dentro do atributo jsfc
www.integrator.com.br
Página 19
value="#{controle.cadastro.nome}"
styleClass="field" required="true" />
E-mail:
Telefone:
...

temos o que seria o início da tag JSF. Por exemplo, um botão de envio em JSF é criado pela tag
e em Facelets pode ser feito dessa forma ou injetado no (X)HTML, como valor
do atributo jsfc, como por exemplo: jsfc= “h:commandButton”. Outros atributos específicos do JSF,
como action, value, required e styleClass também são usados.
Crie uma nova página e a chame de cadastrados.xhtml. Esta página exibirá as informações
armazenadas no List da classe Controle.
A Listagem 6 a seguir exibe a página cadastrados.xhtml.
Listagem 6 – A página cadastrados.xhtml
…
Trabalhando com Facelets
.table-header{
padding: 5px;
background-color: #CCC;
color: #FFF;
}
.col-a{
}
.col-b{
background-color: #EEE;
}
www.integrator.com.br

Novo
...
Na página cadastrados.xhtml houve uma mistura de tags (X)HTML injetadas com atributos JSF e
tags próprias do JSF. Dessa forma, podemos observar que tanto faz utilizar um modo como outro.
Porém, como já foi dito, no caso do desenvolvedor estar trabalhando com um designer Web, os
atributos JSF em tags (X)HTML serão bem mais aceitos, ajudando, inclusive, na limpeza do design da
página.
Página 21
www.integrator.com.br

Figura 18 – Resultado final das páginas Facelets renderizadas
Página 22
www.integrator.com.br