PrimeFaces主題選取器

PrimeFaces主題選取器

作者：chszs，轉載需註明。部落客頁：http://blog.csdn.net/chszs

PrimeFaces整合了ThemeRoller CSS架構，而且預置了37種主題樣式。可以使用線上的ThemeRoller主題產生器工具產生自訂的主題。

應用一個主題到PrimeFaces項目很簡單，只需下載主題的JAR包檔案，並把它添加到項目的類路徑下，再配置PrimeFaces使用此主題即可。
主題包下載：http://repository.primefaces.org/org/primefaces/themes/all-themes/1.0.9/all-themes-1.0.9.jar

主題使用配置：在web.xml檔案中添加下面的內容

<context-param>  <param-name>primefaces.THEME</param-name>  <param-value>swanky-purse</param-value></context-param>

PrimeFaces的主題選取器使得在頁面上切換主題時無需重新整理整個頁面。

屬性工作表

主題選取器用法

主題選取器的用法與單選菜單selectOneMenu的用法非常相似。

<p:themeSwitcher style="width:150px">  <f:selectItem itemLabel="Choose Theme" itemValue="" />  <f:selectItems value="#{bean.themes}" /></p:themeSwitcher>

有狀態的主題選取器

預設狀態下，主題選取器僅僅改變主題樣式，不進行頁面重新整理，一旦你喜歡上改變後的新主題，你可以使用Ajax儲存新主題為設定項。

<p:themeSwitcher value="#{bean.theme}" effect="fade">  <f:selectItem itemLabel="Choose Theme" itemValue="" />  <f:selectItems value="#{themeSwitcherBean.themes}" />  <p:ajax listener="#{bean.saveTheme}" /></p:themeSwitcher>

使用swanky-purse主題後的UI