Personalizando el Primefaces Selector de Temas

Si deseamos personalizar el selector de temas de primefaces para mostrar algo como esto.

Pasos:

1. Descargar los temas desde (archivos .jar)

http://primefaces.org/themes.html

agregarlo a las bibliotecas del proyecto

2.  En el archivo web.xml, agregar

<context-param>

<param-name>primefaces.THEME</param-name>

<param-value>#{cambiadorTemas.tema}</param-value>

</context-param>

3. Creamos la clase CambiadorTemas.java

@Named(value = "cambiadorTemas")
@SessionScoped
public class CambiadorTemas implements Serializable {

     private static final long serialVersionUID = 1L;
private String tema="afterdark";
     private Map<String, String> themes;
     public Map<String, String> getThemes() {
         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("none", "none");
         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");
     return themes;
}

 public void setThemes(Map<String, String> themes) {
     this.themes = themes;
 }

public CambiadorTemas() {
}

public String getTema() {
    return tema;
 }

 public void setTema(String tema) {
     this.tema = tema;
 }

public String cambiar(){
   return null;
 }

}

4.En el menu invocamos el dialogo

 <p:menuButton value="#{mensajes['msg.tools']}">

                <p:menuitem onclick="dlgTheme.show();" value="#{mensajes['msg.theme']}" immediate = 

        </p:menuButton>

5. Agregamos el dialogo

<h:form id="formtema" >

     <p:dialog header="Theme" widgetVar="dlgTheme" showEffect="bounce" hideEffect="explode" width="400"

                height="200">  

     <h:panelGrid columns="2">

          <p:selectOneMenu  value="#{cambiadorTemas.tema}" immediate = "true"   editable="true">

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

          </p:selectOneMenu> 

          <p:commandButton value="Change" action="#{cambiadorTemas.cambiar}" ajax="false"/>

   </h:panelGrid>

  </p:dialog>

</h:form>