Velocity 布局laytou功能



Velocity 布局laytou功能。一、从VelocityViewServlet到VelocityLayoutServlet
使用Velocity开发web应用时，需要在web.xml中配置一个Velocity提供的VelocityViewServlet接受处理对velocity模板(即vm文件)的forward访问。VelocityViewServlet负责将设置在request中的attribute“读出”和模板文件进行merge形成最终的页面，向response输出显示在用户电脑上。
VelocityViewServlet是一个简单的易使用的。但是只要把web.xml中VelocityViewServlet换成VelocityLayoutServlet，并配置上2，3句话，将具有页面简单Layout的功能。而这个功能其实非常强大。
二、VelocityLayoutServlet可以
VelocityLayoutServlet可以用来简化velocity下的页面布局开发。 使用VelocityLayoutServlet，可以使当forward到一个页面时，能把自动把该页面作为一个页面布局的一部分整体显示出来。比如访问用户资料页面，能够自动把网站的头，尾等自动也输出显示处理。
三、VelocityLayoutServlet使用按步就班
系统中有若干页面布局是这样设定的：头部(header)，左侧菜单区域(sub)，中右侧页面内容部(main)，底部(footer)。
1、
创建文件[webapp home]/vm/layout/layout.vm如下：

  1. <body>
  2.         <div id=”header>#parse( ‘vm/layout/header.vm’ )</div>
  3.             <div id= “content” >
  4.                 <div id= “sub” >#parse($sub)</div>
  5.                 <div id= “main” >$screen_content</div>
  6.             </div>
  7.             <div id= “footer” >#parse( ‘vm/layout/footer.vm’ )</div>
  8. </body>
<body>
        <div id="header>#parse( 'vm/layout/header.vm' )</div>
            <div id= "content" >
                <div id= "sub" >#parse($sub)</div>
                <div id= "main" >$screen_content</div>
            </div>
            <div id= "footer" >#parse( 'vm/layout/footer.vm' )</div>
</body>

$screen_content相当于一个占位符，被forward的目标页面内容将替代该处内容。 #parse($sub)：表示sub位置是可以动态通过$sub变量设置的。
同时也创建’vm/layout/footer.vm”vm/layout/header.vm’这两个文件。

2、 创建WEB-INF/vm/user/profile.vm如下：(假设该页面用于显示用户的资料信息)

  1. #set($layout =  “layout.vm” )
  2. #set($sub=  “vm/user/sub.vm”  )
  3. A: What’s your name?<br>
  4. B: My name is $user.loginName!
#set($layout =  "layout.vm" )  
#set($sub=  "vm/user/sub.vm"  )  
A: What's your name?<br>  
B: My name is $user.loginName!

注意，这个文件和普通我vm不一样的地方在于前两句话。 第一句话设置这个页面使用哪个布局器。 第二句话设置sub的值，用于布局把vm/user/sub.vm文件包含进来。
同时也创建”vm/user/sub.vm”文件
3、配置velocity.properites文件
使用velocity一般都是需要配置velocity.properites的，至少应该设置input.encoding和output.encoding等。在这个文件中增加设置如下代码：

  1. # Directory  for  layout templates,
  2. # relative to web application root directory
  3. tools.view.servlet.layout.directory = vm/layout/
  4. # Filepath of the  default  layout template
  5. #  relative to the layout directory
  6. # 要注意这行提示：NOT relative to the root directory of the webapp!!!!
  7. tools.view.servlet.layout. default .template =  layout.vm


# Directory  for  layout templates,   
# relative to web application root directory   
tools.view.servlet.layout.directory = vm/layout/      
# Filepath of the  default  layout template  
#  relative to the layout directory   
# 要注意这行提示：NOT relative to the root directory of the webapp!!!!   
tools.view.servlet.layout. default .template =  layout.vm

4、确定web.xml配置和下面的差不多如下(主要是配置VelocityLayoutServlet，而非VelocityViewServlet)：

  1. <servlet>
  2.     <servlet-name>velocity</servlet-name>
  3.     <servlet- class>
  4.         org.apache.velocity.tools.view.servlet.VelocityLayoutServlet       </servlet- class >
  5.     <init-param>
  6.         <param-name>org.apache.velocity.toolbox</param-name>
  7.         <param-value>/WEB-INF/toolbox.xml</param-value>
  8.     </init-param>
  9.     <init-param>
  10.         <param-name>org.apache.velocity.properties</param-name>
  11.         <param-value>/WEB-INF/velocity.properties</param-value>
  12.     </init-param>
  13. </servlet>
  14. <servlet-mapping>
  15.     <servlet-name>velocity</servlet-name>
  16.     <url-pattern>*.vm</url-pattern>
  17. </servlet-mapping>
<servlet>
	<servlet-name>velocity</servlet-name>
	<servlet- class>
		org.apache.velocity.tools.view.servlet.VelocityLayoutServlet       </servlet- class >
	<init-param>
		<param-name>org.apache.velocity.toolbox</param-name>
		<param-value>/WEB-INF/toolbox.xml</param-value>
	</init-param>
	<init-param>
		<param-name>org.apache.velocity.properties</param-name>
		<param-value>/WEB-INF/velocity.properties</param-value>
	</init-param>
</servlet>
<servlet-mapping>
	<servlet-name>velocity</servlet-name>
	<url-pattern>*.vm</url-pattern>
</servlet-mapping>

5、运行服务器吧， a) 访问http://www.xxx.com/vm/user/profile.vm 看看效果。
b) 回到vm/user/profile.vm文件，把 #set($layout = “layout.vm”) 去掉 看看效果。
效果比较： 加上$layout设置的profile.vm文件，浏览该页面时，将自动把该页面变成布局的一部分，把header.vm,sub.vm,footer.vm也输出出来；去掉$layout设置后浏览时，只是输出该页面，不会将header.vm,sub.vm,footer.vm输出出来。
这种功能在调试和编写时非常方便。

以后每增加一个新的页面时，只要在第一行设置了$layout指向一个布局模板便可(注意布局模板的路径，第3步已经做了提示)，便可以轻松具有简单的布局功能了

6、后语：
一直想着自己实现一个类似的功能，最后再仔细看看Velocity官方网站时才发现velocity已经有了。我觉得挺好的，很符合我的需求。
所以，如果你使用或即将使用Velocity开发系统，强烈推荐使用layout功能。