JSF – Alterando Skin RichFaces em tempo de execução

RichFaces é uma biblioteca de componentes para aplicações que utilizam JSF. Uma das suas características mais poderosas é o uso embutido do AJAX em seus componentes, assim o desenvolvedor não precisa se preocupar em reiventar a roda criando funções JavaScript. De maneira simples podemos utilizar vários componentes complexos apenas inserindo-os em nossa aplicação.

Uma característica bem bacana é o suporte a skins que deixam a interface da aplicação padronizada.

Neste post irei demonstrar como modificar a skin do RichFaces em tempo de execução.

Estrutura do Projeto

Bean.java

public class Bean implements Serializable {

 private static final long serialVersionUID = -6042519587796329117L;

 private String skin;

 public String getSkin() {
 return skin;
 }
 public void setSkin(String skin) {
 this.skin = skin;
 }

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 id="WebApp_ID" version="2.5">
 <display-name>jsf</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <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>
 <url-pattern>*.faces</url-pattern>
 </servlet-mapping>

 <context-param>
 <param-name>org.ajax4jsf.SKIN</param-name>
 <param-value>#{bean.skin}</param-value>
 </context-param>

 <filter>
 <display-name>Ajax4jsf Filter</display-name>
 <filter-name>ajax4jsf</filter-name>
 <filter-class>org.ajax4jsf.Filter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>ajax4jsf</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
 <dispatcher>INCLUDE</dispatcher>
 </filter-mapping>

 <context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>client</param-value>
 </context-param>
</web-app>

faces-config.xml

 <?xml version="1.0" encoding="UTF-8"?>

<faces-config
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
 version="1.2">

 <managed-bean>
 <managed-bean-name>bean</managed-bean-name>
 <managed-bean-class>br.com.serjaum.mb.Bean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
 <managed-property>
 <property-name>skin</property-name>
 <value>blueSky</value>
 </managed-property>
 </managed-bean>

</faces-config>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.org/rich"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Modificando RichFaces skin em runtime...</title>
</head>
<body>
<f:view>
 <h:form>
 <rich:panel header="Skin: #{bean.skin}" style="width: 300px">
 <h:panelGrid columns="2">
 <h:outputLabel value="Escolha " />
 <h:selectOneMenu value="#{bean.skin}" onchange="submit()">
 <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" />
 <f:selectItem itemLabel="blueSky" itemValue="blueSky" />
 <f:selectItem itemLabel="ruby" itemValue="ruby" />
 <f:selectItem itemLabel="classic" itemValue="classic" />
 <f:selectItem itemLabel="deepMarine" itemValue="deepMarine" />
 </h:selectOneMenu>
 </h:panelGrid>
 </rich:panel>
</h:form>
</f:view>
</body>
</html>

Importando o projeto

  1. Baixe o projeto completo >>aqui<<;
  2. Descompacte o projeto no seu workspace;
  3. No Eclipse vá em: File –> Import –> General – Existing Projects into Workspace –> Next –> Selecione o projeto descompactado no workspace –> Finish.

Resultado

Até o próximo post!


One Comment on “JSF – Alterando Skin RichFaces em tempo de execução”

  1. juniorsatanas disse:

    Muito bom isso, vou fazer aqui…

    E a parte de 1….PARA …………N usando SelecOnMenu em XHTML ?

    tu sabe como fazer ?

    abraço.

    junior


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s