16.5. Themes

Seam applications are also very easily skinnable. The theme API is very similar to the localization API, but of course these two concerns are orthogonal, and some applications support both localization and themes.

First, configure the set of supported themes:

<theme:theme-selector cookie-enabled="true">
  <theme:available-themes>
    <value>default</value>
    <value>accessible</value>
    <value>printable</value>
  </theme:available-themes>
</theme:theme-selector>

<theme:theme-selector cookie-enabled="true">
  <theme:available-themes>
    <value>default</value>
    <value>accessible</value>
    <value>printable</value>
  </theme:available-themes>
</theme:theme-selector>

Copy to Clipboard

Toggle word wrap

The first theme listed is the default theme.

Themes are defined in a properties file with the same name as the theme. For example, the default theme is defined as a set of entries in default.properties, which might define:

css ../screen.css template /template.xhtml

css ../screen.css template /template.xhtml

Copy to Clipboard

Toggle word wrap

The entries in a theme resource bundle are usually paths to CSS styles or images and names of Facelets templates (unlike localization resource bundles which are usually text).

Now we can use these entries in our JSP or Facelets pages. For example, to theme the stylesheet in a Facelets page:

<link href="#{theme.css}" rel="stylesheet" type="text/css" />

<link href="#{theme.css}" rel="stylesheet" type="text/css" />

Copy to Clipboard

Toggle word wrap

Or, where the page definition resides in a subdirectory:

<link href="#{facesContext.externalContext.requestContextPath}#{theme.css}" 
      rel="stylesheet" type="text/css" />

<link href="#{facesContext.externalContext.requestContextPath}#{theme.css}" 
      rel="stylesheet" type="text/css" />

Copy to Clipboard

Toggle word wrap

Most powerfully, Facelets lets us theme the template used by a <ui:composition>:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    template="#{theme.template}">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    template="#{theme.template}">

Copy to Clipboard

Toggle word wrap

Just like the locale selector, there is a built-in theme selector to allow the user to freely switch themes:

<h:selectOneMenu value="#{themeSelector.theme}"> 
  <f:selectItems value="#{themeSelector.themes}"/> 
</h:selectOneMenu> 
<h:commandButton action="#{themeSelector.select}" value="Select Theme"/>

<h:selectOneMenu value="#{themeSelector.theme}"> 
  <f:selectItems value="#{themeSelector.themes}"/> 
</h:selectOneMenu> 
<h:commandButton action="#{themeSelector.select}" value="Select Theme"/>

Copy to Clipboard

Toggle word wrap

返回顶部

此内容没有您所选择的语言版本。

16.5. Themes

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links