JSF 2.2: Theme

最新推荐文章于 2024-08-04 22:57:10 发布

weixin_33800463

最新推荐文章于 2024-08-04 22:57:10 发布

阅读量90

点赞数

文章标签： ui xhtml runtime

原文链接：https://my.oschina.net/hantsy/blog/145980

版权

为什么80%的码农都做不了架构师？>>>

#JSF 2.2: Theme Support#

Richfaces and Primefaces have theme support, it is an attractive feature of the skin-able JSF components projects.

JSF 2.2 introduces a new feature named Resource Library Contracts which supports to apply different resources(css and js) and facelets template at runtime.

contracts resources files can be placed in /contracts folder under the web application root or /META-INF/contracts on classpath.

An example of contracts resources file structure in a web application.

<pre> /contracts /default /css defautl.css cssLayout.css template.xhtml /alternative /css defautl.css cssLayout.css template.xhtml </pre>

There are two contracts defined in the project, default and alternative.

The following is the content of /contracts/default/template.xhtml.

<pre> <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="#{request.contextPath}/contracts/default/css/default.css" rel="stylesheet" type="text/css" /> <link href="#{request.contextPath}/contracts/default/css/cssLayout.css" rel="stylesheet" type="text/css" /> <title>Facelets Template</title> </h:head> <h:body> <div id="top" class="top"> <ui:insert name="top">Top</ui:insert> </div> <div id="content" class="center_content"> <ui:insert name="content">Content</ui:insert> </div> </h:body> </html> </pre>

The content of /contracts/alternative/template.xhtml is similar, only the css reference path is changed.

<pre> <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="#{request.contextPath}/contracts/alternative/css/default.css" rel="stylesheet" type="text/css" /> <link href="#{request.contextPath}/contracts/alternative/css/cssLayout.css" rel="stylesheet" type="text/css" /> <title>Facelets Template</title> </h:head> <h:body> <div id="top" class="top"> <ui:insert name="top">Top</ui:insert> </div> <div id="content" class="center_content"> <ui:insert name="content">Content</ui:insert> </div> </h:body> </html> </pre>

In your facelets template file, you can use the contracts template directly. NOTE: The template path is /template.xhtml.

In JSF 2.2, a new attribute contracts was added to f:view which can specify the specified contracts name, default and alternative in this project.

You can switch to the contracts dynamically through a backend bean.

<pre> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <f:view contracts="#{themeSwitcher.theme}"> <ui:composition template="/template.xhtml"> <ui:define name="content"> <h1>Theme Switcher</h1> <p>Current Theme:#{themeSwitcher.theme}</p> <h:form> <h:commandButton value="Default Theme" action="#{themeSwitcher.changeTheme('default')}"> </h:commandButton> <h:commandButton value="Alternative Theme" action="#{themeSwitcher.changeTheme('alternative')}"> </h:commandButton> </h:form> </ui:define> </ui:composition> </f:view> </ui:composition> </pre>

In the template file, use two h:commandButton buttons to switch the contracts dynamically.

<pre> @Named @SessionScoped public class ThemeSwitcher implements Serializable { @Inject transient Instance<Logger> log; private String theme = "default"; public void changeTheme( String _theme){ log.get().log(Level.INFO, "call changeTheme{0}", _theme); switch (_theme) { case "alternative": this.theme = "alternative"; break; default: this.theme = "default"; break; } } public String getTheme() { return theme; } public void setTheme(String theme) { this.theme = theme; } } </pre>

You can also configure the contracts in faces-config.xml file.

<pre> <application> <resource-library-contracts> <contract-mapping> <url-pattern>/themed-alt/*</url-pattern> <contracts>alternative</contracts> </contract-mapping> <contract-mapping> <url-pattern>/themed-default/*</url-pattern> <contracts>default</contracts> </contract-mapping> </resource-library-contracts> </application> </pre>

The /themed-alt will use the alternative and /themed-default will use default contracts.

Unfortunately, JSF 2.2 does not support EL as the value of contracts in faces-config.xml.

<pre> <contract-mapping> <url-pattern>/themed-dyn/*</url-pattern> <contracts>#{themeSwitcher.theme}</contracts> </contract-mapping> </pre>

This could be supported in a future version.

NOTE: In order to demonstrate the usage of Resources Library Contracts, I only changed the background color style in the css file. In the real world application, it could be much difference. For example, you use different css and layout for before and after login case.

Check out the complete codes from my github.com, and play it yourself.

https://github.com/hantsy/ee7-sandbox

转载于:https://my.oschina.net/hantsy/blog/145980