Centro

Universitrio de Formiga UNIFOR-MG Instituto de Cincias Sociais Aplicadas e Exatas Faculdade de Cincia da Computao 8 perodo Disciplina: Laboratrio de Programao IV Professor: Michel Pires da Silva Aluno: Lus Fernando de Oliveira

Tutorial JSF 2.0

Formiga MG, outubro de 2011.

Introduo e Viso Global O que JSF? JSF uma tecnologia que incorpora caractersticas de um framework MVC para WEB e de um modelo de interfaces grficas baseado em eventos. Por basear-se no padro de projeto MVC, uma de suas melhores vantagens a clara separao entre a visualizao e regras de negcio (modelo). A idia do padro MVC dividir uma aplicao em trs camadas: modelo, visualizao e controle. O modelo responsvel por representar os objetos de negcio, manter o estado da aplicao e fornecer ao controlador o acesso aos dados. A visualizao representa a interface com o usurio, sendo responsvel por definir a forma como os dados sero apresentados e encaminhar as aes dos usurios para o controlador. J a camada de controle responsvel por fazer a ligao entre o modelo e a visualizao, alm de interpretar as aes do usurio e as traduzir para uma operao sobre o modelo, onde so realizadas mudanas e, ento, gerar uma visualizao apropriada. Padro MVC segundo JSF No JSF, o controle composto por um servlet denominado FacesServlet, por arquivos de configurao e por um conjunto de manipuladores de aes e observadores de eventos. O FacesServlet responsvel por receber requisies da WEB, redirecion-las para o modelo e ento remeter uma resposta. Os arquivos de configurao so responsveis por realizar associaes e mapeamentos de aes e pela definio de regras de navegao. Os manipuladores de eventos so responsveis por receber os dados vindos da camada de visualizao, acessar o modelo, e ento devolver o resultado para o FacesServlet. O modelo representa os objetos de negcio e executa uma lgica de negcio ao receber os dados vindos da camada de visualizao. Finalmente, a visualizao composta por component trees (hierarquia de componentes UI), tornando possvel unir um componente ao outro para formar interfaces mais complexas. A Figura 1 mostra a arquitetura do JavaServer Faces baseada no modelo MVC.

Caractersticas e Vantagens JavaServer Faces oferece ganhos no desenvolvimento de aplicaes WEB por diversos motivos: Permite que o desenvolvedor crie UIs atravs de um conjunto de Fornece um conjunto de tags JSP para acessar os componentes; Reusa componentes da pgina; Associa os eventos do lado cliente com os manipuladores dos componentes UIs pr-definidos;

eventos do lado servidor (os componentes de entrada possuem um valor local representando o estado no lado servidor); Fornece separao de funes que envolvem a construo de aplicaes WEB. Embora JavaServer Faces fornea tags JSP para representar os componentes em uma pgina, ele foi projetado para ser flexvel, sem limitarse a nenhuma linguagem markup em particular, nem a protocolos ou tipo de clientes. Ele tambm permite a criao de componentes prprios a partir de classes de componentes, conforme mencionado anteriormente. JSF possui dois principais componentes: Java APIs para a

representao de componentes UI e o gerenciamento de seus estados, manipulao/observao de eventos, validao de entrada, converso de dados, internacionalizao e acessibilidade; e taglibs JSP que expressam a interface JSF em uma pgina JSP e que realizam a conexo dos objetos no lado servidor. claro que existe muito mais a ser dito sobre JavaServer Faces. Esse artigo apenas fornece uma viso geral, mas espero ter criado uma certa curiosidade a respeito dessa nova tecnologia. Novas caractersticas vs JSF 1.x Anotaes no lugar de muitas entradas faces-config.xml Suporte Ajax Suporte integrado para facelets Mais simples customizar componentes Mais componentes e validadores Suporte para Groovy Muito mais.

Instalao, Configurao e Comeando Software requerido Instalao Java 6 ou superior Instalao Eclipse (verso Java EE) Instalao servidor para JSF 2.0 (Tomcat 7) Bibliotecas jsf-api.jar e jsf-impl.jar

Instalao JSF Para trabalhar com o JavaServer Faces 2.0, primeiramente ser preciso configurar os arquivos e a estrutura necessria. O continer Servlet Tomcat 7, por padro, no possue 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 https://javaserverfaces.dev.java.net/. Ao baixar o arquivo, simplesmente descompacte em um diretrio de sua escolha. JavaServer Faces rodando em seu aplicativo Web Para ter o JavaServer Faces 2.0 em sua aplicao, voc possui dois arquivos do tipo JAR: 1. 2. jsf-api.jar jsf-impl.jar

Projeto Cinema Criando o projeto Clique no menu File>New>Dynamic Web Project. Na caixa de dilogo New Dynamic Web Project, digite Cine (ou o nome que desejar dar) em Project name. Clique no boto New Runtime e, na caixa de dilogo New Server Runtime Environment, expanda Apache e selecione Apache Tomcat v7.0. Clique no boto Next.

Na prxima etapa, selecione o diretrio onde est localizado o seu Tomcat 7, clicando em Browse. Lembre-se da verso do JDK 6 para trabalhar com o Tomcat. Confirme no boto Finish.

Retornando a primeira etapa da criao do projeto, em Configuration, selecione JavaServer Faces v2.0 Project. Com suas definies completas, podemos prosseguir em Next.

Iremos executar o boto Next at a ltima etapa, ao qual definiremos as bibliotecas do projeto. Na ltima etapa do assistente, deixe Type como User Library, caso no esteja.

Logo abaixo, na lateral direita, voc encontra o cone Manage libraries. D um clique nele.

Ao abrir a caixa de dilogo Preferences, ver que est filtrado direto no item User Libraries. Clique no boto New e, na caixa de dilogo New User Library digite JSF2 e confirme.

Retornando para Preferences, selecione JSF2 e clique no boto Add JARs. Selecione os JARs do JSF 2.0 que necessitamos para o projeto e confirme.

Por fim, selecione as bibliotecas de usurio criadas, pois elas sero adicionadas ao projeto automaticamente. Confirme a criao do projeto no boto Finish.

Na finalizao do projeto, o Eclipse lanar uma mensagem perguntando se desejamos mudar de perspectiva. Diga que sim, clicando em Yes. O Eclipse alterar de perspectiva, colocando na Java EE.

Managed Beans Definio A principal responsabilidade de um managed bean intermediar a comunicao entre as pginas (componentes do JSF) e o modelo. Escutar eventos, processa-los e delegar para a camada de negcios so apenas algumas de suas responsabilidades. Os Escopos JSF Antes da verso 2.0, o mapeamento de um managed bean era realizado no arquivo /WEB-INF/faces-config.xml, conforme abaixo.

Nesta nova verso, isto passa a ser opcional, uma vez que o novo padro o uso de anotaes para esta atividade. Todo managed bean possui um escopo, e a definio dele pode ser realizada pelas anotaes: @ApplicationScoped, @SessionScoped, @RequestScoped, @ViewScoped, @CustomScoped ou @NoneScoped. Na figura abaixo mostrada uma viso geral dos escopos do JSF, com exceo de @CustomScoped e @NoneScoped, pois o comportamento de @CustomScoped, como era de se esperar, implementado de forma customizada, de acordo com as necessidades do desenvolvedor (ou do problema). J o @NoneScoped no permite acesso diretamente pelas

pginas, apenas por outros managed beans.

Escopo de Aplicao O managed bean anotado com o escopo @ApplicationScoped ter seu ciclo de vida determinado pelo tempo que a aplicao estiver em execuo, isto , a partir do momento que o servidor iniciar a mesma, o managed bean estar disponvel na memria at que a aplicao seja interrompida. Este comportamento ocorrer se a anotao @ManageBean estiver com seu atributo eager definido com o valor true, caso contrrio o managed bean ter seu ciclo de vida iniciado na primeira requisio feita a ele. A diferena bsica entre estes dois comportamentos est na quantidade de memria consumida e o tempo de resposta para inicializao da aplicao ou para a requisio ao managed bean, pois se optar por eager=true, todos os managed beans sero instanciados de uma vez e mantidos na memria durante todo o ciclo de vida da aplicao. Para o caso de eager=false, os managed beans sero instanciados apenas quando requisitados pela primeira vez, neste caso, podendo tornar lenta a resposta a este componente. Outro ponto importante a se comentar a respeito do managed bean anotado com o escopo de aplicao que ele tem visibilidade pblica, ou

seja, os valores armazenados estaro disponveis em cada sesso para todos os clientes. Isso quer dizer que todas as sesses criadas tero acesso direto aos managed beans registrados com este escopo. Em uma aplicao existe sempre a necessidade de referncia entre componentes. Em JSF estes componentes so os managed beans. Para que estes componentes possam se referenciar importante que exista uma relao dos mesmos com seus escopos. Para os managed beans com escopo de aplicao, a referncia a eles possvel por objetos de qualquer escopo. No entanto, objetos anotados com @ApplicationScoped podem referenciar apenas objetos que tenham o escopo None ou Application. necessrio definir muito bem os managed beans anotados com o escopo de aplicao, pois estes so visveis para todos os outros escopos. Assim, deve-se ter o cuidado com problemas de consistncia de dados provocados por acesso concorrente. Quando usar Este escopo muito til para tratar requisitos relacionados configurao ou servios de uma aplicao, os quais podem ser necessrios para todos os clientes. Quando no usar Este escopo no deve ser utilizado quando as informaes forem pertinentes apenas ao cliente, como por exemplo, um carrinho de compras. preciso uma avaliao criteriosa de cada managed bean modelado para este escopo. Um managed bean com @ApplicationScoped existir durante todo o tempo de vida da aplicao, consumindo recursos. Caso o servio modelado para o managed bean no necessite que seu estado seja compartilhado para todos os clientes, mas sim, que cada cliente tenha um objeto desta classe a ele associado, de forma exclusiva, ento ele no deve ser definido com este escopo. Escopo de Sesso O managed bean anotado com escopo de sesso

(@SessionScoped) ter seu ciclo de vida iniciado no momento em que o cliente o requisita e finaliza quando a sesso do cliente termina. A requisio a um managed bean com este escopo pode ser dada no momento em que uma pgina que faz uso deste componente solicitada. Caso seja a primeira requisio, e o objeto tenha sido instanciado nesta requisio, seus atributos estaro sem valores ou com valores default. Ou seja, os componentes ligados a este objeto podem estar vazios. Caso no seja a primeira requisio pgina, os componentes que a compem e que possuam um bind com este objeto, apresentaro os valores nele armazenados. A expirao por inatividade se dar de acordo com a configurao no arquivo /WEB-INF/web.xml, conforme mostrado na figura abaixo.

Os managed beans com escopo de sesso podem referenciar outros managed beans com os seguintes escopos: None, Session e Application. Como exemplo de interao entre componentes com esse escopo, pense em uma aplicao de vendas on-line, onde o registro do cliente realizado, gerando-se um objeto. E, na concluso da venda, a mesma precisa ter os dados do cliente anteriormente registrados. Esta associao ser possvel se os dois managed beans tiverem o escopo @SessionScoped. Quando usar O uso do @SessionScoped recomendado quando o estado de um managed bean precisa ser compartilhado entre diversas requisies. Um exemplo seria um requisito que possui vrias etapas a serem realizadas, onde cada etapa representada por uma pgina diferente e cada uma delas apresenta informaes das etapas anteriores.

Quando no usar O uso deste escopo deve ser controlado, pois no recomendado carregar a sesso com muitas informaes, visto que ser criada uma para cada cliente. Deste modo, se existirem muitos managed beans com escopo de sesso, que utilizem demasiadamente a memria, poder ocorrer perda de desempenho da aplicao web ou at mesmo a sobrecarga do servidor. Isto pode se agravar se ocorrerem muitos acessos simultneos a estes managed beans. Escopo de Requisio O managed bean anotado com o escopo de requisio

(@RequestScoped) ser instanciado e permanecer disponvel durante o tempo de execuo da requisio HTTP. Deste modo, se houver uma nova requisio HTTP, os dados anteriores no mais estaro disponveis no servidor, fazendo com que uma nova referncia seja gerada a cada requisio. A utilizao do escopo de requisio muito bem-vinda quando se deseja economizar ao mximo os recursos de memria do servidor. No entanto, se houver a necessidade de se manter alguma informao durante a navegao entre pginas diferentes, ou no, este escopo aumentaria consideravelmente a complexidade da aplicao, pois seria necessrio manter os dados publicados no lado do cliente atravs de componentes ocultos. Como exemplos para componentes ocultos pode-se citar cookies, valores mantidos no formulrio HTML com <input hidden> ou ainda com a reescrita de URL. Quando Usar Esse escopo o mais utilizado por possuir um curto ciclo de vida, timo para consultas simples, listagens e em todos os casos onde no h necessidade de recuperar informaes de requisies anteriores. , sem dvida, o escopo que voc deve definir como padro quando o estado do objeto for necessrio apenas durante o processamento no servidor, pois no

existir um custo no armazenamento e recuperao deste estado entre requisies. Quando no usar No recomendado utilizar este escopo em casos onde necessrio guardar informaes durante trocas de pginas, como no exemplo de carrinhos de compras. Neste exemplo, seu managed bean certamente ter um atributo que representar uma coleo de itens a ele adicionados. Fazendo uso deste escopo, o estado da coleo nunca ser mantido entre as requisies que confirmem a incluso de itens ao carrinho, ou seja, nunca existiro itens no carrinho no momento de fechamento da compra. Sem Escopo O managed bean com esta anotao (@NoneScoped) no possui escopo, ou seja, estes objetos no sero instanciados ou armazenados de forma automtica, ou por uma requisio de um cliente. Porm, eles podem ser instanciados por demanda, por outros managed beans. Com os objetos criados, o tempo de vida deles passa a ser o mesmo do managed bean que originou a sua instanciao. Os managed beans anotados sem escopo no podem referenciar outros managed beans alm dos que tiverem o mesmo escopo. Quando usar O uso deste escopo recomendado quando o servio oferecido pelo objeto no tem uma ligao direta com uma pgina, ou seja, est relacionado com o servio oferecido por outro managed bean. Um exemplo para este escopo pode ser um managed bean que oferea recursos relacionados a taxas financeiras ou converses entre moedas. Um managed bean anotado com @RequestScoped ou @SessionScoped referenciaria outro anotado com @NoneScoped, onde a instncia deste ocorreria no momento desta solicitao, tendo seu estado baseado em informaes obtidas neste processo.

Quando no usar Se ao implementar um managed bean, for identificada a necessidade de interao com uma pgina, ou, se o estado do componente tiver a necessidade de ser mantido entre requisies, este escopo no deve ser utilizado. Escopo de Visualizao O managed bean anotado com o escopo de visualizao

(@ViewScoped) inicia seu ciclo de vida quando o cliente envia uma requisio HTTP para uma pgina e permanece disponvel enquanto o cliente enviar requisies HTTP para esta mesma pgina. O escopo de visualizao destrudo no momento em que a navegao ocorre para outra pgina. Os managed beans com escopo de visualizao podem referenciar outros managed beans com os seguintes escopos: None, Session, View e Application. A diferena do escopo de sesso para este est no ciclo de vida do managed bean, pois com escopo de visualizao o managed bean se manter instanciado enquanto a viso (pgina) atual da aplicao no se alterar. Esta mesma situao, mas com escopo de sesso, mantm o managed bean at o perodo de inatividade ser atingido. Esta diferena torna-se relevante, principalmente quando a pgina realiza diversas requisies ao servidor, o que, com muitos clientes na mesma pgina, no caso do managed bean ter o escopo de sesso, consumiria desnecessariamente recursos do servidor, como tempo de resposta por exemplo. comum dizer que o managed bean com escopo de visualizao tem um tempo de vida maior que um managed bean com escopo de requisio e menor que um managed bean com escopo de sesso. Quando usar muito interessante a utilizao de managed beans com escopo de visualizao para aplicaes que usem AJAX, onde diversas requisies so

disparadas para o servidor, com retorno para a mesma pgina. Fazendo uso deste escopo, em conjunto com AJAX, certamente a alocao de recursos, como processamento, diminuiria em relao ao uso do escopo de sesso, por exemplo. Quando no usar O uso deste escopo no adequado para objetos que precisam ter seus estados mantidos entre requisies que navegam entre pginas. Como um exemplo efetivo, pode-se ilustrar um processo seletivo em uma universidade, o qual possui o registro de informaes em diversas pginas, onde cada uma representa uma etapa de todo o processo. Escopo Personalizado O managed bean com a anotao @CustomScoped tem seu ciclo de vida e comportamento definidos por uma classe personalizada, o que possibilita, por exemplo, a implementao de escopos semelhantes aos escopos de conversao do JBoss Seam e Apache MyFaces Orchestra. A classe personalizada responsvel por gerenciar o escopo deve implementar java.util.Map. Deste modo, o programador pode implementar os mtodos dela de maneira que subsidiem o comportamento esperado para este novo escopo. A utilizao deste novo escopo se d pelo uso de um argumento na anotao. Este argumento deve conter uma Expression Language (EL), a qual avalia uma varivel que representa um objeto da classe do escopo personalizado @CustomScoped ("#{escopoPersonalizado}). Para que o JSF reconhea o escopo personalizado, necessrio registrar um ELResolver no arquivo WEB-INF/faces-config.xml. Um ELResolver uma classe que informar de onde os objetos relacionados ao escopo personalizado viro. As Listagens 6 a 9 apresentam as classes que implementam um escopo personalizado e um exemplo para seu uso. O exemplo dado a seguir, sendo a descrio de cada classe e sua respectiva listagem na sequncia:

FaturamentoBean: o managed bean anotado com escopo personalizado. Nele so implementadas todas as regras de negcio para a aplicao exemplo;

EscopoPersonalizado: Esta classe deve implementar todas as regras para controle da sesso personalizada, determinando o ciclo de vida, acessibilidade, estrutura de dados e outros. Deve tambm implementar java.util.Map ou estender uma classe adaptadora, podendo ser a classe java.util.concurrent.ConcurrentHashMap;

EscopoPersonalizadoELResolver: Esta classe, representada na figura da listagem 8, responsvel por localizar a classe de escopo personalizado atravs do atributo da anotao @CustomScoped, e para isso deve ser registrada no arquivo /WEB-INF/faces-config.xml (exibido na listagem 9).

Quando Usar Recomenda-se o uso deste escopo em casos onde seja necessrio um ciclo um pouco maior que o @ViewScoped e menor que o @SessionScoped, como em cadastros complexos, onde vrias pginas podem estar envolvidas. Para uma situao como esta, o escopo de viso no atenderia, pois o seu ciclo termina a cada troca de pgina, j o escopo de sesso tem seu tempo de vida muito longo. Quando no usar Por se tratar de uma implementao no trivial, recomendado uma anlise de similaridade entre o escopo desejado e os que j existem. Caso exista similaridade com algum escopo oferecido pelo JSF, o uso deste escopo no recomendado. As regras para o managed bean, com escopo personalizado, referenciar outros managed beans, depende de como o escopo personalizado foi definido pela aplicao. Esta definio permite que objetos de outros escopos possam ser visveis para objetos deste escopo. Isto se torna possvel atravs de implementaes especficas para os mtodos definidos em Map. O escopo personalizado uma alternativa muito interessante para construo de wizards, que envolvem vrias pginas da aplicao, de forma a economizar recursos, como memria e processamento, resultando em um melhor tempo de resposta. Os managed beans registrados com este tipo de

escopo, para o exemplo do wizard, permanecero disponveis na JVM at a finalizao do mesmo, quando os objetos sero destrudos e removidos, liberando os recursos por eles alocados. Obtendo os objetos request e response ExternalContext HttpServletRequest context.getRequest(); HttpServletResponse response = (HttpServletResponse) context.getResponse(); request context = = (HttpServletRequest)

FacesContext.getCurrentInstance().getExternalContext();

Navegao de pginas explcitas e faces-config.xml Navegao implcita e condicional O modelo de navegao do JSF contempla as regras que definem como e quando a navegao entre pginas deve ocorrer em uma aplicao. Uma novidade apresentada no JSF 2.0 a chamada navegao implcita, na qual no h a necessidade de configurao XML. O JSF 2.0 tambm apresenta uma novidade para a navegao baseada em regras (aquela definida atravs de configurao XML): a navegao condicional. Nela, possvel definir restries no arquivo de configurao do JSF, o facesconfig.xml. Navegao implcita Basta adicionar o nome da pgina de destino (sem a necessidade de colocar a extenso .xhtml) diretamente no cdigo na pgina de origem, ou como resultado de um mtodo do bean gerencivel. E o mais interessante: voc no precisa colocar nenhuma regra de navegao no faces-config.xml.

Navegao Condicional Diferentemente da implcita, a navegao condicional definida juntamente com as regras de navegao da aplicao, no arquivo facesconfig.xml. Conforme as verses anteriores do JSF, as regras de navegao do JSF 2.0 no faces-config.xml so definidas atravs das tags <navigation-rule> e <navigation-case>, sendo que dentro de um elemento <navigation-rule>, os itens <navigation-case> so processados na ordem em que aparecem. A primeira condio satisfeita far com que a prxima pgina a ser mostrada no fluxo de navegao seja aquela definida na tag <to-view-id>. Para que um <navigation-case> seja satisfeito, basta que o resultado de um mtodo do bean gerencivel, ou da pgina de origem, seja igual ao valor da tag <fromoutcome>.

A navegao condicional possibilita definir uma verificao a mais dentro de um <navigation-case>, com o uso da nova tag <if>. possvel tambm pode incluir quantas tags <if> achar necessrio dentro de um <navigation-case>. Nesse caso, a pgina definida em <to-view-id> somente ser mostrada se todas as tags <if> forem satisfeitas.

Linguagem de Expresso JSF Sadas das propriedades Bean #{varName.propertyName} o Busca no servlet definido no managed-bean a propriedade do bean Acessando Propriedades aninhadas do Bean #{varName.prop1.prop2} o o o Primeiro busca a propriedade do bean Ento acessa prop1 getProp1 o Enviando propriedades Bean Pode ser aninhado arbitrariamente I.e., chama metodo getProp1 I.e., chama getProp2que sada do Ento acessa prop2 p definido no escopo do managed bean

Acessando Colees Formas equivalentes o #{name.property} o #{name["property"]}

Expresses Condicionais ${ test ? expression1 : expression2} Executa teste e realiza uma da expresses

Internacionalizao JSF fornece suporte internacionalizao como codificaes de caractere e a seleo de pacotes de recursos. A internacionalizao no JSF 2.0 possvel de duas formas: facesconfig.xml e a tag Core <f:loadBundle />. Para uma internacionalizao com o arquivo faces-config.xml, devemos adicionar este arquivo dentro do diretrio WEB-INF. O contedo mostrado na figura abaixo.

O arquivo faces-config.xml usado no JSF 2.0 principalmente para numerosas configuraes globais de sua aplicao. Os rtulos neste caso so colocados em arquivos .properties, onde o nome de cada arquivo possui _ABREVIAO DO IDIOMA como, por exemplo: labels_pt.properties.

Exemplo de uso:

Para visualizar as alteraes, ser necessrio trocar o idioma padro do seu navegador. No Mozilla Firefox, por exemplo, basta ir em Ferramentas>Opes>Contedo>Idiomas e clicar no boto Selecionar. Coloque o idioma diferente do que est usando como primeiro na ordem da lista de idiomas de preferncia e confirme tudo. D um reload na pgina que ver as alteraes. Caso no queira usar uma declarao global dos recursos de localidades, podemos adicionar a tag <f:loadBundle /> em cada pgina JSF. A seguir o trecho que poder substituir a configurao global no arquivo faces-config.xml.

Nota: Das duas formas apresentadas para internacionalizao de uma aplicao Web com o framework JSF, a verso com o elemento <resourcebundle />, encontrado no arquivo faces-config.xml, a mais eficiente, pois utilizado em todo o aplicativo e no somente na pgina configurada.

Internacionalizao Definio: H duas variaridades de eventos de interface de usurio: usurio JSF trata essas duas variedades como action controllers e event listeners. Action Controllers: tratam submisses do formulrio principal Dispara depois do bean ser preenchido Dispara da lgica de validao Retornam strings que afetam diretamente a navegao Eventos que comeam processamento back-end Eventos que afetam apenas o formato da interface do

da pgina Event Listeners: tratam eventos UI Action Listeners: Alguns botes comitam o formulrio e comeam o processamento backending o Dispara antes do bean ser preenchido Frequentemente ignoram a lgica de validao Nunca afetam diretamente a navegao da pgina

<h:commandButton action="..." ...> <h:commandButton actionListener="..." .../>

<h:commandButton actionListener="..." immediate="true" .../>

Outros botes afetam somente o UI o o

Exemplo:

Value Change Listeners Usado em combobox, checkbox, radio, button, textfield, etc. No comitam o formulrio automaticamente. Precisam de javascript para tanto o Exemplo: onclick="submit()" or onchange="submit()"

Ajax O componente <f:ajax> pode ser usado tanto dentro de uma tag especfica, tornando-a ajax ou pode ser colocada em volta de vrios componentes, tornando todos os componentes dentro dela ajax. Por exemplo:

Nesse caso a tag <f:ajax> est habilitando ajax no commandButton, e os dois principais atributos da tag so execute e render. O primeiro serve para informarmos o que ser enviado ao servidor na nossa requisio ajax, e o segundo serve para informarmos o que ser renderizado novamente. Ambos aceitam uma lista de ids, separados por espao em branco, ou ento os seguintes valores pr-definidos: @this o prprio componente que dispara a requisio ajax @form o formulrio que envolve o componente @this @all a view inteira @none nenhum componente

Lembrando novamente que esses valores servem tanto para informar o que vai (execute) e o que volta (render) em uma requisio ajax. Agora outro exemplo:

Nesse caso a tag <f:ajax> envolve os demais componentes, fazendo com que tudo que est dentro dela passe a disparar eventos ajax. Cada tipo de componente possui um evento padro que dispara a requisio ajax: um input dispara a requisio quando tem seu valor alterado e um boto ou link quando clicado, por exemplo. Porm, neste exemplo o evento padro que executar o ajax para todos os componentes dentro da tag <f:ajax> o onmouseover, mas como mostrado no commandButton pode-se sobrescrever os valores definidos na tag <f:ajax> de fora com uma tag dentro do prprio componente. Usou-se a propriedade event, mas poderia ter usado qualquer outra na tag ajax de fora, fornecendo assim um mesmo comportamente default para todos. No ltimo exemplo, utilizou-se a propriedade event, que como visto no exemplo serve para dizer qual evento executar a requisio ajax. Essa propriedade suporta todos os eventos DOM e ainda valueChange para componentes ActionSource). A tag <f:ajax> suporta ainda os atributos: listener serve para fazer binding com um mtodo que a seguinte assinatura public void (javax.faces.event.AjaxBehaviorEvent event) throws javax.faces.event.AbortProcessingException. Com isso podemos executar um cdigo java quando um evento qualquer disparado. disabled seria o equivalente ao rendered de um componente immediate igual o immediate dos componentes jsf comuns. onevent funo js que ser chamada quando o evento visual, se o valor definido aqui for true o suporta a ajax fica desabilitado. de entrada e de dados para (ou mais especificamente de ao um (um EditableValueHolder) action componentes

especificado for executado onerror funo js que ser chamada quando um erro ocorrer na requisio

Validao Validao Manual Exemplo:

Validao automtica implcita Exemplo:

Validao Explcita Automtica A Validao Explcita Automtica til quando voc no quer deixar a validao de campos atada a lgica de negcio de uma aplicao e situaes em que o que voc precisa apenas chegar a

um determinado tipo de dados, o valor mnimo ou mximo de um campo ou a quantidade de caracteres. Faz-se uso das tags <f:validadeLength/>, <f:validateDoubleRange/> e <f:validateLongRange/> do Java Server Faces. Ex:

Validao customizada Exemplo:

ui:Repeat Lao de repetio para escrever html dentro da pgina. Exemplo:

h:dataTable Utilizado quando os dados so um List ou array, onde cada entrada contm dados correspondents a uma linha da tabela. Exemplo:

Componentes compostos O desenvolvedor de componentes pode criar componentes sofisticados que so chamados pelos designers simplesmente colocando suas tags em suas pginas, ou arrastando-as caso sejam visuais. Um exemplo pegar bibliotecas criadas, como de calendrios, grficos ou de upload de arquivos com barra de progresso e simplesmente adicionar na pgina desenvolvida. Desde o JavaServer Faces 2.0, criar componentes customizados ficou mais fcil, com um recurso chamado de Composite Components (Componentes Compostos). Uma pgina de componente(s) no JSF 2.0 pode conter suporte aos componentes do JSF, a validao, converters e listeners. Alm disso, qualquer outra tag HTML pode ser adicionada ao componente, incluindo tambm recursos de templates. As tags utilizadas para criar componentes compostos no exemplo so: <composite:interface/> e <composite:implementation/>. Para utiliz-las, necessrio adicionar o seguinte namespace: <html xmlns:composite=http://java.sun.com/jsf/composite>

A tag <composite:interface/> declara o contrato para um componente,

ou seja, definimos quais so os atributos que o componente receber. Os atributos so definidos dentro desta tag, com a tag <composite:attribute />, onde temos os atributos name e required. Em name colocamos o nome do atributo do nosso componente composto e definindo true, em required, definimos o atributo como de preenchimento obrigatrio. A tag <composite:implementation/> onde definimos o contedo do componente composto. Onde definir #{cc.attrs.x}, sendo que x o nome do atributo do seu componente, ser o local de substituio quando preencher o componente na pgina que o utilizar. Para utilizar o componente criado, voc adiciona o seguinte namespace em sua pgina: xmlns: comp=http://java.sun.com/jsf/composite/componente Observe que componente, no namespace, o nome do diretrio onde se encontra seu componente composto (o diretrio fica dentro de resources caso no se lembre). O nome comp dado por ns para chamar o componente. Podemos ter inmeros componentes dentro de um diretrio, assim como vrios diretrios dentro de resources. Os agrupamos como acharmos melhor, de acordo com o conveniente no desenvolvimento de nossos aplicativos. Para utilizar o componente, o chamamos assim: <comp:component/>. Onde component o nome do arquivo .xhtml criado. Os atributos deste componente podem ser vrios e os definidos como obrigatrios precisam ser preenchidos para que no ocorram erros.

Para exemplificar como funcionam os recursos de Composite Components, segue um exemplo abaixo: Arquivo do componente composto

Arquivo principal:

Resultado:

Templates with faceletes Definio

Templates so layouts de pginas que podem ser reaproveitadas, podemos criar uma pgina padro (template) para o sistema e depois apenas alterar as reas dessa pgina que for necessria, por exemplo: podemos criar um template com um cabealho, menu e contedo (como imagem abaixo) e podemos definir que estas trs reas podem ser alteradas por qualquer outra pgina que siga este template.

Na verso 2.0 do JSF foi incorporado o projeto Facelets que possui tags para criao de templates, para utiliz-lo basta importar a biblioteca de tags http://java.sun.com/jsf/facelets, exemplo: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> </html> Normalmente a tag do facelets ganha um alias chamado ui, para atravs dele usar as tags desta biblioteca. O facelets possui as seguintes bibliotecas:

component, composition, debug, decorate, define, fragment, include, insert, param, remove e repeat. ui:insert

Para delimitar uma rea do template que pode ser alterada pelas pginas que utilizarem este template iremos utilizar a tag insert, exemplo: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>JSF 2.0 - Exemplo de template</title> </h:head> <h:body> <ui:insert name="cabecalho"> <h1>Template Web</h1> </ui:insert> <ui:insert name="conteudo"> Aula de JSF 2.0 - criando templates de pgina </ui:insert> <ui:insert name="rodape"> Prof. Rafael Guimares Sakurai </ui:insert> </h:body> </html> Neste exemplo criamos uma pgina com trs reas que podem ser alteradas, para cada rea que definimos com a tg insert precisamos definir tambm um nome para que possamos informar na pgina que ir usar este template qual a parte da pgina deve ser alterada.

ui:composition

Quando criamos uma pgina que ir seguir um template precisamos especificar qual ser o arquivo que possui o template, para isto iremos utilizar a tag composition, exemplo: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition template="/principal.xhtml"> </ui:composition> </html> Quando utilizamos um template no h necessidade de especificar novamente as tags h:head, h:body ou qualquer outra tag que j tem no template, pois est pgina agora ter as mesmas tags para montar seu layout. ui:define Dentro da pgina que segue o template podemos alterar qualquer rea especificada pelas tags insert, para isto iremos utilizar a tag define e informar qual o nome da tag insert deve ser alterado, exemplo: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition template="/principal.xhtml"> <ui:define name="conteudo"> <h1>Cadastro de Usurio</h1> </ui:define> </ui:composition> </html>

Usando RichFaces 4.0 Por que RichFaces?

1. 2.

Conjunto de componentes robustos com diversidade Compatibilidade quase 100% com todos os

de configuraes baseadas em atributos; navegadores do mercado, diferentemente de seus concorrentes como o Primefaces que necessita de alguns ajustes para alguns navegadores. Instalando RichFaces 4.0.0RC Existem duas maneiras bsicas de obter o jar do Richfaces: 1. 2. Download Maven, atravs do ajuste da dependncia: em http://www.jboss.org/richfaces/download/milestones.html

Para mais detalhes sobrea sincronizao com o Maven acesse : http://community.jboss.org/wiki/HowtoaddRichFaces4xtomavenba sedproject Para este exemplo, o arquivo richfaces-4.0.0.CR1.zip foi baixado e descompactado. Para utilizao no seu projeto sero necessrios os seguintes pacotes: 1. 2. 3. 4. 5. 6. 7. 8. 9. richfaces-core-impl-4.0.0.20110227-CR1.jar richfaces-core-api-4.0.0.20110227-CR1.jar richfaces-components-api-4.0.0.20110227-CR1.jar richfaces-components-ui-4.0.0.20110227-CR1.jar cssparser-0.9.5.jar guava-r06.java sac.jar jsf-api.jar jsf-impl.jar

Aps adicionados os pacotes ao projeto, deve-se configurar o arquivo web.xml, que ficar com a seguinte codificao:

Quanto a taglib, ou seja, dentro de cada uma das suas pginas JSF com rich, voc deve inserir a seguinte para o caso de utilizar sua VIEW como JSP:

Porm o mais aconselhado a partir da verso 2.0 utilizar a VIEW baseada em Facelets, onde o XML namespace dever ser

Um exemplo clssico para o teste se sua configurao est correto utilizando o componente editor, cujo cdigo o seguinte:

A pgina quando executada dever ter a seguinte visualizao:

No se esquea de obedecer a configurao do JSF e requisitar a pgina com a extenso correta. No caso do web.xml utiliz-lo, dever ter a extenso .jsf.