当前位置: 代码迷 >> JavaScript >> JSF+Tiles的巧妙调整
  详细解决方案

JSF+Tiles的巧妙调整

热度:295   发布时间:2012-11-06 14:07:00.0
JSF+Tiles的巧妙整合

?最近几天一直在摸索有关jsf与struts中的tiles的整合的用法,现在自己摸索了一套比较不错的整合方式,供大家交流学习。
网上提供了2种方式(这里不做详细介绍):
1.使用myfaces的插件
2.使用tiles框架中TilesServlet(这个Servlet只有在struts1.1版本才有)
第二种方式的可伸缩性强一些,我使用了第2种方式。

但是第2种方式有个非常大的缺点就是需要为每个通过jsf页面建立一个tiles框架加载页。这个是相当繁琐的,每个对应的jsf页面都需要设置一个,这样造成了页面数量的翻倍增长。我这里做了改良:
共有如下几个步骤:
1) 首先在web.xml文件中配置TilesServlet,并加入一个Tiles Filter的filter类,这个类用于跳转页面。

<filter>
??<filter-name>Tiles Filter</filter-name>
??<filter-class>net.geo.web.TilesFilter</filter-class>
??<init-param>
???<param-name>definitions-config</param-name>
???<param-value>/WEB-INF/classes/META-INF/tiles/tiles-defs.xml</param-value>
??</init-param>
?</filter>
?<filter-mapping>
??<filter-name>Tiles Filter</filter-name>
??<url-pattern>*.tiles</url-pattern>
?</filter-mapping>

<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>
			org.apache.myfaces.webapp.MyFacesServlet
		</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.jsf</url-pattern>
	</servlet-mapping>

	<servlet>
		<servlet-name>Tiles Servelt</servlet-name>
		<servlet-class>
			org.apache.struts.tiles.TilesServlet
		</servlet-class>
		<init-param>
			<param-name>definitions-config</param-name>
			<param-value>/WEB-INF/classes/META-INF/tiles/tiles-defs.xml</param-value>
		</init-param>
		<init-param>
			<param-name>definitions-parser-validate</param-name>
			<param-value>true</param-value>
		</init-param>
		<load-on-startup>2</load-on-startup>
	</servlet>

l注意:这里Tiles Servelt的启动顺序(即load-on-startup)必须在Faces Servlet的后面。

1 楼 feleio 2008-07-27  
<p>2)配置tiles文件 <br/>这里是一个配置实例:</p>
<pre name='code' class='xml'>&lt;!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd"&gt;

&lt;tiles-definitions&gt;
&lt;definition name="mainlayout" page="/tiles_layout/layout.jsp"&gt;
&lt;put name="header" value="/tiles_layout/header.jsp"&gt;&lt;/put&gt;
&lt;put name="footer" value="/tiles_layout/footer.jsp"&gt;&lt;/put&gt;
&lt;/definition&gt;

&lt;definition name="/jsfpro/account/register" extends="mainlayout"&gt;
&lt;put name="title" value="to_register" type="string"&gt;&lt;/put&gt;
&lt;put name="content" value="/account/register.jsp"&gt;&lt;/put&gt;
&lt;/definition&gt;

&lt;definition name="/jsfpro/account/userlist" extends="mainlayout"&gt;
&lt;put name="title" value="userlist" type="string"&gt;&lt;/put&gt;
&lt;put name="content" value="/account/userlist.jsp"&gt;&lt;/put&gt;
&lt;/definition&gt;
&lt;/tiles-definitions&gt;</pre>
<p>注意:这里的其中的一个name="content"的put元素的valuet就是实际的内容页面的相对地址。</p>
<p>header.jsp、footer.jsp这些页面都可以是jsf标签的页面,但是,不能每个都用上&lt;f:view&gt;的标签,建议是在layout.jsp使用此标签,里面的分页都使用&lt;f:subview id="xxx"&gt;标签。因为整个模板页就是通过jsf的方式来访问的,每个jsf页面只能有一个f:view。</p>
<p>?</p>
2 楼 feleio 2008-07-27  
<p>3)主要的JSP页面</p>
<p>(1) /tiles_layout/layout.jsp</p>
<p>这个是布局页面,即页面的整体模板。</p>
<p>?</p>
<pre name='code' class='html'>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%&gt;
&lt;%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;title&gt;&lt;tiles:insert name="title" /&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;f:view&gt;
&lt;body&gt;
&lt;tiles:insert attribute="header" flush="false"&gt;&lt;/tiles:insert&gt;
&lt;tiles:insert attribute="content" flush="false"&gt;&lt;/tiles:insert&gt;
&lt;tiles:insert attribute="footer" flush="false"&gt;&lt;/tiles:insert&gt;
&lt;/body&gt;
&lt;/f:view&gt;
&lt;/html&gt;</pre>
<p>?</p>
<p>(2) /tiles_layout/pageloader.jsp</p>
<p>这个是用于实际加载layout页面的页面,这个就是用来代替所有的需要为jsf页面重新定义tiles页面。</p>
<pre name='code' class='html'>&lt;%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%&gt;
&lt;%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles"%&gt;
&lt;tiles:insert definition="&lt;%=(String)request.getAttribute("tiles-definition-page") %&gt;"&gt;&lt;/tiles:insert&gt;

</pre>
<p>&lt;%=(String)request.getAttribute("tiles-definition-page") %&gt;这里会在运行时传入实际需要的tiles页面</p>
<p>?</p>
<p>(3)?/tiles_layout/header.jsp</p>
<pre name='code' class='html'>&lt;%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%&gt;
&lt;f:subview id="header"&gt;
&lt;div&gt;&lt;h1&gt;This is a header.&lt;/h1&gt;&lt;/div&gt;
&lt;/f:subview&gt;</pre>
<p>?</p>
<p>?(4) /tiles_layout/footer.jsp</p>
<p>?</p>
<pre name='code' class='html'>&lt;%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%&gt;
&lt;f:subview id="footer"&gt;
&lt;div&gt;&lt;h1&gt;This is a footer.&lt;/h1&gt;&lt;/div&gt;
&lt;/f:subview&gt;</pre>
<p>?</p>
<p>?(5)/jsfpro/account/register.jsp</p>
<p>这个是实际的内容页,这里是一个实例,注册页</p>
<pre name='code' class='html'>&lt;%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%&gt;


&lt;f:subview id="content"&gt;
请填写用户名和密码:&lt;br&gt;
&lt;h:form id="form" onsubmit="this.action='/jsfpro/account/userlist.tiles';return true;"&gt;
&lt;h:inputText id="username" value="#{account.username}" /&gt;
&lt;h:inputSecret id="password" value="#{account.password}" /&gt;
&lt;h:commandButton action="#{accountMB.register}" value="注册"/&gt;
&lt;/h:form&gt;
&lt;/f:subview&gt;
</pre>
<p>这里有一个设置是很有趣的:&lt;h:form id="form" onsubmit="this.action='/jsfpro/account/userlist.tiles';return true;"&gt;</p>
<p>设置这个的原因后面会提到。</p>
<p>?</p>
<p>(6) /jsfpro/account/userlist.jsp</p>
<p>用户列表页</p>
<pre name='code' class='html'>&lt;%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%&gt;

&lt;style&gt;
.thead1 {
color: red;
text-align: center;
}

.thead2 {
color: blue;
text-align: center;
}

&lt;/style&gt;

&lt;f:view&gt;
&lt;h:dataTable width="100%" id="datalist" var="item" value="#{accountMB.list}" cellspacing="1" border="1" cellpadding="5" columnClasses="#{account.columnClasses}"&gt;
&lt;h:column&gt;
&lt;f:facet name="header"&gt;
&lt;h:outputText value="用户名" /&gt;
&lt;/f:facet&gt;
&lt;h:outputText value="#{item.username}" /&gt;
&lt;/h:column&gt;
&lt;h:column&gt;
&lt;f:facet name="header"&gt;
&lt;h:outputText value="密码" /&gt;
&lt;/f:facet&gt;
&lt;h:outputText value="#{item.password}" /&gt;
&lt;/h:column&gt;
&lt;/h:dataTable&gt;
&lt;/f:view&gt;

</pre>
<p>?</p>
3 楼 feleio 2008-07-27  
<p>4)faces-config.xml的配置</p>
<pre name='code' class='xml'>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2"&gt;

&lt;managed-bean&gt;
&lt;managed-bean-name&gt;accountMB&lt;/managed-bean-name&gt;
&lt;managed-bean-class&gt;
net.geo.mbean.AccountManagedBean
&lt;/managed-bean-class&gt;
&lt;managed-bean-scope&gt;session&lt;/managed-bean-scope&gt;
&lt;/managed-bean&gt;


&lt;managed-bean&gt;
???&lt;managed-bean-name&gt;account&lt;/managed-bean-name&gt;
???&lt;managed-bean-class&gt;net.geo.vo.Account&lt;/managed-bean-class&gt;
???&lt;managed-bean-scope&gt;request&lt;/managed-bean-scope&gt;
??&lt;/managed-bean&gt;

&lt;navigation-rule&gt;
&lt;from-view-id&gt;/jsfpro/account/register.jsp&lt;/from-view-id&gt;
&lt;navigation-case&gt;
&lt;from-outcome&gt;userlist&lt;/from-outcome&gt;
&lt;to-view-id&gt;/jsfpro/account/userlist.tiles&lt;/to-view-id&gt;
&lt;/navigation-case&gt;
&lt;/navigation-rule&gt;
&lt;/faces-config&gt;</pre>
<p>&lt;to-view-id&gt;/jsfpro/account/userlist.tiles&lt;/to-view-id&gt;这里设置的是.tiles是从注册页跳转到用户列表页,而用户列表页也是使用了layout.jsp这个页面模板,所有是.tiles后缀(.tiles在web.xml里面设置了,是用于请求模板形式的jsf页面)。</p>
<p>上面有提到过&lt;h:form id="form" onsubmit="this.action='/jsfpro/account/userlist.tiles';return true;"&gt;,这个是因为使用了动态的pageloader.jsp页面后jsf框架都会将url最终转向pageloader.jsf,这样的话就相当于&lt;from-view-id&gt;/jsfpro/account/register.jsp&lt;/from-view-id&gt;要改成&lt;from-view-id&gt;/tiles_layout/pageloader.jsp&lt;/from-view-id&gt;,也就是所有的入口都是这个页面,这样的局限性有些大,有的时候可能需要为某个入口页做单独的navigation设置,就如上面的一样,而为了要达到这个目的,最简单的方法就是直接修改提交的form的action,让url变成你需要的那个jsf入口页的url地址。</p>
<p>?</p>
4 楼 feleio 2008-07-27  
<p>5)TilesFilter类</p>
<pre name='code' class='java'>package net.geo.web;

import java.io.FileInputStream;
import java.io.IOException;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

public class TilesFilter implements Filter {
private final static Log logger = LogFactory.getLog(TilesFilter.class);
private final static Set&lt;String&gt; uriSet = new HashSet&lt;String&gt;();

@Override
public void destroy() {
// TODO Auto-generated method stub

}

@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
if (req instanceof HttpServletRequest) {
HttpServletRequest hreq = (HttpServletRequest) req;
String uri = hreq.getRequestURI().replace(".tiles", "");
// 如果请求的uri(去掉.tiles的后缀之后)是包含在set中,
// 那么就转发到pageloader.jsp页面,必须以jsf的形式请求
if (uriSet.contains(uri)) {
hreq.setAttribute("tiles-definition-page", uri);
hreq.getRequestDispatcher().forward(hreq, res, "/tiles_layout/pageloader.jsf");
return;
}
}
chain.doFilter(req, res);
}


/**
* 初始化filter类,主要是解析定义了的tiles文件,
* 将&lt;definition name="/jsfpro/account/register" extends="mainlayout"&gt;中的name属性的值拿出来,
* 作为跳转的判断,放入set中
*/
@SuppressWarnings("unchecked")
@Override
public void init(FilterConfig config) throws ServletException {
String[] files = null;
try {
files = config.getInitParameter("definitions-config")
.split("\\s|,");
} catch (Exception e) {
throw new ServletException(
"the parameter definitions-config is not correct.", e);
}
SAXReader reader = new SAXReader();
Document doc = null;
List&lt;Element&gt; elList = null;
List&lt;Attribute&gt; attList = null;
try {
for (String path : files) {
doc = reader.read(new FileInputStream(AppConfigUtil.WEBROOT
+ path));
elList = doc.getRootElement().elements();
if (elList != null) {
for (Element el : elList) {
attList = el.attributes();
if (attList != null) {
for (Attribute att : attList) {
if (att.getName().equals("name")) {
uriSet.add(att.getValue());
}
}
}
}
}
}
logger.info("TilesFilter init finished....");
} catch (Exception e) {
throw new ServletException(
"Can not parse the tiles-defs.xml file.", e);
}
}

}
</pre>
<p>?</p>
5 楼 feleio 2008-07-27  
<p>6)Account业务类</p>
<pre name='code' class='java'>package net.geo.mbean;

import java.util.Collection;

import net.geo.vo.Account;

public class AccountManagedBean extends BaseManagedBean {

public String register() {
Account user = super.findBean(Account.class);
facade.save(user);
super.setRequestAttribute("myaccount", user);
// 这里的returnTo方法的第一个参数是返回给jsf进行跳转的字符串
// 第2个参数是将相应要跳转的页面放置到request中,
// 因为跳转的pageloader.jsp是动态的获取实际访问页面的参数的,
// 所以在跳转之前必须指定。
// 如果是返回当前页则不需设定。
return returnTo("userlist", "/jsfpro/account/userlist");
}

public Collection&lt;Account&gt; getList() {
return facade.queryList(-1, -1);
}


/*
* 以下是用到的相关的父类方法,贴出来供查看
*/
protected HttpServletRequest getRequest() {
?? return (HttpServletRequest) FacesContext.getCurrentInstance()
???? .getExternalContext().getRequest();
? }

protected void setRequestAttribute(String attrName, Object obj) {
?? getRequest().setAttribute(attrName, obj);
? }


protected String returnTo(String outcome, String turnToUrl) {
// 这里的参数名tiles-defenition-page就是在pageloader.jsp页面中
// 指定要跳转的实际页面的参数名
?? setRequestAttribute("tiles-defenition-page", turnToUrl);
? ?return outcome;
? }
}
</pre>
<p>?</p>
6 楼 iamlibo 2008-07-27  
如果使用JSF 还是用facelet吧
7 楼 feleio 2008-07-27  
iamlibo 写道
如果使用JSF 还是用facelet吧

感谢,我再去探秘
8 楼 vtrtbb 2008-07-28  
你为什么不用richface而用titles??

9 楼 vtrtbb 2008-07-28  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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"
      xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
<head>
</head>
<ui:include src="/templates/top.xhtml"/>
<ui:include src="/templates/body.xhtml"/>
.......................................