如何使用 Primefaces 做 ThemeSwitcher

Question

这是我正在尝试做的演示。 http://www.primefaces.org/showcase/ui/misc/themeSwitcher.xhtml

我的HTML代码：

       <h:form >

       <h:panelGrid columns="2" cellpadding="10">        
<h:outputText value="Basic:"></h:outputText>
           <p:themeSwitcher effectSpeed="normal" effect="fade" style="width:165px" id="defaultSwitcher" value="#{themeSwitcherBean.theme}">
              <f:selectItem itemLabel="Choose Theme" itemValue="" />
              <f:selectItems value="#{themeSwitcherBean.themes}" />
              <p:ajax global="false" listener="#{themeSwitcherBean.saveTheme}" />
           </p:themeSwitcher>
           </h:panelGrid>

<p:separator />

<p:dialog header="Dialog" widgetVar="dlg" minHeight="40" modal="true">
    <h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>   

<p:commandButton value="Dialog" onclick="PF('dlg').show()" type="button" style="display:block;"/>

<p:panel header="Panel" style="margin:20px 0px">
    Panel Content
</p:panel>

<p:spinner />

<p:separator />

<p:accordionPanel>
    <p:tab title="Tab1">Tab1 Content</p:tab>
    <p:tab title="Tab2">Tab2 Content</p:tab>
    <p:tab title="Tab3">Tab3 Content</p:tab>
</p:accordionPanel>

我的web.xml:

<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{themeSwitcherBean.theme}</param-value>
</context-param>

themeSwithcherBean.java:

package com.beans;
import java.io.Serializable;
import java.util.Map;
import java.util.TreeMap;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;
import org.primefaces.component.themeswitcher.ThemeSwitcher;

@ManagedBean(name = "themeSwitcherBean")
@SessionScoped
public class ThemeSwitcherBean implements Serializable{
/**
*
*/
private static final long serialVersionUID = 7448888248791054139L;
private Map<String, String> themes;
private String theme= "south-street";
public Map<String, String> getThemes() {
return themes;
} 

public String getTheme() {
  return theme;
}   

public void setTheme(String theme) {
  this.theme = theme;
}

@PostConstruct
public void init() {
  themes = new TreeMap<String, String>();
themes.put("Aristo", "aristo");
themes.put("Black-Tie", "black-tie");
 themes.put("Blitzer", "blitzer");
themes.put("Bluesky", "bluesky");
themes.put("Casablanca", "casablanca");
themes.put("Cupertino", "cupertino");
themes.put("Dark-Hive", "dark-hive");     
  themes.put("Dot-Luv", "dot-luv");
  themes.put("Eggplant", "eggplant");
  themes.put("Excite-Bike", "excite-bike");
  themes.put("Flick", "flick");
  themes.put("Glass-X", "glass-x");
  themes.put("Hot-Sneaks", "hot-sneaks");
  themes.put("Humanity", "humanity");
  themes.put("Le-Frog", "le-frog");
  themes.put("Midnight", "midnight");
  themes.put("Mint-Choc", "mint-choc");
  themes.put("Overcast", "overcast");
  themes.put("Pepper-Grinder", "pepper-grinder");
  themes.put("Redmond", "redmond");
  themes.put("Rocket", "rocket");
  themes.put("Sam", "sam");
  themes.put("Smoothness", "smoothness");
  themes.put("South-Street", "south-street");
  themes.put("Start", "start");
  themes.put("Sunny", "sunny");
  themes.put("Swanky-Purse", "swanky-purse");
  themes.put("Trontastic", "trontastic");
  themes.put("UI-Darkness", "ui-darkness");
  themes.put("UI-Lightness", "ui-lightness");
  themes.put("Vader", "vader");
}

public void saveTheme(AjaxBehaviorEvent ajax)
{
setTheme((String) ((ThemeSwitcher)ajax.getSource()).getValue());
}
}

我有 all-themes-1.0.9.jar 和 primefaces-3.5.jar 我已经研究并尝试了代码，但是主题的下拉列表没有出现。

结果如下图所示：

如何解决？有什么想法吗？

另一个问题我目前的代码很长，我想缩短它，但我尝试更改代码但它不起作用。

当前代码：

<f:selectItem itemLabel="Afterdark" itemValue="afterdark" />
              <f:selectItem itemLabel="Afternoon" itemValue="afternoon" />
              <f:selectItem itemLabel="Afterwork" itemValue="afterwork" />
              <f:selectItem itemLabel="Aristo" itemValue="aristo" />
              <f:selectItem itemLabel="Black-Tie" itemValue="black-tie" />
              <f:selectItem itemLabel="Blitzer" itemValue="blitzer" />
              <f:selectItem itemLabel="Bluesky" itemValue="bluesky" />
              <f:selectItem itemLabel="Bootstrap" itemValue="bootstrap" />
              <f:selectItem itemLabel="Casablanca" itemValue="casablanca" />
              <f:selectItem itemLabel="Cupertino" itemValue="cupertino" />
              <f:selectItem itemLabel="Cruze" itemValue="cruze" />
              <f:selectItem itemLabel="Dark-Hive" itemValue="dark-hive" />
              <f:selectItem itemLabel="Delta" itemValue="delta" />
              <f:selectItem itemLabel="Dot-Luv" itemValue="dot-luv" />
              <f:selectItem itemLabel="Eggplant" itemValue="eggplant" />
              <f:selectItem itemLabel="Excite-Bike" itemValue="excite-bike" />
              <f:selectItem itemLabel="Flick" itemValue="flick" />
              <f:selectItem itemLabel="Glass-X" itemValue="glass-x" />
              <f:selectItem itemLabel="Home" itemValue="home" />
              <f:selectItem itemLabel="Hot-Sneaks" itemValue="hot-sneaks" />
              <f:selectItem itemLabel="Humanity" itemValue="humanity" />
              <f:selectItem itemLabel="Le-Frog" itemValue="le-frog" />
              <f:selectItem itemLabel="Midnight" itemValue="midnight" />
              <f:selectItem itemLabel="Mint-Choc" itemValue="mint-choc" />
              <f:selectItem itemLabel="Overcast" itemValue="overcast" />
              <f:selectItem itemLabel="Pepper-Grinder" itemValue="pepper-grinder" />
              <f:selectItem itemLabel="Redmond" itemValue="redmond" />
              <f:selectItem itemLabel="Rocket" itemValue="rocket" />
              <f:selectItem itemLabel="Sam" itemValue="sam" />
              <f:selectItem itemLabel="Smoothness" itemValue="smoothness" />
              <f:selectItem itemLabel="South-Street" itemValue="south-street" />
              <f:selectItem itemLabel="Start" itemValue="start" />
              <f:selectItem itemLabel="Sunny" itemValue="sunny" />
              <f:selectItem itemLabel="Swanky-Purse" itemValue="swanky-purse" />
              <f:selectItem itemLabel="Trontastic" itemValue="trontastic" />
              <f:selectItem itemLabel="UI-Darkness" itemValue="ui-darkness" />
              <f:selectItem itemLabel="UI-Lightness" itemValue="ui-lightness" />
              <f:selectItem itemLabel="Vader" itemValue="vader" />

我试过了：

<f:selectItems value="[afterdark, afternoon, afterwork, aristo, black-tie, blitzer, bluesky, bootstrap, casablanca, cupertino, cruze, dark-hive, delta, dot-luv, eggplant, excite-bike, flick, glass-x, home, hot-sneaks, humanity, le-frog, midnight, mint-choc, overcast, pepper-grinder, redmond, rocket, sam, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader]" var="theme" itemLabel="" itemValue=""/>

和

<f:selectItems value="#{themeSwitcherBean.themes}" />

上面两个我都试过了work.Any不行吗？

Answer 1

为什么要使用 TreeMap 来存储主题并列出它们？在您链接的 example 中，您必须在 <f:select> 标签

中使用 List 而不是 Map ]

在你的themeSwithcherBean.java

private List<Theme> themes;

@PostConstruct
public void init() {
    themes = new ArrayList<Theme>();
    themes.add(new Theme(0, "Afterdark", "afterdark"));
    themes.add(new Theme(1, "Afternoon", "afternoon"));

    // and many more
}

您将在视图保管箱中获得结果。

如何使用 Primefaces 做 ThemeSwitcher

How to do ThemeSwitcher using Primefaces

jsf

primefaces

jsf-2