ThemeSwitcher
ThemeSwitcher applies new themes on-the-fly without full page refresh.
Documentation
<h:form>
<h:panelGrid columns="2" cellpadding="10">
<p:outputLabel for="basic" value="Basic:" />
<p:themeSwitcher id="basic" style="width:165px">
<f:selectItem itemLabel="Choose Theme" itemValue="" />
<f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme.name}"/>
</p:themeSwitcher>
<p:outputLabel for="advanced" value="Advanced:" />
<p:themeSwitcher id="advanced" style="width:165px" effect="fade" var="t">
<f:selectItem itemLabel="Choose Theme" itemValue="#{null}" />
<f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column>
<h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme"/>
</p:column>
<p:column>
#{t.displayName}
</p:column>
</p:themeSwitcher>
</h:panelGrid>
<p:separator />
<p:dialog header="Dialog" widgetVar="dlg" minHeight="40" modal="true">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:commandButton value="Dialog" onclick="PF('dlg').show()" type="button" style="display:block;"/>
<p:panel header="Panel" style="margin:20px 0px">
Panel Content
</p:panel>
<p:spinner />
<p:toolbar style="margin:20px 0px">
<f:facet name="left">
<p:commandButton type="button" value="New" icon="pi pi-file" />
<p:commandButton type="button" value="Open" icon="pi pi-folder-open"/>
<p:commandButton type="button" title="Save" icon="pi pi-save"/>
<p:commandButton type="button" title="Delete" icon="pi pi-trash"/>
<p:commandButton type="button" title="Print" icon="pi pi-print"/>
</f:facet>
<f:facet name="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>
</f:facet>
</p:toolbar>
<p:accordionPanel>
<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:accordionPanel>
</h:form>
@Named
@RequestScoped
public class ThemeSwitcherView {
private List<Theme> themes;
@Inject
private ThemeService service;
@PostConstruct
public void init() {
themes = service.getThemes();
}
public List<Theme> getThemes() {
return themes;
}
public void setService(ThemeService service) {
this.service = service;
}
}
@Named
@ApplicationScoped
public class ThemeService {
private List<Theme> themes;
@PostConstruct
public void init() {
themes = new ArrayList<>();
themes.add(new Theme(0, "Nova-Light", "nova-light"));
themes.add(new Theme(1, "Nova-Dark", "nova-dark"));
themes.add(new Theme(2, "Nova-Colored", "nova-colored"));
themes.add(new Theme(3, "Luna-Blue", "luna-blue"));
themes.add(new Theme(4, "Luna-Amber", "luna-amber"));
themes.add(new Theme(5, "Luna-Green", "luna-green"));
themes.add(new Theme(6, "Luna-Pink", "luna-pink"));
themes.add(new Theme(7, "Omega", "omega"));
}
public List<Theme> getThemes() {
return themes;
}
}