JSF. Versão 1.0. Apostila destinada ao curso com carga horária de 32 (trinta e duas) horas

Transcrição

1 JSF JavaServer Faces, é um Framework Web no padrão MVC como o objetivo de simplificar a construção de interfaces com o usuário para aplicações Java Web e fazer componente UI reutilizável fácil de implementar. Ao contrário da versão anterior da JSF, para a versão 2.0 quase tudo é declarado no arquivo faces-config.xml, além disso foi disponibilizada a permissão para usar anotações para navegação declarada, foi proposto o CDI Bean, o que torna o desenvolvimento mais fácil e mais rápido. JSF é uma excelente tecnologia JAVA no campo de desenvolvimento de aplicações Web. Este é o melhor lugar para passar conceitos JSF de maneira fácil e sequencial. Versão 1.0 Apostila destinada ao curso com carga horária de 32 (trinta e duas) horas

2 Sumário 1. JavaServer Faces...4 Características da JSF Ajax com JSF...6 Enviar uma solicitação do Ajax...6 Renderizar a visão parcial...6 Processar a visão parcial...7 Outro Exemplo Navegação...10 Navegação estática e dinâmica...10 Navegação Estática...11 Navegação Dinâmica...13 Outros detalhes...14 Especificar wild-cards Facelets...16 Por que usar Facelets?...16 JSF 2 Templating com exemplo Facelets Layout do modelo Cabeçalho, Conteúdo e Rodapé Utilizando template Richfaces...22 Baixar os RichFaces...22 Adicionar as bibliotecas RichFaces para o projeto...22 Registrar o RichFaces no web.xml...22 managed bean...24 Demonstração dos Componentes Primefaces...28 Características do PrimeFaces...28 Aplicativo Exemplo Validação e Conversão...36 Fases do Ciclo de Vida...37 Sobre o atributo imediato...37 Um exemplo de trabalho...38 Conversão...38 Um conversor para cada ocasião...39 Conversores Personalizados...39 Validação...42 Validação e o Ciclo de Vida da JSF e seus componentes...42 Padrão de Validação JSF e Spring...44 Lado Spring...44 Lado Java Server Faces...45 Spring Beans no ambiente JSF de 50

3 Apoio da API para a integração JSF e Seam Integração com JSF com EJB Integração com AJAX Formulário Master/Detail de 50

4 1. JavaServer Faces Quais são as razões que iniciaram o projeto JSF e porque está tão falado estes dias? Há razões para o desenvolvimento de um novo framework apesar das muitas tecnologias já existentes como JSP, Servlets, Struts, entre outras. Ao desenvolver aplicações complexas Web baseadas em JSP, existe um problema enfrentado com essas tecnologias. Vejamos uma lista de alguns dos problemas enfrentados com as tecnologias anteriores, como JSP e Servlets: Codificação tediosa e repetitiva Tecnologias anteriores, como JSP obrigam ao programador realizar um monte de codificação tediosas e repetitivas. Trabalhar diretamente com HTTP Request e HTTP Response Usar estas tecnologias os programadores trabalham diretamente com um solicitação HTTP e responde com objetos que manipula os registros. Por exemplo se o usuário submete o formulário de inscrição, em seguida, o programador escreve o código para obter os valores de cada elemento na forma em que uma variável realiza um posterior processamento. Quando existe a necessidade de recuperar os registros no banco de dados e, em seguida, mostrar no formulário de edição, então, neste caso, o programador escreve o código para recuperar o registro no banco de dados e em seguida, defina os valores nos formulários. Não disponibilidade de IDE É outro grande problema que afeta o custo programadores produtividade e desenvolvimento dos aumentos projetos. JSF muda esse cenário, fornecendo uma estrutura intuitiva para os desenvolvedores. Além disso, JSP é uma especificação na qual muitos fornecedores estão desenvolvendo suas próprias implementações. Ambas as implementações livres e comerciais de JSF estão disponíveis estes dias. Pode-se escolher qualquer um deles com base em sua necessidade e orçamento. Agora, em alguns dias os fornecedores de software estarão desenvolvendo uma IDE para o desenvolvimento de aplicativos baseados em JSF que é uma boa notícia para os iniciantes. Uma vez que familiarizado com os conceitos fundamentais do JSF pode-se iniciar o desenvolvimento de projetos de software usando qualquer IDE disponível no mercado. Estas mudanças permitem que o programador torne seu trabalho muito mais fácil. JSF é um componente de estrutura orientada e dirigida a eventos para aplicações Web. Facilita o desenvolvimento de GUI para aplicações Web. JSF permite que os programadores trabalhem com as interfaces extensíveis como botões, caixas de texto, caixas, entre outras. O programador escreve o código para um determinado evento, tais como o botão clicado. Isto faz com que a programação seja muito mais fácil e agora não há necessidade de escrever uma requisição e lógica de processamento de resposta. Características da JSF Uma das característica principais do JSF é que não só foi projetado para a codificação por 4 de 50

5 parte dos especialistas, mas para: Autores de Páginas Web designers possuem a experiência com arte gráfica. Podem observar e sentir o projeto de aplicação web em HTML/JSP utilizando bibliotecas de marcas personalizadas de JSF. Desenvolvedores de Aplicativos podem integrar este projeto com componentes de interface do usuário. objetos de programa, iniciadores de eventos, conversores, validadores. Desenvolvedores de Componentes podem construir componentes de interface personalizados por causa da natureza extensível e personalizável da JSF. Podem criar seus próprios componentes diretamente de classes de componentes de interface do usuário ou estender os componentes padrão do JSF. Arquitetos de Aplicativos responsáveis pela criação de aplicativos Web. Definição de navegação de página, garantindo escalabilidade para a aplicação, configurando registro o objeto bean são os principais pontos que um arquiteto de aplicativos trata. Fornecedores de Ferramentas JSF é bem adequado para os fornecedores de ferramentas, por exemplo, Sun Java Studio Creator é uma ferramenta de desenvolvimento de aplicativos, que fornecem ferramentas que tiram vantagens do JSF para criar interface do usuário mais fácil. Muitos dos frameworks de desenvolvimento Web surgiram após uma fundamentada existência de Servlet e JSP. Struts surgiu como uma estrutura padrão de aplicativos Web. Tornou-se um framework padrão, porque chegou mais cedo no mercado e com as características necessárias, e os concorrentes tiveram que adicionar os recursos que faltavam para o Struts para obterem sucesso. Assim, tornou-se necessário para Java o advento de um novo framework padrão como um modelo de componente poderoso. Esta foi a principal razão para o desenvolvimento da tecnologia JSF. Então o principal propósito de desenvolver a JSF, foi criar uma coleção de APIs para os componentes de interface com a capacidade de gerir seus estados, manipular os eventos e validação. Struts possui a opção de migrar para JSF. A opção mais simples é usar os componentes. Isto permite tirar proveito de componentes de terceiros. A principal característica da JSF é a facilidade de uso. Torna o desenvolvimento de aplicações Web mais fácil e mais rápido do que em outros frameworks porque suporta componentes de interface do usuário e uma fácil manipulação de eventos. Possui componentes construído por terceiros que pode reduzir o custo de reescrever os elementos existentes e minimizar o tempo de desenvolvimento. 5 de 50

6 2. Ajax com JSF Conforme colocado na capa desta a JSF 2.0 foi uma grande atualização sobre a JSF 1.2, uma das adições mais importantes para essa versão foi quanto ao suporte padrão para Ajax. Muitos conceitos e características são realizados ao longo do RichFaces. JSF vem com uma tag que fornece a funcionalidade Ajax. A tag é chamada de <f:ajax>. Vamos dividir o uso desta tag em três partes: 1. Enviar uma solicitação para o Ajax; 2. Renderizar a visão parcial; 3. Processar a visão parcial. Enviar uma solicitação do Ajax JSF vem com uma tag para enviar uma solicitação do Ajax. Esta tag é realmente um comportamento do lado cliente, e implica não ser utilizado isoladamente em uma página, é sempre adicionado uma tag filha (comportamento) para outro componente da interface do usuário (ou pode até mesmo envolver vários componentes). Usaremos um simples aplicativo para demonstrar essa utilização: <h:form> <h:panelgrid> <h:inputtext value="#{bean.texto"> <f:ajax event="keyup"/> </h:inputtext> <h:outputtext id="texto" value="#{bean.texto" /> </h:panelgrid> </h:form> No trecho de código acima devemos tomar cuidado ao disparar uma solicitação Ajax com base no evento onkeyup. Observe que o nome real do evento é keyup. Este cuida de em disparar uma solicitação do Ajax. Em seguida, precisamos descobrir como fazer o processamento da visão parcial. Renderizar a visão parcial Em JSF 1.2 (e sem RichFaces) cada pedido retorna uma visão. Não necessitamos preocupar com que partes da visão JSF queremos atualizar. O conceito básico por trás de Ajax é atualizar apenas as partes da página que realmente precisam. Para conseguir isso, devemos informar esses componentes para o servidor cuja marcação iremos atualizar no navegador. O que tudo isto significa? Agora precisamos especificar quais componentes de visão queremos retornar. Uma visão parcial é processada pelo servidor. Uma parcela é atualizada e enviada como XML para o navegador onde o DOM é atualizado. Este exemplo não é apenas um componente com o texto id. A tag tem um atributo de renderização que aponta para o ID do componente para renderizar a volta. Poderia também ser uma EL (Expression Language). Somando-se ao nosso exemplo, se pareceria com isso: 6 de 50

7 <h:inputtext value="#{bean.texto" > <f:ajax event="keyup" render="texto"/> </h:inputtext> <h:outputtext id="texto" value="#{bean.texto" /> Ao usar RichFaces, o mesmo atributo é chamado rerender. O evento que é especificado através do atributo deve ser um no qual o componente pai suporta. Ao visualizar o HTML gerado, teremos: <input id="j_idt5:j_idt7" type="texto" name="j_idt5:j_idt7" onkeyup="mojarra.ab(this, event, 'keyup', 0, 'j_idt5:texto')" /> Processar a visão parcial Ao especificar um evento que não está disponível no componente pai, uma mensagem de erro será exibida ao executar a página. Vejamos agora o código do = "bean") public class Bean { private String texto; // Métodos padrão GET e SET Vamos supor que também queremos mostrar e atualizar um contador com o comprimento do texto. Adicionar um nova propriedade no bean: private Integer tamanho; // Métodos padrão GET e SET Também adicionamos um método ouvinte Ajax para realizar a contagem, observe que o método recebe um objeto da classe AjaxBehaviorEvent: public void tamanholistener(ajaxbehaviorevent event) { tamanho = texto.length(); Atualizar a página: <h:inputtext value="#{bean.texto" > <f:ajax event="keyup" render="texto tamanho" listener="#{bean.tamanholistener"/> </h:inputtext> <h:outputtext id="texto" value="#{bean.texto" /> <h:outputtext id="tamanho" value="#{bean.tamanho" /> Adicionamos um identificador para tamanho, use espaço como um separador. No exemplo acima, especificamos que o mesmo deve disparar uma solicitação Ajax e temos de especificar um evento. Se não for especificado, cada componente da interface do usuário tem um evento padrão na qual o pedido Ajax usaria para enviar. A tag <h:inputtext>, o padrão evento Ajax é o evento onchange. Nosso exemplo, no entanto, funcionaria, só que ao em vez de onkeyup, teria que usar a tecla tab ou sair do campo de entrada para disparar a requisição Ajax. 7 de 50

8 Outro Exemplo Agora que já estamos familiarizados como o Ajax funciona vejamos esse outro exemplo, comecemos pelo Bean: import javax.faces.event.actionevent; import javax.faces.model.managedbean; public class Calcula { private Integer conta = 0; public Integer getconta() { return conta++; public void reset(actionevent ae) { conta = 0; Neste exemplo temos um contador para criarmos um simples aplicativo como um cronômetro. Um bean simples é utilizado para armazenar a contagem, bem como incrementá-la e redefini-la. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" <h:head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>ajax</title> </h:head> <h:body> <h:form id="form1" prependid="false"> <h:outputscript name="jsf.js" library="javax.faces" target="head"/> <h:outputtext id="cta" value="#{calcula.conta"/> <br/> <!-- Incrementar o contador no servidor e no cliente --> <h:commandbutton id="btcontar" value="contar" onclick="jsf.ajax.request(this, event, {execute: this.id, render: 'cta'); return false;"/> <br/> <!-- Reiniciar o contador --> <h:commandbutton id="btreiniciar" value="reiniciar" onclick="jsf.ajax.request(this, event, {execute:'reset', render: 'cta'); return false;" actionlistener="#{calcula.reset"/> </h:form> </h:body> </html> 8 de 50

9 Neste formulário temos três widgets: Um outputtext e dois CommandButtons. O "cta" tem o conteúdo do valor da contagem. "btcontar" adiciona um elemento ao contador a "cta" e reprocessa apenas o campo, ou seja, não há recarga completa da página. Da mesma forma, "btreiniciar" redefine o valor do contador para 0. A tag <h:outputscript> informa que devemos incluir a biblioteca ajax em nossa página. Isto é necessário para a chamada para o response de jsf.ajax.request. O mesmo texto de saída "cta" é o alvo do ajax, não contém qualquer marcação fora do comum. Temos "btcontar" no qual o método onclick faz duas ações: Uma chamada jsf.ajax.request Retornar false. O retorno falso, para aqueles que não conhecem JavaScript, significa que não deve executar a submissão do formulário. A chamada jsf.ajax.request, possui tem três parâmetros: 1. O objeto de chamada 2. O evento de chamada. 3. O último parâmetro é um objeto JavaScript com duas propriedades - uma executa a propriedade, que tem a lista de ids de todos os componentes JSF que vamos executar - já que estamos executando este botão, vamos incluí-lo na lista como 'this.id'. A segunda propriedade é todos os componentes JSF que queremos atualizar que neste caso, é apenas "cta. Por último, temos o botão btreiniciar com o evento onclick praticamente idêntico, mas não há um atributo adicional, "actionlistener". Desde já estamos executando um 'reset', que significa que o JSF vai chamar esse método como parte do botão. 9 de 50

10 3. Navegação O modelo de navegação JSF é tanto declarativa quanto programática, ou seja, a navegação pode ser configurada estaticamente em tempo de implantação ou dinamicamente durante o tempo de execução de uma aplicação Web. Navegação de página para a aplicação JSF é tratado através de regras de navegação em um arquivo de configuração. A navegação pode especificar qual o componente que inicia a solicitação de Web, qual componente Web controla a resposta, e que valor faz com que a navegação para seguir o fluxo. Até agora, vimos uma navegação apenas com base no valor da sequência codificada de um atributo action. Também podemos controlar a navegação usando as expressões de ligação de valor e método de ligação de expressões. Navegação, em seguida, depende do valor da expressão. Navegação estática e dinâmica Ao controlar a navegação através de valores de String do atributo action, o caminho de navegação deve ser conhecido quando o aplicativo é implantado. Chamamos isso de Navegação Estática, porque o fluxo é determinado estaticamente e não é modificado. Sendo o mesmo para cada solicitação. Quando usamos a navegação estática, codificamos explicitamente um valor para o atributo ação de uma Custom tag JSF. Ao definir as regras de navegação em um arquivo de configuração. A regra especifica o fluxo de navegação quando o <from-outcome> de uma página coincide com o valor do atributo action. Quando isso ocorre, a navegação flui para o <to-view-id> especificado. Estes elementos são parte de um elemento de regra de navegação em um arquivo de configuração, o faces-config.xml. Ao controlar a navegação através do valor de expressões de ligação ou métodos de ligação de expressões, o caminho de navegação não conhece quando o aplicativo é implantado. Na verdade, o fluxo de navegação pode variar de acordo com a solicitação pedida, dependendo do valor da expressão. Chamamos isso de Navegação Dinâmica. Para uma navegação dinâmica, usamos uma expressão de valor de ligação ou o método de ligação de expressão, como o valor do atributo action. Com um valor de expressões de ligação, o valor da propriedade deve ser do tipo String. Com o método de expressões de ligação, o método não obtém parâmetro e retorna um valor do tipo String: public String search(); O valor String retornado pelo método é comparado ao valor especificado na regra de navegação para determinar aonde o fluxo de controle deve ir. Resumidamente: Navegação Estática é recomendado quando a saída de uma página é conhecido com antecedência e é sempre mais fácil prever a saída da página atual. Navegação Dinâmica quando a saída da página atual é altamente imprevisível e a saída depende, principalmente, a execução de alguma regra de negócio. 10 de 50

11 Navegação Estática Como mencionado anteriormente, se a resposta da página é conhecido antecipadamente, então este tipo de navegação pode ser escolhido. Tomemos um exemplo para ilustrar isso. Vamos exibir uma página da Web (a página de login) que solicita a entrada do usuário como o nome de usuário e a senha. Uma vez que esses valores são inseridos e o formulário é enviado, em seguida, uma página de boas-vindas é exibida. Aqui sabe-se que o resultado da página de login é sempre a página de boas vindas. login.jsp <%@ taglib prefix="f" uri=" %> <%@ taglib prefix="h" uri=" %> <html> <head> <title>aplicação de Login</title> </head> <body> <h1>aplicação de Login</h1> <f:view> <h:form> <p>login: <h:inputtext value="#{loginbean.username" id="usernametextfield" required="true"/> <h:message for="usernametextfield" /> </p> <p>senha: <h:inputsecret value="#{loginbean.password" id="passwordtextfield" required="true"/> <h:message for="passwordtextfield" /> </p> <h:commandbutton value="submit Values" action="loginwelcome"/> </h:form> </f:view> </body> </html> Contém os campos de entrada do usuário para usuário e senha é mostrada a seguir. Um botão está ligado na extremidade da forma de apresentação da informação pedido para o servidor. LoginBean.java package net.javabeat.articles.jsf.navigation; public class LoginBean { private String username; private String password; public LoginBean() { public String getusername() { 11 de 50

12 return username; public void setusername(string username) { this.username = username; public String getpassword() { return password; public void setpassword(string password) { this.password = password; A classe UserBean encapsula o nome de usuário e senha para as propriedades que detém a informação solicitada. O nome do usuário e os valores da senha digitada pelo usuário será mapeada diretamente para UserBean.username e UserBean.password através de '#{UserBean.username' as expressões e '#{UserBean.password'. faces-config.xml <?xml version='1.0' encoding='utf-8'?> <faces-config version="1.2" xmlns=" xmlns:xsi=" xsi:schemalocation=" <managed-bean> <managed-bean-name>loginbean</managed-bean-name> <managed-bean-class> net.javabeat.articles.jsf.navigation.loginbean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <description></description> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>loginwelcome</from-outcome> <to-view-id>/loginwelcome.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config> Este arquivo de configuração contém uma entrada de definição do bean gerenciado por LoginBean através do elemento "managed-bean. Em seguida, vem a parte mais importante que está relacionada ao Tratamento da navegação. Definimos a regra de navegação para a página login.jsp através dos elementos de regra de navegação fromview-id. A presença de from-view-id é que a regra será aplicável para o resultado da página login.jsp. Em seguida, definimos um elemento interno chamado de navegação que define uma saída possivelmente o único para a página atual. Note a presença de elementos from-outcome e to-view-id. 12 de 50

13 O valor LoginWelcome representa um dos resultados lógicos da página login.jsp. O valor para to-view-id aponta para a página de resposta seguinte a ser exibida. Para resumir, se a página atual é login.jsp e no resultado da página é "loginwelcome, então a próxima página a ser exibida é a loginwelcome.jsp. Navegação Dinâmica Vejamos como controlar o comportamento de uma navegação dinâmica nesta seção. Vamos estender o exemplo acima para fazer isso. Neste momento, exibmos uma página de sucesso de login quando o nome de usuário e senha são valores combinados 'guest', mais uma página de falha de logon é exibida. Como os valores são inseridos pelo usuário apenas no tempo de execução, a próxima exibição a ser exibida não pode ser prevista. Isto significa que o ponto de vista seguinte a ser selecionado depende da execução de alguma regra de negócios no código. Adicione o seguinte método na classe LoginBean: public String nextpage() { if (username.equals("guest") && password.equals("guest")) { return "loginsuccess"; return "loginfailure"; O método nextpage() determina a próxima página a ser exibida com base nos valores do nome de usuário e a senha. Se tanto o nome de usuário e senha é 'guest' uma página de sucesso de login será exibida. Estamos retornando loginsucess (para o sucesso da entrada) e loginfailure (para falha na entrada). Adicione o seguinte regra de navegação no arquivo faces-config.xml: <navigation-rule> <description></description> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>loginsuccess</from-outcome> <to-view-id>/loginsuccess.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>loginfailure</from-outcome> <to-view-id>/loginfailure.jsp</to-view-id> </navigation-case> </navigation-rule> Adicionamos dois elementos navigation-case para a página de login, uma para o sucesso e outra para o fracasso. O arquivo de configuração mostra a página login.jsp, se o resultado lógico for loginsuccess, em seguida, mostrar a página loginsuccess.jsp. Caso contrário, se o resultado lógico for loginfailure, depois a página loginfailure.jsp deve ser exibida. A página loginsuccess.jsp apenas exibe uma mensagem de Login Bem-Sucedido junto ao nome do usuário que é retirado do bean gerenciado por LoginBean. 13 de 50

14 loginsuccess.jsp taglib prefix="f" uri=" %> taglib prefix="h" uri=" %> <html> <head> <title>sucesso no Login</title> </head> <body> <h3>entrada com Sucesso</h3> <f:view> <h:form> <p>você teve sucesso com o Login.<p/> <p>bem vindo <h:outputtext value="#{loginbean.username"/><p/> </h:form> </f:view> </body> </html> loginfailure.jsp <%@ taglib prefix="f" uri=" %> <%@ taglib prefix="h" uri=" %> <html> <head> <title>login Falhou</title> </head> <body> <h3>login Falhou</h3> <f:view> <h:form> <p>o login id <h:outputtext value="#{loginbean.username"/> não é encontrado.<p/> <p>por favor tente novamente...</p> </h:form> </f:view> </body> </html> Outros detalhes Para finalizar, veremos os detalhes left-over do mecanismo de Navegação da JSF. Vamos cobrir o uso do elemento "request" bem como da especificação do uso wild-strings. Normalmente, quando um redirecionamento é encontrado pelo servidor, a solicitação atual for encerrada, o controle é redirecionado para o navegador e este faz a requisição (que está disponível como a URL na instrução de redirecionamento). O mesmo acontece aqui também. Considere o seguinte elemento: <navigation-case> <from-outcome>loginfailure</from-outcome> <to-view-id>/loginfailure.jsp</to-view-id> <redirect/> </navigation-case> 14 de 50

15 Suponha-se, que o resultado da página login.jsp é loginfailure.jsp. Se o redirecionamento do elemento não está presente no arquivo de configuração, então a URL do navegador ainda mostra o login.jsp e não loginfailure.jsp (embora o conteúdo exibido no navegador será loginfailure.jsp). A presença do elemento redirecionará o controle do servidor para o navegador e é feita uma solicitação para a página de destino loginfailure.jsp. Especificar wild-cards Também é possível especificar um caractere wild-card (*) no elemento 'from-view-id'. Por exemplo, digamos que desejamos lidar com o mecanismo de navegação para todos os arquivos JSF dentro da pasta "registo", então podemos ter o seguinte elemento: <navigation-rule> <from-view-id>/registro/*</from-view-id> <navigation-case>... </navigation-case> </navigation-rule> 15 de 50

16 4. Facelets Enquanto JavaServer Faces e JSP são feitos para serem alinhados, Facelets estão fora da especificação JSP e fornece uma alta performance, a JSF tecnologia é centrada no ponto de vista. Qualquer um que tenha criado uma página JSP será capaz de fazer o mesmo com Facelets e utilizar a familiaridade de tags no padrão XML. A diferença está internamente, onde toda a carga do fornecedor JSP é removida para aumentar consideravelmente a JSF como uma plataforma que pode proporcionar o simples desenvolvimento plug-and-go sem a necessidade de desenvolvimento de tags JSP. Aqui está um exemplo de como é fácil definir uma visão com Facelets: <html xmlns=" xmlns:h=" xmlns:c=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>hello</title> </head> <body> <form id="helloform" jsfc="h:form"> <h2>oi. Meu nome é Duke. Estou pensando em um número entre #{UserNumberBean.minimum e #{UserNumberBean.maximum. Pode advinhar qual é? </h2> <img id="waveimage" src="wave.med.gif" /> <input type="text" jsfc="h:inputtext" id="userno" value="#{usernumberbean.usernumber" validator="#{usernumberbean.validate"/> <input type="submit" jsfc="h:commandbutton" id="submit" action="success" value="submeter" /> <p /> <h:message showsummary="true" id="errors1" for="userno"/> <p /> <c:foreach begin="1" end="4" varstatus="v"> #{view.viewid #{v.index<br/> </c:foreach> </form> </body> </html> Você pode estar pensando que a marcação parece extremamente familiar. Esse é o ponto. Não existe qualquer necessidade de aprender uma outra linguagem de templates ou esquema. Por que usar Facelets? Facelets não é dependente de um contêiner JSP. Isso significa que podemos começar a usar os novos recursos de JSF. Aqui está uma pequena lista dos recursos do Facelets: Trabalha com JSF 1.1 e JSF 1.2, incluindo a RI da Sun e o Apache MyFaces. 16 de 50

17 Tempo zero para o desenvolvimento de tags para UIComponents Rápido templating/decoradores para componentes e Páginas Capacidade de especificar UIComponents em arquivos separados Line Tag Atribute, erros são reportados precisamente Especificar as tags em arquivos separados, mesmo embalado com jar Suporte a EL completo, incluindo funções Em tempo de compilação Validação EL Arquivos de configuração XML não são necessárias, mas estão disponíveis Todos os desenvolvedores desejam um projeto mais amigável. Desenvolvedores passam um tempo considerável definindo: UIComponents, Conversores e Validadores no arquivo facesconfig.xml. Facelets só exige a especificação de um apelido ao nome para ligar seus objetos em suas páginas (sem XML necessário). A chave é a facilidade de integração e desenvolvimento. JSF 2 Templating com exemplo Facelets Neste exemplo, mostramos a utilização de 4 tags Facelets para construir a página a partir de um modelo: ui:insert Usado em arquivo de modelo, define o conteúdo que vai substituir pelo arquivo que carrega o modelo. O conteúdo pode ser substituir por um tag ui:define. ui:define Define o conteúdo que é inserido no modelo com uma correspondência pela tag ui:insert. ui:include Semelhante a tag jsp:include do JSP padrão, inclui o conteúdo de outra página XHTML. ui:composition Se for usado com um atributo "template", o modelo especifico é carregado, e os filhos desta tag definem o layout do modelo, caso contrário, é um grupo de elementos, que pode ser inserido em algum lugar. Além disso, JSF remove as tags outside da tag ui:composition. 1. Layout do modelo Para JSF, um arquivo modelo é apenas um simples arquivo XHTML, com poucas tags no padrão Facelets para definir o layout do modelo. commonlayout.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" 17 de 50

18 xmlns:ui=" <h:head> <h:outputstylesheet name="common-style.css" library="css" /> </h:head> <h:body> <div id="page"> <div id="header"> <ui:insert name="header"> <ui:include src="/template/common/commonheader.xhtml" /> </ui:insert> </div> <div id="content"> <ui:insert name="content" > <ui:include src="/template/common/commoncontent.xhtml" /> </ui:insert> </div> <div id="footer"> <ui:insert name="footer" > <ui:include src="/template/common/commonfooter.xhtml" /> </ui:insert> </div> </div> </h:body> </html> Neste modelo, definimos o layout da Web padrão, com os seguintes detalhes: Usamos a tag h:outputstylesheet para incluir um arquivo CSS no cabeçalho para denominar o layout de página inteira. Usamos a tag ui:insert para definir três seções substituíveis: cabeçalho, conteúdo e rodapé. Usamos a tag ui:include para fornecer um conteúdo padrão, se nenhuma substituição é especificada quando o modelo for usado. 2. Cabeçalho, Conteúdo e Rodapé Codificação para os três conteúdos da página. commonheader.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" <body> <ui:composition> <h1>este é o cabeçalho padrão</h1> </ui:composition> </body> </html> commoncontent.xhtml 18 de 50

19 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" <body> <ui:composition> <h1>este é o conteúdo padrão</h1> </ui:composition> </body> </html> commonfooter.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" <body> <ui:composition> <h1>este é o rodapé padrão</h1> </ui:composition> </body> </html> Quando estas páginas forem inseridas no arquivo modelo, todas as tags ui:composition serão removidas. Por exemplo: commonheader.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" <body> TODAS AS TAGS acima desta linha serão removidas pelo JSF <ui:composition> <h1>este é o cabeçalho padrão</h1> </ui:composition> TODAS AS TAGS abaixo desta linha serão removidas pelo JSF </body> </html> JSF utiliza os seguintes elementos para inserir no arquivo de modelo: <ui:composition> <h1>este é um cabeçalho padrão</h1> </ui:composition> Ao inserir o modelo commonlayout, tornou-se: commonlayout.xhtml... <h:body> 19 de 50

20 <div id="page"> <div id="header"> <h1>este é um cabeçalho padrão</h1> </div> Utilizando template Para fazer uso de um modelo já existente, por exemplo. CommonLayout.xhtml, utilize a tag ui:composition com um atributo template. Vejamos os seguintes exemplos: default.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" xmlns:ui=" <h:body> <ui:composition template="template/common/commonlayout.xhtml"> </ui:composition> </h:body> </html> A página JSF carrega o modelo commonlayout.xhtml e exibe todo o conteúdo da página padrão. page1.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" 20 de 50

21 xmlns:ui=" <h:body> <ui:composition template="/template/common/commonlayout.xhtml"> <ui:define name="content"> <h2>este é o conteúdo da Página 1</h2> </ui:define> <ui:define name="footer"> <h2>este é o rodapé da Página 1</h2> </ui:define> </ui:composition> </h:body> </html> Ao carregar a página JSF para o modelo commonlayout.xhtml e usar a tag ui:define para substituir a tag ui:insert, que foi definida no arquivo modelo. Enquanto o nome da tag ui:define é comparado com o nome da tag ui:insert, que foi definida para o modelo, ui:insert teve seu conteúdo substituído. 21 de 50

22 5. Richfaces RichFaces, como a maioria dos outros frameworks de componentes projetados para uso com JSF, foi extensivamente modificado para permitir total compatibilidade. Nesta seção descreveremos todas as ações necessárias e configurações que devem ser feitas para conectar os componentes RichFaces em uma aplicação JSF. Baixar os RichFaces A última versão dos componentes RichFaces está disponível na área de Downloads do JBoss RichFaces na comunidade JBoss: São arquivos binários (baixar os arquivos *.bin.zip ou *.bin.tar.gz) contém compilado, pronto para usar a versão do RichFaces com o conjunto básico. Para começar com RichFaces no sistema de arquivo de computador criar uma nova pasta com o nome "RichFaces", e nesta baixe e descompacte o arquivo com os binários. Adicionar as bibliotecas RichFaces para o projeto Na pasta com os arquivos descompactados anteriormente abra pasta lib. Esta pasta contém três arquivos *.jar com a API, interface do usuário e as bibliotecas de execução. Copiar os arquivos JARs na pasta lib para a pasta WEB-INF/lib da aplicação JSF. Uma aplicação JSF com RichFaces assume que os arquivos JARs a seguir estão disponíveis no projeto: commons-beanutils jar, commons-collections-3.2.jar, commonsdigester-1.8.jar, commons-logging jar, jhighlight-1.0.jar. Registrar o RichFaces no web.xml Depois de adicionar as bibliotecas RichFaces ao projeto é necessário registrá-las no arquivo web.xml. Adicionar seguintes linhas neste arquivo:... <!-- Ligar o "Blue Sky" skin para o projeto --> <context-param> <param-name>org.richfaces.skin</param-name> <param-value>bluesky</param-value> </context-param> <!-- Fazer o RichFaces se espalhar para os controles padrão HTML --> <context-param> <param-name>org.richfaces.control_skinning</param-name> <param-value>enable</param-value> </context-param> <!-- Definir e mapear o filtro RichFaces --> <filter> 22 de 50

23 <display-name>richfaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>faces Servlet</servlet-name> <dispatcher>request</dispatcher> <dispatcher>forward</dispatcher> <dispatcher>include</dispatcher> </filter-mapping>... Finalmente, o arquivo web.xml deve ficar assim: <?xml version="1.0"?> <web-app version="2.5" xmlns=" xmlns:xsi=" xsi:schemalocation=" <display-name>greeter</display-name> <context-param> <param-name>javax.faces.state_saving_method</param-name> <param-value>server</param-value> </context-param> <context-param> <param-name>org.richfaces.skin</param-name> <param-value>bluesky</param-value> </context-param> <context-param> <param-name>org.richfaces.control_skinning</param-name> <param-value>enable</param-value> </context-param> <filter> <display-name>richfaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>faces Servlet</servlet-name> <dispatcher>request</dispatcher> <dispatcher>forward</dispatcher> <dispatcher>include</dispatcher> </filter-mapping> <listener> <listener-class>com.sun.faces.config.configurelistener</listener-class> </listener> <!-- Faces Servlet --> <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> 23 de 50

24 <!-- Faces Servlet Mapping --> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <login-config> <auth-method>basic</auth-method> </login-config> </web-app> managed bean A aplicação "RichFaces Greeter" necessita de um managed bean. Na pasta do projeto criar um novo managed bean com nome de Usuario no pacote demo com o seguinte código: package demo; public class Usuario { private String nome = ""; public String getnome() { return nome; public void setnome(string nome) { this.nome = nome; Registrando o managed bean no arquivo faces-cofig.xml: <?xml version="1.0" encoding="utf-8"?> <faces-config version="1.2" xmlns=" xmlns:xi=" xmlns:xsi=" xsi:schemalocation=" <managed-bean> <description>bean do Usuario</description> <managed-bean-name>usuario</managed-bean-name> <managed-bean-class>demo.usuario</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>nome</property-name> <property-class>java.lang.string</property-class> <value/> </managed-property> </managed-bean> </faces-config> O aplicativo "RichFaces Greeter" tem apenas uma página JSP. Criar a página index.jsp na pasta raiz do conteúdo Web e adicionar o seguinte código: 24 de 50

25 <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> taglib uri=" prefix="f" %> taglib uri=" prefix="h" %> <!-- RichFaces tag library declaration --> taglib uri=" prefix="a4j"%> taglib uri=" prefix="rich"%> <html> <head> <title>richfaces Greeter</title> </head> <body> <f:view> <a4j:form> <rich:panel header="richfaces Greeter" style="width: 315px"> <h:outputtext value="seu nome:"/> <h:inputtext value="#{usuario.nome"> <f:validatelength minimum="1" maximum="30"/> </h:inputtext> <a4j:commandbutton value="obter Saudação" rerender="greeting"/> <h:panelgroup id="greeting"> <h:outputtext value="olá, " rendered="#{not empty usuario.nome"/> <h:outputtext value="#{usuario.nome"/> <h:outputtext value="!" rendered="#{not empty usuario.nome"/> </h:panelgroup> </rich:panel> </a4j:form> </f:view> </body> </html> A aplicação utiliza três componentes RichFaces: rich:panel utilizado como um contêiner visual para a informação; a4j:commandbutton com suporte embutido para Ajax que permite prestar uma saudação dinâmica após um respose e a4j:form auxilia ao botão executar a ação. Observamos, que a biblioteca RichFaces deve ser declarado em cada página JSP. Para Facelets devemos adicionar as seguintes linhas para declaração da biblioteca de tag: <ui:composition xmlns=" xmlns:ui=" xmlns:a4j=" xmlns:rich=" </ui:composition> Demonstração dos Componentes RichFaces possui diversos componentes e tem mais de 20 atributos específicos, além de atributos gerais que podem ser substituídos. No entanto, no uso comum dos componentes não são difíceis de configurar, como a maioria dos atributos com padrões razoáveis. Vejamos alguns desses componentes a seguir. 25 de 50

26 Calendar: Um componente pop-up que permite seleções de data. Pick List: Uma seleção e ordenação componente. Lista de Escolha que pode mover os itens entre as áreas disponíveis e selecionadas, para cima e para baixo na área selecionada. AutoComplete: Substituto para o componente de entrada Suggestion Box que fornece sugestões clicáveis para preencher ou completar uma entrada. Tab Panel: um componente de saída que cria páginas com guias. Accordion: Substituto para o componente de entrada Panel Bar. 26 de 50

27 Collapsible Panel: Substituto para o componente Simple Toggle Panel. 27 de 50

28 6. Primefaces PrimeFaces é um projeto de extensão que tem o objetivo ser uma biblioteca de componentes JSF leve e rápida, sendo um conjunto de diversos componentes. Este é um projeto estendido pois define componentes úteis que falta em outras bibliotecas da JSF. Utiliza padrões e é altamente compatível com o framework JSF. A extensão PrimeFaces não é somente um conjunto de componentes, conversores e comportamentos para o cliente. Também consiste de plugins úteis para o framework Maven e vários add-ons simplificadores para a Web e, especialmente, para o desenvolvimento JSF. A extensão PrimeFaces é um projeto open source que está sob a licença do Apache. Podese usá-lo livremente em projetos de código aberto ou comerciais segundo os termos da licença. Características do PrimeFaces Resumidamente PrimeFaces é uma biblioteca de componentes de código aberto para a JSF com mais de 100 componentes. Possui as seguintes características: Um variado conjunto de componentes de interface para o usuário (DataTable, AutoComplete, HtmlEditor, Charts, entre outros); Somente a configuração XML é necessária e não há dependências necessárias; Built-in Ajax baseado no padrão JSF 2.0 Ajax APIs; Mais de 25 temas internos; e Documentação com exemplos de código. Aplicativo Exemplo Vamos construir uma aplicação exemplo utilizando a extensão PrimeFaces com as seguintes características: 1. Uma tela de Login que recebe o nome e a senha do usuário para autenticá-lo. 2. Ao ser bem-sucedido o login será exibida uma tela de pesquisa do usuário. Os usuários podem pesquisar outros usuários pelo seu nome. Os resultados da pesquisa serão exibidos em um DataTable com paginação, classificação e filtragem de apoio. 3. Ao clicar em uma linha, os detalhes do usuário serão exibidos em um formulário. Inicialmente, realizar o download da bibliotecas do JSF: Copiar os arquivos: jsf-api-x.x.x.jar, jsf-impl-x.x.x.jar e jstl-x.x.x.jar para a pasta: WEB-INF/lib Baixar o PrimeFaces em: 28 de 50

29 Colocar o arquivo primefaces X.X.X.jar na pasta: WEB-INF/lib Configurar FacesServlet no arquivo web.xml: <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns=" xmlns:xsi=" xsi:schemalocation=" > <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> </web-app> Criar um arquivo chamado faces-config.xml na pasta WEB-INF: <?xml version="1.0" encoding="utf-8"?> <faces-config xmlns=" xmlns:xsi=" xsi:schemalocation=" version="2.0"> <!-- Não há declarações ManagedBean aqui pois usamos --> </faces-config> Criar a página index.jsp, que desvia para a tela de login: <jsp:forward page="login.jsf"></jsp:forward> Criar a página login.xhtml: <html xmlns=" xmlns:f=" xmlns:h=" xmlns:p=" <h:head> <link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" /> </h:head> <h:body> <center> <p:panel header="entrada no Sistema" style="width: 350;"> <h:form> 29 de 50

30 <h:panelgrid columns="2" cellpadding="2"> <h:outputlabel for="#{usermanagedbean.username" value="usuário"/> <h:inputtext value="#{usermanagedbean.username" label="username"> </h:inputtext> <h:outputlabel for="#{usermanagedbean.password" value="senha"/> <h:inputsecret value="#{usermanagedbean.password"></h:inputsecret> <h:commandbutton type="submit" value="login" action="#{usermanagedbean.login"> </h:commandbutton> </h:panelgrid> </h:form> </p:panel> <div><h:messages ></h:messages></div> </center> </h:body> </html> Obter e disponibilizar o tema blusky de pacote PrimeFaces. Criar um arquivo chamado home.xhtml que contém o UserSearchForm, Resultados do datatable e UserDetails Panel. <html xmlns=" xmlns:f=" xmlns:h=" xmlns:p=" <h:head> <link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" /> </h:head> <h:body> <center> <h:form> <p:panel header="formulário de Busca para Usuários" style="width: 700;"> <h:form> <h:panelgrid columns="3" cellpadding="2"> <h:outputlabel for="#{usermanagedbean.searchuser" value="usuário"/> <h:inputtext value="#{usermanagedbean.searchuser" label="usuário"> </h:inputtext> <h:commandbutton type="submit" value="search" action="#{usermanagedbean.searchuser"> </h:commandbutton> </h:panelgrid> </h:form> </p:panel> <p:datatable var="user" value="#{usermanagedbean.searchusersresults" selection="#{usermanagedbean.selecteduser" selectionmode="single" dynamic="true" onrowselectupdate="userupdateform" onrowunselectupdate="userupdateform" rowselectlistener="#{usermanagedbean.onuserselect" rowunselectlistener="#{usermanagedbean.onuserunselect" paginator="true" rows="5" style="width: 700"> <p:column sortby="#{user.userid" filterby="#{user.userid"> <f:facet name="header"> <h:outputtext value="id" /> </f:facet> 30 de 50

31 <h:outputtext value="#{user.userid" /> </p:column> <p:column sortby="#{user.username" filterby="#{user.username"> <f:facet name="header"> <h:outputtext value="nome" /> </f:facet> <h:outputtext value="#{user.username" /> </p:column> <p:column sortby="#{user. id" filterby="#{user. id"> <f:facet name="header"> <h:outputtext value=" " /> </f:facet> <h:outputtext value="#{user. id" /> </p:column> <p:column parser="date" sortby="#{user.dob" filterby="#{user.dob"> <f:facet name="header"> <h:outputtext value="dob" /> </f:facet> <h:outputtext value="#{user.dob" > <f:convertdatetime pattern="dd/mm/yyyy" /> </h:outputtext> </p:column> </p:datatable> <p:panel id="userdetailspanelid" header="detalhes" style="width: 700;"> <h:panelgrid columns="2" cellpadding="2" id="userupdateform" border="0" > <h:outputlabel for="#{usermanagedbean.selecteduser.userid" value="id"/> <h:inputtext value="#{usermanagedbean.selecteduser.userid" style="width: 100;" readonly="true"></h:inputtext> <h:outputlabel for="#{usermanagedbean.selecteduser.username" value="usuário"/> <h:inputtext value="#{usermanagedbean.selecteduser.username" readonly="true"> </h:inputtext> <h:outputlabel for="#{usermanagedbean.selecteduser. id" value=" "/> <h:inputtext value="#{usermanagedbean.selecteduser. id" readonly="true"> </h:inputtext> <h:outputlabel for="#{usermanagedbean.selecteduser.gender" value="sexo"/> <h:inputtext value="#{usermanagedbean.selecteduser.gender" readonly="true"> </h:inputtext> <h:outputlabel for="#{usermanagedbean.selecteduser.dob" value="dob"/> <h:inputtext value="#{usermanagedbean.selecteduser.dob" readonly="true"> <f:convertdatetime pattern="dd/mm/yyyy" /> </h:inputtext> </h:panelgrid> </p:panel> </h:form> </center> </h:body> </html> Criar a classe de domínio User.java: package x25.com.tutorial; 31 de 50

32 import java.util.date; public class User { private Integer userid; private String username; private String id; private String phone; private Date dob; private String gender; private String address; public User() { public User(Integer userid, String username, String id, String phone, Date dob, String gender, String address) { this.userid = userid; this.username = username; this. id = id; this.phone = phone; this.dob = dob; this.gender = gender; this.address = address; // Métodos padrões GET/SET Criar a classe UserService.java, que atua como uma simulação da tabela na base de dados. package x25.com.tutorial; import java.util.arraylist; import java.util.collection; import java.util.date; import java.util.hashmap; import java.util.map; import java.util.set; public class UserService { private static final Map<Integer, User> USERS_TABLE = new HashMap<Integer, User>(); static { USERS_TABLE.put(1, new User(1, "Administrator", "admin@gmail.com", " ", new Date(), "M", "Hyderabad")); USERS_TABLE.put(2, new User(2, "Guest", "guest@gmail.com", " ", new Date(), "M", "Hyderabad")); USERS_TABLE.put(3, new User(3, "John", "John@gmail.com", " ", new Date(), "M", "Hyderabad")); USERS_TABLE.put(4, new User(4, "Paul", "Paul@gmail.com", " ", new Date(), "M", "Hyderabad")); 32 de 50