RichFaces é uma biblioteca de componentes para aplicações web JSF que facilita o uso de Ajax e permite criar interfaces ricas com suporte a skins. Ela fornece inúmeros componentes prontos com funcionalidade Ajax embutida.

1. RichFaces Introdução

2. RichFaces RichFaces é uma biblioteca de componentes para aplicações web que utilizam o framework JSF Os componentes desta biblioteca possuem um incrível suporte AJAX, e pode ser considerada uma extensão do Ajax4jsf com inúmeros componentes com Ajax “embutido” e com um suporte a Skins que podem deixar as interfaces da sua aplicação com um visual padronizado.

3. RichFaces Vantagens Facilita o uso de Ajax É totalmente integrado com o ciclo de vida do JSF Cria rapidamente telas complexas Cria interface rica com usurário com look-and-feel e skins Cria componentes , actione listeners.

4. RichFaces Para usar o RichFaces 3.3.1 é necessário: Java > 1.5 JavaServer Faces Java application server ou servlet container Browser (client side) RichFaces framework

5. RichFaces Frameworks compatíveis: JSF Sun JSF-RI - 1.2_12 MyFaces 1.2.5 Facelets 1.1.1 - 1.2 Seam 1.2. - 2.1.0

6. RichFaces Servidores de Aplicação compatíveis: Apache Tomcat 5.5 - 6.0 BEA WebLogic 9.1 - 10.0 Resin 3.1 Jetty 6.1.x Sun Application Server 9 (J2EE 1.5) Glassfish (J2EE 5) JBoss 4.2.x - 5 Websphere 7.0. Geronimo 2.0

7. RichFaces Browsers compatíveis: Internet Explorer 6.0 - 8.0 Firefox 2.0 - 3.0 Opera 8.5 - 9.5 Safari 3.0 Google Chrome

8. RichFaces Instalação 1 - Baixar as bibliotecas do richfaces no site 2 - Configurar o web.xml

9. RichFaces - Instalação Configurar o web.xml <!-- Plugging the "Blue Sky" skin into the project --> <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>

10. RichFaces - Instalação Configurar o web.xml <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>

11. Exercício 1 Configurar o RichFaces em uma aplicação JSF Utilizar o richPanel para testar a instalação. <rich:panel> <f:facet name="header"> Cadastro </f:facet> OK, RichFaces funcionando </rich:panel>

12. RichFaces AjaxSupport É o mais importante componente do RichFaces. Ele permite adicionar ajax em componentes sem recurso de ajax Deve ser inserido diretamente como filho de outro componente. Seus atributos chaves são: 'event' e 'reRender' <h:form id="myform"> <h:panelGrid columns="2"> <h:inputText id="myinput" value="#{userBean.name}"> <a4j:support event="onkeyup" reRender="outtext" /> </h:inputText> <h:outputText id="outtext" value="#{userBean.name}" /> </h:panelGrid> </h:form>

13. Exercício 2 Utilizar o ajaxSupport para mudar o valor de um objeto conforme vai apertando cada tecla Utilizar o ajaxSupport para mudar o valor de um objeto ao sair do campo

14. RichFaces AjaxValidation É um componente desenvolvido para validações ajax dentro de componentes Input, é semelhante ao a4j:support , mas ele pula todas fases do JSF exceto validação. <h:inputText value="#{user.name}" required="true" id="t“ validatorMessage="Nome inválido"> <f:validateLength maximum="30" minimum="3"/> <rich:ajaxValidator event="onblur"/> </h:inputText> <rich:message for="t"/>

15. Exercício 3 Utilizar o ajaxValidation para validar campos de entrada de dados Utilizar o rich message <rich:message for=“name" > <f:facet name="passedMarker"> <h:graphicImage value="passed.gif" /> </f:facet> <f:facet name="errorMarker"> <h:graphicImage value="error.gif" /> </f:facet> </rich:message>

16. RichFaces beanValidator Criado a partir da versão 3.2.2 GA, provê suporte a validação usando Hibernate Validator. rich:beanValidator deve ser definido da mesma forma que um validador JSF <h:outputText value="Name:" /> <h:inputText value="#{validationBean.name}" id="name"> <rich:beanValidator summary="Invalid name"/> </h:inputText> <rich:message for="name" /> <a4j:commandButton value="Submit" action="#{validationBean.success}" reRender="progress"/> @NotEmpty @Pattern(regex=".*[^s].*", message="This string contain only spaces") @Length(min=3,max=12) private String name;

17. RichFaces <rich:dataTable value="#{cadastro.users}" var="cap" width="300px" <rich:column sortBy="#{cap.name}“ filterBy="#{cap.name}" filterEvent="onkeyup" > <f:facet name="header“><h:outputText value="Nome"/></f:facet> <h:outputText value="#{cap.name}"/> </rich:column> <rich:column sortBy="#{cap.endereco}"> <f:facet name="header“><h:outputText value="Endereco"/></f:facet> <h:outputText value="#{cap.endereco}"/> </rich:column> <f:facet name="footer"> <rich:datascroller id="ds“/> </f:facet> </rich:dataTable>

18. Exercício 4 Criar uma tabela utilizando o rich:dataTable, inserir paginação, ordenação, filtro....

19. Exercício 5 Criar um template de tela com menu na esqueda e tela no centro Utilizar o rich:panelMenu, rich:panelMenuGroup, rich:panelMenuItem Criar dois grupos com 2 itens cada. Cadastro Usuário Funcionário Relatórios Usuários Funcionários Criar 4 telas diferentes Utilizar o menu para chamar essas telas

20. Exercício 6 Modificar a cadastro JSF para utilizar botões ajax, verificar a diferença. a4j:commandButton

21. Exercício 7 Utilizar o componente de combo sugest, listando todos usuários cadastrado. <rich:comboBox suggestionValues="#{cadastro.users}" directInputSuggestions="true" defaultLabel=“Selecione..." />

22. Exercício 8 Utilizar o componente de modal <rich:modalPanel id="panel" width="350" height="100"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Modal Panel"></h:outputText> </h:panelGroup> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/> <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/> </h:panelGroup> </f:facet> <h:outputText value=“Olá nundo"></h:outputText> <br/> </rich:modalPanel> <h:outputLink value="#" id="link"> Abrir Modal <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/> </h:outputLink>

23. Exercício 9 (Opcional) Criar uma LOV (List Of Value) de UFs. Construir uma modal para apresentar as UFs, com uma tabela onde terá um link, que ao clicar, retorna a UF selecionada para tela anterior. <h:inputText id="ufInput" value="#{user.uf}" required="true" converter="ufConverter" /> <a4j:commandButton value="..." id="link2" ajaxSingle="true"> <rich:componentControl for="UFs" attachTo="link2" operation="show" event="onclick"/> </a4j:commandButton> <a4j:commandLink reRender="ufInput" immediate="true" ajaxSingle="true" onclick="#{rich:component('UFs')}.hide()" value="#{uf}"> <a4j:actionparam name="retornaUF" value="#{ufx.nome}" assignTo="#{user.uf.nome}"/> </a4j:commandLink>

24. Exercício 10 Criar um rich:panel e inserir efeito nele <rich:panel> <rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" /> .... panel content ....</rich:panel> <rich:panel id="bdbox" styleClass="box"> <f:facet name="header">BlindDown Effect</f:facet> <rich:effect event="onclick" type="BlindDown" params="duration:0.8" /> <h:outputText value="Click to Activate" /> </rich:panel> <rich:panel id="bubox" styleClass="box"> <f:facet name="header">BlindUp Effect</f:facet> <rich:effect event="onclick" type="BlindUp" params="duration:0.8" /> <rich:effect event="onclick" for="bubox" type="Appear" params="delay:3.0,duration:0.5" /> <h:outputText value="Click to Activate" /> </rich:panel> <rich:panel id="opacitybox" styleClass="box"> <f:facet name="header">Opacity Effect</f:facet> <rich:effect event="onclick" type="Opacity" params="duration:0.8, from:1.0, to:0.1" /> <rich:effect event="onclick" for="opacitybox" type="Appear" params="delay:3.0,duration:0.5" /> <h:outputText value="Click to Activate" /> </rich:panel>

25. Exercício 11 Entrar no site e verificar outros componentes e fazer testes http://livedemo.exadel.com/richfaces-demo/

26. FIM