How to do ThemeSwitcher using Primefaces

Question

This is the demo that i'm trying to do. http://www.primefaces.org/showcase/ui/misc/themeSwitcher.xhtml

My HTML code:

       <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>

My 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());
}
}

I have all-themes-1.0.9.jar and primefaces-3.5.jar I have research and try the code but the dropdown list for the themes doesn't come out.

The outcome look like the capture below:

How to solve it?Any idea?

Another Problem My current code is quite long, I want to short it but i have tried to change the code and it doesn't work.

Current Code:

<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" />

I tried:

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

AND

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

I tried the above two and it doesn't work.Any idea?

Answer 1

Why are you using a TreeMap to store themes and list them? As in the example you linked, you MUST use a List instead of a Map in the <f:select> tag

In your 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
}

And you will get results in your view dropbox.