Error - Selecting theme SAM using ThemeSwitcher

[bercolax]

Using latest M4-SNAPSHOT as on 20-Oct-2011.

All the other themes work fine. On selecting SAM the following error occurs. The SAM value I am using is

Code: Select all

<p:menuitem value="Sam" ajax="false"><f:setPropertyActionListener value="sam" target="#{themeSwitcherBean.theme}" /></p:menuitem>

type Exception report

message

descriptionThe server encountered an internal error () that prevented it from fulfilling this request.

exception

javax.servlet.ServletException: Error loading theme, cannot find "theme.css" resource of "primefaces-sam" library

root cause

javax.faces.FacesException: Error loading theme, cannot find "theme.css" resource of "primefaces-sam" library

[spauny]

It's because SAM theme(jar) isn't included... You can download the theme manually and add it to your classpath:
http://www.primefaces.org/themes.html

[cagatay.civici]

Aristo is the default theme starting from 3.0.M4, Sam is available for download from theme gallery.

[bercolax]

Thanks for the info. Included missing dependency for sam (as now it is not the default theme)

Code: Select all

        <dependency>
            <groupId>org.primefaces.themes</groupId>
            <artifactId>sam</artifactId>
            <version>${theme.version}</version>
        </dependency>

[Oleg]

I have proposed a long time ago to have ALL themes as external projects. Sam or aristo, all themes should be available as jar files. PrimeFaces could save a check in HeadRenderer then, doesn't have issue as this one, etc. I simply think it's better in all opinions.

[cagatay.civici]

No, it is better to provide a built in theme as the default.

[spauny]

It's far better with built-in theme... I'm using 3.0.M4 and for some reason I couldn't access the themes so I downloaded and added the each one I like in my classpath...

[spauny]

Thanks for the info. Included missing dependency for sam (as now it is not the default theme)

Code: Select all

        <dependency>
            <groupId>org.primefaces.themes</groupId>
            <artifactId>sam</artifactId>
            <version>${theme.version}</version>
        </dependency>

Bercolax I would like to ask you something: How did you access the themes using primefaces 3.0.M4? I couldn't...I had to download them manually and implement a class that would set them in page, dynamically.
Would you care for showing me some code and tell me where did you get the 3.0.M4 jar? Maybe it's something with my jar because I encountered various errors...
Thank you very much!

[smithh032772]

FYI (wanted to share how I added Themes, successfully, to my web app):

1. Downloaded all themes from Themes repository.

2. Add all theme JAR files to my library list or classpath (I use NetBeans, so I created new library called, PrimeFacesThemes, which contained all primefaces/jquery theme JAR files).

3. Updated web.xml with the following (which includes EL expression to access themeSwitcher managed bean).

Code: Select all

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

4. ThemeSwitcher.java bean
NOTE: constructor defaults theme attribute

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package pf;

import java.io.Serializable;
import java.util.Map;
import java.util.TreeMap;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

/**
 *
 * @author Administrator
 */
@ManagedBean(name = "themeSwitcher")
@SessionScoped
public class ThemeSwitcher implements Serializable {

    private Map<String, String> themes;
    private String theme;
    //private UserPreferences userPrefs;

    public ThemeSwitcher () {
        
        //theme = userPrefs.getTheme();
        theme = "start";
        
        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("Home", "home");
        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 Map<String, String> getThemes() {
        return themes;
    }

    public String getTheme() {
        return theme;
    }

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

    public void saveTheme() {
        //userPrefs.setTheme(theme);
    }

/*
    public void setUserPrefs(UserPreferences userPrefs) {
        this.userPrefs = userPrefs;
    }
*/
    
}

5. Added Theme submenu and menuitems to p:menubar component:

Code: Select all

    <p:submenu label="Themes">
        <!-- DO NOT USE 'aristo' theme, since built-in/default theme; does NOT render well for some reason
        <p:menuitem value="Aristo" ajax="false" actionListener="#{themeSwitcher.setTheme('aristo')}" style="font-size: smaller !important;"/>
        -->
        <p:menuitem value="Black-Tie" ajax="false" actionListener="#{themeSwitcher.setTheme('black-tie')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Blitzer" ajax="false" actionListener="#{themeSwitcher.setTheme('blitzer')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Bluesky" ajax="false" actionListener="#{themeSwitcher.setTheme('bluesky')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Casablanca" ajax="false" actionListener="#{themeSwitcher.setTheme('casablanca')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Cupertino" ajax="false" actionListener="#{themeSwitcher.setTheme('cupertino')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Dark-Hive" ajax="false" actionListener="#{themeSwitcher.setTheme('dark-hive')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Dot-Luv" ajax="false" actionListener="#{themeSwitcher.setTheme('dot-luv')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Eggplant" ajax="false" actionListener="#{themeSwitcher.setTheme('eggplant')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Excite-Bike" ajax="false" actionListener="#{themeSwitcher.setTheme('excite-bike')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Flick" ajax="false" actionListener="#{themeSwitcher.setTheme('flick')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Glass-X" ajax="false" actionListener="#{themeSwitcher.setTheme('glass-x')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Hot-Sneaks" ajax="false" actionListener="#{themeSwitcher.setTheme('hot-sneaks')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Home" ajax="false" actionListener="#{themeSwitcher.setTheme('home')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Humanity" ajax="false" actionListener="#{themeSwitcher.setTheme('humanity')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Le-Frog" ajax="false" actionListener="#{themeSwitcher.setTheme('le-frog')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Midnight" ajax="false" actionListener="#{themeSwitcher.setTheme('midnight')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Mint-Choc" ajax="false" actionListener="#{themeSwitcher.setTheme('mint-choc')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Overcast" ajax="false" actionListener="#{themeSwitcher.setTheme('overcast')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Pepper-Grinder" ajax="false" actionListener="#{themeSwitcher.setTheme('pepper-grinder')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Redmond" ajax="false" actionListener="#{themeSwitcher.setTheme('redmond')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Rocket" ajax="false" actionListener="#{themeSwitcher.setTheme('rocket')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Sam" ajax="false" actionListener="#{themeSwitcher.setTheme('sam')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Smoothness" ajax="false" actionListener="#{themeSwitcher.setTheme('smoothness')}" style="font-size: smaller !important;"/>
        <p:menuitem value="South-Street" ajax="false" actionListener="#{themeSwitcher.setTheme('south-street')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Start" ajax="false" actionListener="#{themeSwitcher.setTheme('start')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Sunny" ajax="false" actionListener="#{themeSwitcher.setTheme('sunny')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Swanky-Purse" ajax="false" actionListener="#{themeSwitcher.setTheme('swanky-purse')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Trontastic" ajax="false" actionListener="#{themeSwitcher.setTheme('trontastic')}" style="font-size: smaller !important;"/>
        <p:menuitem value="UI-Darkness" ajax="false" actionListener="#{themeSwitcher.setTheme('ui-darkness')}" style="font-size: smaller !important;"/>
        <p:menuitem value="UI-Lightness" ajax="false" actionListener="#{themeSwitcher.setTheme('ui-lightness')}" style="font-size: smaller !important;"/>
        <p:menuitem value="Vader" ajax="false" actionListener="#{themeSwitcher.setTheme('vader')}" style="font-size: smaller !important;"/>
    </p:submenu>

NOTES:

1. For a while, I attempted to add stylesheet <link>'s to <head> in index.xhtml, but it didn't work at all. In View Source, I recognized that PrimeFaces adds stylesheet <link> for selected or default theme (default theme = aristo).

2. I tried defaulting theme in themeSwitcher (bean) = "aristo", but p:menubar does not render well when using aristo (since aristo is default/built-in theme) for some/whatever reason. Also, when select aristo via menubar/menuitem, the same affect. So, I removed aristo from menubar/menuitem, and all other themes are working well.

3. I did recognize that p:dataTable selectedRow does not have a different color for one of the themes; I thought about removing that theme from menu, but I won't worry about that right now.