Conteúdo.

Transcrição

1 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 O ARQUIVO FACES-CONFIG.XML O ARQUIVO WEB.XML AS PÁGINAS DA APLICAÇÃO Página 1

2 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 <f:view/> e <f:subview/>. 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 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

3 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 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

4 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 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

5 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

6 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 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

7 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

8 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. Página 8

9 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

10 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

11 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 ; 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

12 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<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"; Página 12

13 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: <application> <view-handler>com.sun.facelets.faceletviewhandler</view-handler> </application> 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 <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 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 Página 13

14 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 <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 página cadastrados.xhtml será exibida quando houver a string cadastrados. E cadastro.xhtml será exibida quando houver a string cadastro. Página 14

15 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 <context-param> <param-name>javax.faces.default_suffix</param-name> <param-value>.xhtml</param-value> </context-param>... 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

16 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: <html xmlns=" xmlns:f=" xmlns:h=" Página 16

17 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 <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 # px; Página 17

18 border-left: solid # px; 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" Página 18

19 value="#{controle.cadastro.nome" styleclass="field" required="true" /> <span jsfc="h:message" for="nome"> </span> <br /> <label jsfc="h:outputlabel" for=" "> </label> <input jsfc="h:inputtext" type="text" id=" " value="#{controle.cadastro. " styleclass="field" required="true" /> <span jsfc="h:message" for=" " > </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 não precisamos da tag JSF <f:view/>, 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 Página 19

20 temos o que seria o início da tag JSF. Por exemplo, um botão 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 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 <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"/> Página 20

21 </f:facet> <h:outputtext value="#{item.nome"/> </td> <td jsfc="h:column"> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:outputtext value="#{item. "/> </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 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

22 Figura 18 Resultado final das páginas Facelets renderizadas Página 22