动态改变RichFaces的皮肤

给RichFaces设置一个皮肤很简单，只要在web.xml文件中写以下这一段就可以了：



Xml代码
<context-param> 
  <param-name>org.richfaces.SKIN</param-name> 
  <param-value>ruby</param-value> 
</context-param> 

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>ruby</param-value>
</context-param>

但是，有时候你也许会要在程序运行的时候去动态改变RichFaces的皮肤。甚至你可能会想让每个用户保存自己喜欢的皮肤。那该怎么做呢？



首先，我们需要将硬编码到web.xml中的皮肤设置改变为一个EL表达式：

Xml代码
<context-param> 
  <param-name>org.richfaces.SKIN</param-name> 
  <param-value>#{skinBean.skin}</param-value> 
</context-param> 

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>#{skinBean.skin}</param-value>
</context-param>

skinBean是一个JSF managed Bean，类似这样：

Java代码
public class SkinBean {  
   
   private String skin;  
   
   public String getSkin() {  
    return skin;  
   }  
   public void setSkin(String skin) {  
    this.skin = skin;  
   }  
} 

public class SkinBean {

   private String skin;

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

当然，你需要在JSF的配置文件里面注册一下这个Bean：

Xml代码
<managed-bean> 
  <managed-bean-name>skinBean</managed-bean-name> 
  <managed-bean-class>demo.SkinBean</managed-bean-class> 
  <managed-bean-scope>session</managed-bean-scope> 
  <managed-property> 
   <property-name>skin</property-name> 
   <value>ruby</value> 
  </managed-property> 
</managed-bean> 

<managed-bean>
  <managed-bean-name>skinBean</managed-bean-name>
  <managed-bean-class>demo.SkinBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
  <managed-property>
   <property-name>skin</property-name>
   <value>ruby</value>
  </managed-property>
</managed-bean>

我们会想要设置一个默认的皮肤，同时我们需要将这个Bean的声明周期为Session。之所以不放到request中，是因为如果放到request中，那么每次请求到达的时候，都会去刷新并将皮肤恢复成默认的，而我们希望看到的效果是，用户每次登录的整个过程，皮肤是一直不变的（除非用户主动去改变它）。



通过下面的页面，我们立刻就能看到效果了。

Xml代码
<h:form> 
   <rich:panel header="I can change skins" style="width: 300px"> 
    <h:panelGrid columns="2"> 
       <h:selectOneListbox id="select" value="#{skinBean.skin}" onchange="submit()"> 
        <f:selectItem itemLabel="plain" itemValue="plain" /> 
        <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /> 
        <f:selectItem itemLabel="blueSky" itemValue="blueSky" /> 
        <f:selectItem itemLabel="wine" itemValue="wine" /> 
        <f:selectItem itemLabel="japanCherry" itemValue="japanCherry" /> 
        <f:selectItem itemLabel="ruby" itemValue="ruby" /> 
        <f:selectItem itemLabel="classic" itemValue="classic" /> 
        <f:selectItem itemLabel="laguna" itemValue="laguna" /> 
        <f:selectItem itemLabel="deepMarine" itemValue="deepMarine" /> 
       </h:selectOneListbox> 
           <rich:tabPanel> 
        <rich:tab label="Tab 1">Tabs also change color</rich:tab> 
        <rich:tab label="Tab 2">...</rich:tab> 
       </rich:tabPanel> 
        </h:panelGrid> 
   </rich:panel> 
</h:form> 

<h:form>
   <rich:panel header="I can change skins" style="width: 300px">
<h:panelGrid columns="2">
   <h:selectOneListbox id="select" value="#{skinBean.skin}" onchange="submit()">
<f:selectItem itemLabel="plain" itemValue="plain" />
<f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" />
<f:selectItem itemLabel="blueSky" itemValue="blueSky" />
<f:selectItem itemLabel="wine" itemValue="wine" />
<f:selectItem itemLabel="japanCherry" itemValue="japanCherry" />
<f:selectItem itemLabel="ruby" itemValue="ruby" />
<f:selectItem itemLabel="classic" itemValue="classic" />
<f:selectItem itemLabel="laguna" itemValue="laguna" />
<f:selectItem itemLabel="deepMarine" itemValue="deepMarine" />
   </h:selectOneListbox>
           <rich:tabPanel>
<rich:tab label="Tab 1">Tabs also change color</rich:tab>
<rich:tab label="Tab 2">...</rich:tab>
   </rich:tabPanel>
        </h:panelGrid>
   </rich:panel>
</h:form>

这里放一个tab组件，其实是为了让你看到外观上的改变效果的，没有功能上的实际作用。你还可以放几个其他组件上去，看看效果的变化。



如果你想要学习如何编写自己的皮肤，请参考这篇文章XXX（稍后放出：）



其他你可以尝试一下的，就是改变一下标准组件的样式，我们的例子中为h:selectOneListbox：

Xml代码
<context-param> 
   <param-name>org.richfaces.CONTROL_SKINNING</param-name> 
   <param-value>enable</param-value> 
</context-param> 

评论

3 楼 yuanliyin 2010-12-16  

更换皮肤很不错！

2 楼 marshan 2010-09-09  

<dependency>
<groupId>org.richfaces.samples</groupId>
<artifactId>darkX</artifactId>
<version>${richfaces.version}</version>
</dependency>
<dependency>
<groupId>org.richfaces.samples</groupId>
<artifactId>laguna</artifactId>
<version>${richfaces.version}</version>
</dependency>
<dependency>
<groupId>org.richfaces.samples</groupId>
<artifactId>glassX</artifactId>
<version>${richfaces.version}</version>
</dependency>

1 楼 hanwn123 2009-08-06  

照你说的做了一下，可以更换皮肤了，很不错哈。