Download - Rich faces

Transcript
Page 1: Rich faces

RichFaces

Introdução

Page 2: Rich faces

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.

Page 3: Rich faces

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.

Page 4: Rich faces

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

Page 5: Rich faces

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

Page 6: Rich faces

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

Page 7: Rich faces

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

Page 8: Rich faces

RichFaces

Instalação

1 - Baixar as bibliotecas do richfaces no site

2 - Configurar o web.xml

Page 9: Rich faces

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>

Page 10: Rich faces

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>

Page 11: Rich faces

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>

Page 12: Rich faces

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>

Page 13: Rich faces

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

Page 14: Rich faces

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"/>

Page 15: Rich faces

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>

Page 16: Rich faces

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;

Page 17: Rich faces

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>

Page 18: Rich faces

Exercício 4

• Criar uma tabela utilizando o rich:dataTable , inserir paginação, ordenação,

filtro....

Page 19: Rich faces

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

Page 20: Rich faces

Exercício 6

• Modificar a cadastro JSF para utilizar botões ajax,

verificar a diferença.

– a4j:commandButton

Page 21: Rich faces

Exercício 7

• Utilizar o componente de combo sugest, listando todos

usuários cadastrado.

<rich:comboBox suggestionValues="#{cadastro.users}"

directInputSuggestions="true" defaultLabel=“Selecione..." />

Page 22: Rich faces

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>

Page 23: Rich faces

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>

Page 24: Rich faces

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>

Page 25: Rich faces

Exercício 11

• Entrar no site e verificar outros componentes e fazer

testes

• http://livedemo.exadel.com/richfaces-demo/

Page 26: Rich faces

FIM


Top Related