richface 皮肤

一、绪

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}" 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="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>