`
Qieqie
  • 浏览: 340072 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

使用Velocity吧2:Velocity的layout功能

阅读更多
一、从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如下:


 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    ...省略...
    </head>
    <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>
</html>

$screen_content相当于一个占位符,被forward的目标页面内容将替代该处内容。
#parse($sub):表示sub位置是可以动态通过$sub变量设置的。

同时也创建'vm/layout/footer.vm''vm/layout/header.vm'这两个文件。



2、
创建WEB-INF/vm/user/profile.vm如下:(假设该页面用于显示用户的资料信息)
 
#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等。在这个文件中增加设置如下代码:

# 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):


	<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功能。

参考资料
1、http://velocity.apache.org/tools/devel/view/layoutservlet.html
2、使用velocity吧 :$velocityCount和Tool的使用

分享到:
评论
3 楼 奶油花生 2014-10-23  
那如果我左侧菜单栏也是动态的呢,比如要读一个树形取出来的数据。右侧内荣是树形标题对应的详细。。。
2 楼 jimipage 2007-08-23  
您好,我想问个关于velocity的问题。当访问vm的网页时,我如果统计该页面的访问量呢?并将访问的人数统计到数据库中,我应该如何入手呢?
1 楼 xiang 2007-03-25  
freemarker用的更爽

相关推荐

    Access Objects from Velocity

    在Liferay门户中使用Velocity模板,开发者可以在三个不同的地方利用Velocity模板引擎:主题(Themes)、布局模板(Layout Templates)和CMS模板(CMSTemplates)。虽然这些地方都使用Velocity模板,但它们的行为略有...

    如何解决SpringBoot2.x版本对Velocity模板不支持的方案

    这就意味着,如果我们想在 SpringBoot 2.x 项目中使用 Velocity 模板引擎,就需要自己想办法来实现支持。 本文将介绍如何解决 SpringBoot 2.x 版本对 Velocity 模板不支持的问题。我们将通过抽出 SpringBoot 早期...

    Velocity 语言培训.ppt

    此外,Velocity 还支持条件语句(#if, #else, #elseif)、循环(#foreach)、以及方法调用等高级功能,使得模板编程更为灵活。 Velocity 语言的一个显著优点是它减少了 HTML 与 Java 代码的混杂,提高了代码的...

    velocity.ppt

    在实际应用中,Velocity 还提供了其他功能,如宏定义、逻辑控制结构(if/else)、迭代(foreach)等,这些都使得开发者能够构建复杂的动态网页。同时,Velocity 支持与其他 Java 库的集成,如 Spring 或 Hibernate,...

    Velocity.js SVG+CSS3实现新能源概念车模型绘制动画效果源码.zip

    CSS3是CSS的最新版本,提供了许多新的功能和特性,如过渡(Transitions)、动画(Animations)以及多列布局(Multi-column Layout)等。在这个项目中,CSS3被用来辅助 Velocity.js,进一步增强动画效果,比如平滑的...

    jetspeed2样式的开发文档

    jetspeed2是一款基于Java的企业门户框架,它提供了丰富的功能来构建复杂的Web应用程序。本文档旨在帮助开发者理解jetspeed2样式的开发流程与细节,特别是关于如何创建和自定义样式。 #### 二、基础知识要求 在开始...

    velocity-spring-boot-project:一个用于速度的Spring Boot Starter,包括Spring的官方和阿里巴巴的实现,例如Layout,Tools支持

    适用于速度的Spring Boot Starter,包括Spring的官方版本和阿里巴巴的实现,例如Layout,Tools支持。 发布版本 ... &lt;!-- Spring Boot Starter --&gt; &lt; groupId&gt;org.springframework.boot &lt; artifactId&gt;...

    android 简单的手势切换视图示例.doc

    在Android开发中,手势识别是提升用户交互体验的重要方式之一,尤其在移动设备上,手势操作使得用户可以更直观、快捷地与...在实际开发中,你可以根据需要扩展此功能,例如添加更多视图或者实现更复杂的手势识别逻辑。

    android侧滑菜单,支持左右侧滑

    if (Math.abs(velocityX) &gt; SWIPE_THRESHOLD_VELOCITY) { // 动画处理逻辑 } return super.onFling(e1, e2, velocityX, velocityY); } }); ``` 最后,为了使滑动更加流畅,可以考虑使用`Scroller`对象配合`...

    使用ViewFlipper的导航页面实例

    View view2 = getLayoutInflater().inflate(R.layout.page2, null); View view3 = getLayoutInflater().inflate(R.layout.page3, null); // 将子视图添加到ViewFlipper viewFlipper.addView(view1); viewFlipper....

    Android手势滑动图片浏览

    本教程将详细介绍如何利用`ViewFlipper`组件结合手势识别来创建一个平滑的手势滑动图片浏览功能。 `ViewFlipper`是Android SDK提供的一种布局容器,它可以轻松地在多个子视图之间进行切换,通常用于实现动画效果,...

    Android中使用手势实现侧滑菜单的示例代码.pdf

    本文主要讲解如何在Android中使用手势实现侧滑菜单,以实现类似许多移动应用中常见的侧滑抽屉效果。侧滑菜单通常用于隐藏主界面下的附加选项或功能,用户通过向左或向右滑动屏幕来显示或隐藏菜单。 首先,我们需要...

    ViewFlipper实现图片轮播

    本篇文章将深入探讨如何使用`ViewFlipper`来实现图片轮播,并添加手势滑动切换图片的功能。 首先,`ViewFlipper`是`ViewGroup`的一个子类,它可以包含多个子视图(例如`ImageView`),并能通过设置动画效果在这些子...

    安卓ViewFlipper级滑动改变图片

    } else if (e1.getX() - e2.getX() &gt; SWIPE_MIN_DISTANCE && Math.abs(velocityX) &gt; SWIPE_THRESHOLD_VELOCITY) { // 向左滑动 viewFlipper.showPrevious(); return true; } return false; } }); } @...

    android滑动标签

    首先,TabLayout是Android设计支持库中的一个组件,它提供了在顶部展示标签并允许用户通过滑动来切换不同视图的功能。它常与ViewPager结合使用,用于在多个Fragment之间进行切换。创建TabLayout的基本步骤如下: 1....

    android viewflipper 图片滑动demo

    2. **XML布局**:在res/layout目录下创建一个XML布局文件,用于定义ViewFlipper。例如,可以这样设置: ```xml &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=...

    android 图片左右滑动

    本篇文章将详细讲解如何在Android应用中实现这一功能,主要涉及的技术点包括`ViewFlipper`组件、手势识别以及定时器的使用。 一、`ViewFlipper`组件介绍 `ViewFlipper`是Android提供的一个视图切换控件,它可以方便...

    iOS滑动菜单

    - 使用Auto Layout和Size Classes进行布局,以实现响应式设计。 7. **实现代码示例** - 在Swift中,可以使用`UIPanGestureRecognizer`的`translation(in:)`方法获取滑动距离,然后更新`scrollView.contentOffset....

    自定义collectionView的三种layout实现

    这通常涉及到`- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity`方法的实现。 在自定义UICollectionViewLayout时,需要注意以下...

    使用ViewFlipper+GestureDetector实现轮播图(APP引导页面)

    在Android应用开发中,轮播图(也称为滑动页面或引导页面)通常用于展示APP的新功能、使用提示或者吸引用户的注意力。本教程将详细讲解如何利用`ViewFlipper`和`GestureDetector`来实现这样一个功能。`ViewFlipper`...

Global site tag (gtag.js) - Google Analytics