一、绪
richface默认提供了8套皮肤(plain emeraldTown blueSky wine japanCherry ruby classic deepMarine),位于richfaces-impl包的META-INF\skins目录下:
另外提供了3个可选皮肤(laguna darkX glass)分别以独立jar包发布。
二、动态变换皮肤
richfaces允许用户在运行期,动态设置皮肤。其原理可以通过一个例子一目了然。
web.xml配置动态皮肤,其中的skinBean是MBean,见下文。
<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>#{skinBean.skin}</param-value> </context-param> <context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param>
faces-config.xml配置MBean。此步骤为可选,如果你使用JSF2.0中的inject,无需使用配置文件,即可管理MBean。
<managed-bean> <managed-bean-name>skinBean</managed-bean-name> <managed-bean-class>mars.jsf.test.SkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>skin</property-name> <value>blueSky</value> </managed-property> </managed-bean>
MBean很简单,猜都猜得到。
package mars.jsf.test;
public class SkinBean {
private String skin;
public String getSkin() {
return skin;
}
public void setSkin(String skin) {
this.skin = skin;
}
}
xhtml/jsf/jsp代码如下,你可以把它加入你的页面中。
<rich:tabPanel>
<rich:tab label="Change the Skin">
<h:panelGrid columns="1">
<h:selectOneListbox id="select" value="#{skinBean.skin}" οnchange="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="deepMarine" itemValue="deepMarine" />
<f:selectItem itemLabel="_laguna" itemValue="laguna" />
<f:selectItem itemLabel="_darkX" itemValue="darkX" />
<f:selectItem itemLabel="_glassX" itemValue="glassX" />
</h:selectOneListbox>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
运行期,页面对皮肤的动态改变,通过MBean通知给richfaces,richfaces将皮肤的值赋给org.richfaces.SKIN,以达到更换皮肤的目的。
三、自定义皮肤
自定义皮肤的目的是同一管理整个应用的控件效果,如果你的局部需要特殊的效果,还是不要忘记css。首先说,richfaces自定义皮肤很简单。
如上文所述,皮肤的配置文件放在richfaces-impl包的META-INF\skins目录下。我们最初的尝试是拷贝其中的一个到应用的源代码中,并更名。我的示例中是:
testFacelets\JavaSource\iviewSkin.skin.properties --注意:请保持后缀名。
然后指定web.xml中的皮肤为iviewSkin即可。
<managed-bean> <managed-bean-name>skinBean</managed-bean-name> <managed-bean-class>mars.jsf.test.SkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>skin</property-name> <value>iviewSkin</value> </managed-property> </managed-bean>