Contedo

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 PGINAS DA APLICAO ........................................................................................................ 15

Pgina 1

www.integrator.com.br

Facelets e Layout CSS

JavaServer Faces muito bom para desenvolver aplicaes Web, principalmente se voc puder contar com uma boa ferramenta como o Eclipse IDE. Entretanto, podemos unir as facilidades dos componentes Faces com as caractersticas (X)HTML. Facelets um framework de templates JavaServer Faces, baseado em alguns simples princpios: Criao de uma rvore de objetos UIComponent e contedo entrelaado completamente com o processo de ciclo de vida do JavaServer Faces; mais rpido, pois no utiliza o engine do JSP para transformar em Servlets; Suporte a templates reutilizveis, aumentando a produtividade na criao de numerosas pginas, criando uma base padro; Integrao 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 injeo de componentes JSF com um simples atributo jsfc; Erros mais amigveis e com maior preciso; Eliminao de tags JSF como <f:view/> e <f:subview/>. Graas a estas integraes, as aplicaes 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 cdigo fonte a comunidade, ao qual se criou a fundao Eclipse (Eclipse Foundation), sua grande vantagem, na atualidade, est no uso de seus assistentes de cdigo e grande gama de plug-ins, podendo se adaptar a qualquer situao de desenvolvimento. At o momento em que esse tutorial est sendo escrito, a verso mais atual do Eclipse a 3.3.

Obtendo e instalando o Eclipse IDE

Para desenvolver aplicaes 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 endereo http://www.eclipse.org/downloads/. Ao carregar a pgina, v ao link Eclipse IDE for Java EE Developers.

Figura 1 Seleo do Eclipse IDE que ser baixado na rea de downloads do site oficial

Pgina 2

www.integrator.com.br

Ao baixar, descompacte em um local desejado de sua mquina.

O plug-in JBoss Tools

Aps a descompactao do Eclipse, sem execut-lo, voc vai baixar o plug-in JBoss Tools, que auxiliar no desenvolvimento da aplicao. Entre no endereo http://www.jboss.org/projects/download/ e v at Tools. Clique no link JBoss Tools, como exibe a Figura 2.

Figura 2 Seleo do JBoss Tools para download

Aps baixar, o arquivo compactado possui um diretrio chamado eclipse, contendo a estrutura que ser necessria para ser adicionada a instalao do Eclipse atual. Simplesmente cole sobre o diretrio eclipse original, obtido da descompactao anterior, que o sistema operacional se encarregar de adicionar os plug-ins existentes.

Iniciando na plataforma Eclipse

Aps descompactar o Eclipse, voc pode inici-lo diretamente pelo executvel eclipse.exe no Windows. No Linux voc pode iniciar o Eclipse da seguinte maneira, desde que haja as devidas permisses: 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 no queira mais ter essa caixa de dilogo aparecendo, marque a opo Use this as the default and do not ask again. Confirme aps clicando no boto OK.

Pgina 3

www.integrator.com.br

Figura 3 O Workspace para o desenvolvimento das aplicaes

Baixando o JavaServer Faces

Para trabalhar com o JavaServer Faces, primeiramente ser preciso configurar os arquivos e a estrutura necessria. O container Servlet usado para este tutorial ser o Tomcat 6 que, por padro, no possui suporte direto ao JavaServer Faces, ou seja, no contm as bibliotecas necessrias para o desenvolvimento com o mesmo. Para baixar o JSF, faa download no endereo http://java.sun.com/j2ee/javaserverfaces/download.html. Como ir trabalhar com JavaServer Faces voltado para um container compatvel com a tecnologia Java EE 5, voc dever baixar a verso JSF 1.2, a utilizada nesse tutorial. Ao baixar o arquivo, simplesmente desempacote em um diretrio de sua escolha. Ateno: Caso queira utilizar o GlassFish, esse passo desnecessrio.

As bibliotecas do JavaServer Faces

Para ter o JavaServer Faces 1.2 em sua aplicao, 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. 2. 3. 4. commons-beanutils.jar commons-collections.jar commons-digester.jar commons-logging.jar

Dois JARs JSF:

Pgina 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 disponveis em sua aplicao simples, bastando apenas colocar esses arquivos listados e no diretrio lib, encontrado em WEB-INF de sua aplicao Web. Porm, como vamos utilizar um ambiente de trabalho baseado em IDE, ser mais fcil essa configurao.

Configurando o JavaServer Faces no Eclipse IDE

O JSF 1.2 no vem com o plug-in e nem com o Eclipse, assim como o Tomcat. Isso significa que voc deve adicion-lo ao projeto separadamente. Porm, como voc poder fazer mais de um projeto usando JSF, ser mais fcil criar uma biblioteca personalizada para que possamos adicionar no projeto com mais facilidade. V ao menu Window e clique em Preferences. Na caixa de dilogo 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 boto New. Na caixa de dilogo New User Library digite JSF 1.2 em User library name e confirme.

Figura 4 Adio das bibliotecas JSF 1.2 ao Eclipse IDE

Com a biblioteca selecionada, clique no boto Add JARs. Selecione os arquivos JARs (jsf-api.jar e jsf-impl.jar) descompactados do JSF 1.2 que voc baixou no incio deste captulo. Confirme a caixa de dilogo Preferences.
Pgina 5

www.integrator.com.br

Figura 5 A biblioteca de usurio JSF 1.2 configurada com os JARs

O Facelets
Voc pode baixar o Facelets na sua ltima verso no endereo 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 opes de criao de pginas com o framework JavaServer Faces devido a utilizao do plug-in JBoss Tools. V ao menu File, em New, e selecione Project. Na caixa de dilogo New Project, expanda JBoss Tools Web > JSF e selecione JSF Project. Clique no boto Next para prosseguir.

Pgina 6

www.integrator.com.br

Figura 6 Seleo 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 ento a opo FaceletsBlankWithoutLibs em Template e clique no boto Next.

Figura 7 Novo projeto JSF com Facelets

Na terceira etapa ser necessrio adicionar um servidor ao Eclipse IDE. Clique no boto New, em Runtime. Na caixa de dilogo New Server Runtime, expanda Apache e selecione Apache Tomcat v6.0. Clique no boto Next para prosseguir.
Pgina 7

www.integrator.com.br

Figura 8 Seleo do Apache Tomcat 6

Em seguida, em Tomcat installation directory, clique no boto Browse e selecione o Tomcat instalado em sua mquina. Conclua a adio do Tomcat 6 atravs do boto Finish.

Figura 9 Apache Tomcat selecionado no seu local de instalao no Windows

Aps a adio do Runtime, clique no boto Finish para concluir o assistente.

Pgina 8

www.integrator.com.br

Figura 10 Final da criao do projeto no Eclipse IDE

Assim que finalizar, a caixa de dilogo Open Associated Perspective sugira, perguntando se deseja abrir a perspectiva associada ao projeto. Clique no boto Yes para confirmar.

Figura 11 Dilogo 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 dilogo Properties for TrabComFacelets, em Java Build Path, v at a guia Libraries e clique no boto Add Library. Em Add Library selecione User Library e clique no boto Next.

Pgina 9

www.integrator.com.br

Figura 12 Adicionando uma biblioteca de usurio configurada

Na segunda etapa, selecione a biblioteca JSF 1.2 criada e clique em Finish.

Figura 13 Seleo da biblioteca JSF 1.2

Assim que finalizar, voc possui a biblioteca no projeto. Clique em J2EE Module Dependencies na lateral esquerda. Como a alterao no foi aplicada, a caixa de dilogo Setting Java Build Path surgir. Confirme no boto Apply para aplicar as alteraes. Observe que em J2EE Module Dependencies agora existe o JAR/Module JSF 1.2. Marque o checkbox e confirme.

Pgina 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 dilogo 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 mtodos Getters e Setters no Eclipse, v ao menu Source > Generate Getters and Setters. Clique no boto Select All na caixa de dilogo Generate Getters and Setters e confirme.

Figura 14 Gerando Getters e Setters no Eclipse IDE

Pgina 11

www.integrator.com.br

O Bean Cadastro possui apenas trs atributos necessrios, com os mtodos getters e setters, para que os valores sejam enviados pelos campos de um formulrio 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<Cadastro> cadList = new ArrayList<Cadastro>(); 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";
Pgina 12

www.integrator.com.br

} }

Faa as importaes da classe com o atalho Ctrl + Shift + O . Com a inteno de simular um banco de dados nesse exemplo, voc cria na classe um List da classe Cadastro. Para salvar o cadastro, a pgina que ser criada chamar o mtodo salvar() que, por sua vez, chama o mtodo adicionar(), transmitindo como parmetro a instncia de Cadastro, que popular o List. A pgina que ser exibida aps o cadastro, exibir os dados salvos no List, atravs de uma tabela populada pelo mtodo getTodos(), que retorna um DataModel, da classe Controle.

O arquivo faces-config.xml
Para que o Facelets funcione em sua aplicao Web, necessrio configurar o arquivo facesconfig.xml com a seguinte linha: <application> <view-handler>com.sun.facelets.FaceletViewHandler</view-handler> </application> Uma das grandes caractersticas de JavaServer Faces a sua flexibilidade. Ele desenhado com um nmero de interfaces plugveis, e uma delas ViewHandler. Ento necessrio adicionar um elemento <application/>, contendo o elemento <view-handler/> 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 apresentao e Renderizar a resposta. Na fase de Restaurao da Apresentao, a ViewHandler cria uma apresentao disponvel para processar em fases subseqentes. Aqui, o servlet Faces procura FacesContext para a requisio. Se FacesContext contm um UIRootView, o servlet Faces chama o mtodo restoreView de ViewHandler, que restabelece o estado da apresentao, armazenando o UIRootView em FacesContext e pegando o valor destes componentes que possuem ligaes em value. Se FacesContext no contm um UIRootView existente, o servlet Faces chama o mtodo createView de ViewHandler, o qual cria uma nova apresentao, renderizando a resposta e armazenando o UIRootView em FacesContext. At o final desta fase, FacesContext contm um UIRootView, que uma apresentao prvia restabelecida ou uma nova apresentao. Na fase de Renderizar a Resposta, o servlet Faces chama o mtodo renderView da classe ViewHandler, o que renderiza a resposta para o cliente para a atual apresentao selecionada e salva o estado da resposta para processamento em requisies posteriores. A ViewHandler renderiza a rvore
Pgina 13

www.integrator.com.br

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, atravs 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 navegao das futuras pginas. A Listagem 3 mostra as configuraes necessrias no arquivo faces-config.xml. Listagem 3 O arquivo faces-config.xml <managed-bean> <managed-bean-name>controle</managed-bean-name> <managed-bean-class> br.com.integrator.controller.Controle </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/cadastro.xhtml</from-view-id> <navigation-case> <from-outcome>cadastrados</from-outcome> <to-view-id>/cadastrados.xhtml</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/cadastrados.xhtml</from-view-id> <navigation-case> <from-outcome>cadastro</from-outcome> <to-view-id>/cadastro.xhtml</to-view-id> </navigation-case> </navigation-rule> ... A pgina cadastrados.xhtml ser exibida quando houver a string cadastrados. E cadastro.xhtml ser exibida quando houver a string cadastro.
Pgina 14

www.integrator.com.br

Figura 15 Navegao das pginas

O arquivo web.xml
Para ter uma aplicao Web utilizando Facelets funcionando, necessrio tambm adicionar alguns elementos no arquivo web.xml. A principal informao adicionada no deployment descriptor para trabalhar com Facelets mostrado na Listagem 4 a seguir: Listagem 4 O arquivo web.xml <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> ...

Observando a configurao, voc percebe que o facelets vai utilizar o arquivo com extenso .xhtml para renderizar a pgina JSF, que tambm foi exibida na configurao do arquivo faces-config.xml.

As pginas da aplicao
Com o direito sobre o diretrio WebContent, no Eclipse IDE, na view Package, selecione New > XHTML File no menu de contexto. Na caixa de dilogo New File XHTML, digite cadastro no campo Name e clique no boto Next.

Pgina 15

www.integrator.com.br

Figura 16 Criando uma pgina XHTML no Eclipse IDE

Na segunda e ltima etapa da criao da pgina XHTML, voc tem uma srie de Taglibs que podem ser adicionadas a pgina que ser gerada. Marque JSF Core e JSF HTML e clique no boto Finish.

Figura 17 Adicionando as taglibs ao documento

Uma pgina XHTML Facelets possui o seguinte cabealho: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
Pgina 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 pgina cadastro.xhtml para o mostrado na Listagem 5 a seguir. Listagem 5 A pgina cadastro.xhtml <head> <title>Trabalhando com Facelets </title> <style> #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;
Pgina 17

www.integrator.com.br

border-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; } </style> </head> <body> <form jsfc="h:form"> <div id="cadastro"> <fieldset> <legend>Cadastro</legend> <label jsfc="h:outputLabel" for="nome"> Nome: </label> <input jsfc="h:inputText" type="text" id="nome"
Pgina 18

www.integrator.com.br

value="#{controle.cadastro.nome}" styleClass="field" required="true" /> <span jsfc="h:message" for="nome"> </span> <br /> <label jsfc="h:outputLabel" for="email"> E-mail: </label> <input jsfc="h:inputText" type="text" id="email" value="#{controle.cadastro.email}" styleClass="field" required="true" /> <span jsfc="h:message" for="email" > </span> <br /> <label jsfc="h:outputLabel" for="telefone"> Telefone: </label> <input jsfc="h:inputText" type="text" id="telefone" value="#{controle.cadastro.telefone}" styleClass="field" required="true" size="9" /> <span jsfc="h:message" for="telefone"> </span> <br /> <br /> <input jsfc="h:commandButton" type="submit" action="#{controle.salvar}" id="confirmar" value="Salvar"/> </fieldset> </div> </form> ...

Observando a Listagem 5, voc percebe que no precisamos da tag JSF <f:view/>, importantssima no desenvolvimento sem Facelets. A pgina feita em um (X)HTML comum, formatada com CSS, contendo em algumas tags apenas a injeo 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
Pgina 19

www.integrator.com.br

temos o que seria o incio da tag JSF. Por exemplo, um boto de envio em JSF criado pela tag <h:commandButton/> 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 especficos do JSF, como action, value, required e styleClass tambm so usados. Crie uma nova pgina e a chame de cadastrados.xhtml. Esta pgina exibir as informaes armazenadas no List da classe Controle. A Listagem 6 a seguir exibe a pgina cadastrados.xhtml. Listagem 6 A pgina cadastrados.xhtml <title>Trabalhando com Facelets </title> <style> .table-header{ padding: 5px; background-color: #CCC; color: #FFF; } .col-a{ } .col-b{ background-color: #EEE; } </style> </head> <body> <form jsfc="h:form"> <span jsfc="h:messages"></span> <table jsfc="h:dataTable" id="tabela" value="#{controle.todos}" var="item" cellpadding="0" cellspacing="0" headerClass="table-header" columnClasses="col-a, col-b" border="1"> <tr> <td jsfc="h:column"> <f:facet name="header"> <h:outputText value="Nome"/>
Pgina 20

www.integrator.com.br

</f:facet> <h:outputText value="#{item.nome}"/> </td> <td jsfc="h:column"> <f:facet name="header"> <h:outputText value="E-mail"/> </f:facet> <h:outputText value="#{item.email}"/> </td> <td jsfc="h:column"> <f:facet name="header"> <h:outputText value="Telefone"/> </f:facet> <h:outputText value="#{item.telefone}"/> </td> </tr> </table> <a jsfc="h:commandLink" action="#{controle.novo}"> Novo </a> </form> ...

Na pgina cadastrados.xhtml houve uma mistura de tags (X)HTML injetadas com atributos JSF e tags prprias do JSF. Dessa forma, podemos observar que tanto faz utilizar um modo como outro. Porm, como j foi dito, no caso do desenvolvedor estar trabalhando com um designer Web, os atributos JSF em tags (X)HTML sero bem mais aceitos, ajudando, inclusive, na limpeza do design da pgina.

Pgina 21

www.integrator.com.br

Figura 18 Resultado final das pginas Facelets renderizadas

Pgina 22

www.integrator.com.br