View
5.529
Download
0
Category
Preview:
DESCRIPTION
Curso de RichFaces da VerdeSource
Citation preview
RichFaces
Introdução
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.
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 , action e listeners.
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
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
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
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
RichFaces
Instalação
1 - Baixar as bibliotecas do richfaces no site
2 - Configurar o web.xml
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>
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>
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>
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>
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
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"/>
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>
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;
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>
Exercício 4
• Criar uma tabela utilizando o rich:dataTable , inserir paginação, ordenação,
filtro....
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
Exercício 6
• Modificar a cadastro JSF para utilizar botões ajax,
verificar a diferença.
– a4j:commandButton
Exercício 7
• Utilizar o componente de combo sugest, listando todos
usuários cadastrado.
<rich:comboBox suggestionValues="#{cadastro.users}"
directInputSuggestions="true" defaultLabel=“Selecione..." />
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>
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>
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>
Exercício 11
• Entrar no site e verificar outros componentes e fazer
testes
• http://livedemo.exadel.com/richfaces-demo/
FIM
Recommended