4.4.7. Changing skin in runtime
You can change skins during runtime by defining the following EL-expression in your
web.xml
.
<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>#{skinBean.skin}</param-value> </context-param>
The
skinBean
code looks like this:
public class SkinBean { private String skin; public String getSkin() { return skin; } public void setSkin(String skin) { this.skin = skin; } }
You must also set the
skin
property's initial value in the configuration file. To set classic
:
<managed-bean> <managed-bean-name>skinBean</managed-bean-name> <managed-bean-class>SkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>skin</property-name> <value>classic</value> </managed-property> </managed-bean>
You can also change the properties of the default skin. To do so, edit the properties of the default skin. The following shows you example page code:
<h:form> <div style="display: block; float: left"> <h:selectOneRadio value="#{skinBean.skin}" border="0" layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic" 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" /> <f:selectItem itemLabel="blueSky Modified" itemValue="blueSkyModify" /> </h:selectOneRadio> </div> <div style="display: block; float: left"> <rich:panelBar height="100" width="200"> <rich:panelBarItem label="Item 1" style="font-family: monospace; font-size: 12;"> Changing skin in runtime </rich:panelBarItem> <rich:panelBarItem label="Item 2" style="font-family: monospace; font-size: 12;"> This is a result of the modification "blueSky" skin </rich:panelBarItem> </rich:panelBar> </div> </h:form>
The above code will generate the following list of options:
Figure 4.5. Changing skin in runtime