ThemeSwitcher
ThemeSwitcher enables applying new themes on-the-fly without full page refresh.
Source
<h:form id="form">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="Default Switcher:" />
<p:themeSwitcher style="width:165px" id="defaultSwitcher">
<f:selectItem itemLabel="Choose Theme" itemValue="" />
<f:selectItems value="#{themeSwitcherBean.themes}" />
</p:themeSwitcher>
<h:outputText value="Stateful Switcher:" />
<p:themeSwitcher value="#{guestPreferences.theme}" style="width:165px" effect="fade" id="statefulSwitcher">
<f:selectItem itemLabel="Choose Theme" itemValue="" />
<f:selectItems value="#{themeSwitcherBean.themes}" />
<p:ajax listener="#{themeSwitcherBean.saveTheme}" />
</p:themeSwitcher>
<h:outputText value="Theme Preview:" />
<p:themeSwitcher style="width:165px" effect="fade" var="t" id="themePreview">
<f:selectItem itemLabel="Choose Theme" itemValue="" />
<f:selectItems value="#{themeSwitcherBean.advancedThemes}" var="theme" itemLabel="#{theme.name}" itemValue="#{theme}"/>
<p:column>
<p:graphicImage value="/images/themes/#{t.image}"/>
</p:column>
<p:column>
#{t.name}
</p:column>
</p:themeSwitcher>
</h:panelGrid>
<p:separator />
<br />
<p:commandButton value="Button" />
<br /><br />
<p:panel header="Panel">
Panel Content
</p:panel>
<br />
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton type="button" value="New" icon="ui-icon-document" />
<p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>
<p:separator />
<p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
<p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
<p:commandButton type="button" title="Print" icon="ui-icon-print"/>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton value="Navigate">
<p:menuitem value="Home" url="http://www.primefaces.org" />
<p:menuitem value="ShowCase" url="http://www.primefaces.org/showcase" />
<p:menuitem value="TouchFaces" url="http://www.primefaces.org/showcase/touch" />
</p:menuButton>
</p:toolbarGroup>
</p:toolbar>
<br />
<p:tabView>
<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:tabView>
</h:form>
package org.primefaces.examples.view;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;
import javax.annotation.PostConstruct;
import org.primefaces.examples.domain.Theme;
public class ThemeSwitcherBean {
private Map<String, String> themes;
private List<Theme> advancedThemes;
private String theme;
private GuestPreferences gp;
public void setGp(GuestPreferences gp) {
this.gp = gp;
}
public Map<String, String> getThemes() {
return themes;
}
public String getTheme() {
return theme;
}
public void setTheme(String theme) {
this.theme = theme;
}
@PostConstruct
public void init() {
theme = gp.getTheme();
advancedThemes = new ArrayList<Theme>();
advancedThemes.add(new Theme("aristo", "aristo.png"));
advancedThemes.add(new Theme("cupertino", "cupertino.png"));
advancedThemes.add(new Theme("trontastic", "trontastic.png"));
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() {
gp.setTheme(theme);
}
public List<Theme> getAdvancedThemes() {
return advancedThemes;
}
}
