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!!!!
Amigo una pregunta: existe algun formato de factura en primeFaces??? pues q necesitamos algo relacionado.. muchas gracias por tu tiempo….
Almir Ricardo 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.

Popular posts from this blog

FileUpload con Primefaces

FileUpload con Primefaces

Si queremos subir imagenes a nuestra aplicación usaremos el componente FileUpload Debemos realizar los siguientes pasos:
Agregar al archivo web.xml

   <filter>        <filter-name>PrimeFaces FileUpload Filter</filter-name>        <filter-class>            org.primefaces.webapp.filter.FileUploadFilter        </filter-class>    </filter>    <filter-mapping>        <filter-name>PrimeFaces FileUpload Filter</filter-name>        <servlet-name>Faces Servlet</servlet-name>    </filter-mapping>



Crear dentro de resources el directorio donde deseamos almacenar las imagenes En este ejemplo: resources/fotos/clinicas y agregue una imagen llamada fotos.png que se usará como imagen inicial.



En JSFUtil u otro @Named Beans que usemos agregamos tres métodos uno para obtener el path de la aplicación web , otro para obtener el path relativo a /fotos/clinicas y el otro para copiar los archivos. /*

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 ejecutara en nuestro servidor local y…

NetBeans 8.0.1 en Español

NetBeans 8.0.1 disponible en español
http://bits.netbeans.org/netbeans/8.0.1/community/
Esta disponible NetBeans 8.0.1 en varios idiomas .


Puedes descargar la nueva versión y utilizar las nuevas características