Skip to main content

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

Comments

Anonymous said…
Es mi primer proyecto en JSF, te quiero preguntar lo siguiente:

La modificaciĆ³n del WEB.XML que indicas, sustituye al original??? El mio es:


javax.faces.PROJECT_STAGE
Development


Y en esta parte:




donde debo colocar esa referencia externa en el atributo onclick???

Gracias por tu tiempo y al menos me sa una idea... :)
Anonymous said…
Otra molestia... ya lo arreglƩ... pero al momento de darle cambiar... no me cambia nada... me podrƭas ayudar??? Gracias!!!!
Unknown said…
Amigo una pregunta: existe algun formato de factura en primeFaces??? pues q necesitamos algo relacionado.. muchas gracias por tu tiempo….
Unknown said…
Saludos,
Definitivamente una persona no debe evangelizar cuando no puede mantener su labor.
Un blog con preguntas ignoradas, es como un acertijo sin pistas.
Estos chicos llevan varios aƱos esperando un respuesta y ahora yo, lo minimo que debes hacer es responder nuestra preguntas, como agradecimiento al detenernos a leer tu post.

Cordialmente.
Unknown said…
Ɠtimo tutorial.
Corrigir :



Para:






Em Algumas versƵes o dialogo nĆ£o funcionarĆ” em vez de: @ManagedBean(name = "cambiadorTemas")

Obrigado pelo tutorial, bem explicado.

josetrafford said…
Excelente aporte, una pregunta, si guardo el ID del tema para cada usuario que ya eligiĆ³ su tema, pero al momento de loguearse quiero que cargue el tema que eligiĆ³ como puedo hacerlo?

De antemano gracias!!!

Popular posts from this blog

Cambiando el estado de un checkbox

Cambiando el Estado de un CheckBox Algunas veces deseamos controlar el estado de un checkbox o cambiarlo segĆ¹n determinadas condiciones. Pasos: 1. Creamos un proyecto Web. 2. En el diseƱador agregamos un checkbox y dos botones. * Dar click derecho en el checkbox y luego seleccionar Add Binding Attribute, para agregar los atributos al checkbox, de manera que los podamos usar en nuestro cĆ³digo. Generando automĆ”ticamente private Checkbox checkbox1 = new Checkbox(); public Checkbox getCheckbox1() { return checkbox1; } public void setCheckbox1(Checkbox c) { this.checkbox1 = c; } 3.Damos click derecho en el botĆ³n Habilitar, y seleccionamos Edit Action Event Handler. A continuaciĆ³n, agregamos el cĆ³digo: this.checkbox1.setSelected(true);, el mĆ©todo setSelected con valor true, marca el checkbox como seleccionado, y un valor de false, quita la marca. public String button1_action() { // TODO: Process the action. Return value is a navigation //

Corregir el error el archivo de manifiesto en proyectos maven

Corregir el error en el archivo de manifiesto en proyectos maven Si creamos un proyecto maven con NetBeans e intentamos ejecutarlo encontrarĆ­amos el siguiente error Agregamos el plugin   <artifactId>maven-jar-plugin</artifactId>  <plugin>                 <groupId>org.apache.maven.plugins</groupId>                 <artifactId>maven-jar-plugin</artifactId>                 <version>2.4</version>                 <configuration>                     <archive>                         <manifest>                             <mainClass>org.javscaz.maven1.App</mainClass>                         </manifest>                                           </archive>                 </configuration>             </plugin> Luego al construir el proyecto con dependencias, podemos ejecutar el .jar

Tutorial bƔsico de aplicaciones Web con NetBeans parte 1

NetBeans ofrece un excelente soporte para el desarrollo de aplicaciones Web, en esta ocasiĆ³n lo haremos utilizando el Framework Java Server Faces 2.0. En el Menu Seleccionamos Nuevo->Proyecto y luego en Categorias Java Web y en tipo de Proyectos Web  Application indicamos el nombre del proyecto Seleccinamos el servidor Web, usamos GlassFish ya que este soporta EJB3.0 y JSF 2.0 Framework Java Server Faces El IDE genera el esquelto del proyecto Web Pages   almacenamos las paginas .html, xhtml, jsf, los archivos de recursos, los scripts .js, imagenes Source Packages    Son las clases Java  Test Packages    Son las clases que usamos para los Test Libraries     Tenemos las bibliotecas de Java y GlassFish necesarias para ejecutar la aplicaciĆ³n Web. Test Libraries     EstĆ”n las bibliotecas usadas para los test  Configuration Files    Archivos de configuraciĆ³n de la aplicaciĆ³n. Ejecutamos la aplicaciĆ³n  Esperamos que se inicie GlassFish y se cargue la aplicaciĆ³n Este se