`

velocity布局layout

阅读更多

从VelocityViewServlet到VelocityLayoutServlet  

使用Velocity开发web应用时,需要在web.xml中配置一个Velocity提供的VelocityViewServlet接受处理对velocity模板(即vm文件)的forward访问。(MVC,view只是做展示,通过control,转发到view)

VelocityViewServlet负责将设置在request中的attribute“读出”和模板文件进行merge形成最终的页面,向response输出显示在用户电脑上。

 

VelocityViewServlet是一个简单的易使用的。但是只要把web.xml中VelocityViewServlet换成VelocityLayoutServlet,并配置上2,3句话,将具有页面简单Layout的功能。而这个功能其实非常强大。 

 

VelocityLayoutServlet可以用来简化velocity下的页面布局开发。 

使用VelocityLayoutServlet,当forward到一个页面时,能自动把该页面对应的整体显示出来。

比如访问用户资料页面,能够自动把网页的头,尾等自动显示。 

 

VelocityLayoutServlet使用

系统中有若干页面布局是这样设定的:头部(header),左侧菜单区域(sub),中右侧页面内容部(main),底部(footer)。 

1、创建文件WEB-INF/vm/layout/layout.vm如下:

<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/user.vm如下:(假设该screen页面用于显示用户的资料信息) 

#set($layout = "layout.vm" )    
#set($sub= "vm/user/sub.vm"  )    
<div>
    <p>What's your name?</p>
    <p>My name is $user.loginName!</p>
</div>

第一句话设置这个页面使用哪个布局器。 

第二句话设置sub的值,用于布局把vm/user/sub.vm文件包含进来。

同时也创建"vm/user/sub.vm"文件 

 

配置velocity.properites文件 

使用velocity一般都是需要配置velocity.properites的,至少应该设置input.encoding和output.encoding等。

在这个文件中增加设置如下代码:

resource.loader = webapp  
webapp.resource.loader.class = org.apache.velocity.tools.view.servlet.WebappLoader
webapp.resource.loader.path=/WEB-INF/templates/
default.contentType=text/html
input.encoding = UTF-8
output.encoding = UTF-8
# Directory for layout templates,  
# relative to web application root directory  
tools.view.servlet.layout.directory = / 
# Filepath of the default layout template  
#  relative to the layout directory  
tools.view.servlet.layout.default.template = common/layout/default.vm
#设置外部宏
velocimacro.library = common/macros.vm

 

web.xml配置:

<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> 

 

查看效果

a)访问http://localhost/vm/user/user.vm看看效果。 

b)回到vm/user/user.vm文件,把#set($layout="layout.vm")去掉看看效果。 

效果比较: 

加上$layout设置的user.vm文件,浏览该页面时,将自动把该页面变成布局的一部分,把header.vm,sub.vm,footer.vm也输出出来

去掉$layout设置后浏览时,只是输出该页面,不会将header.vm,sub.vm,footer.vm输出出来。 

这种功能在调试和编写时非常方便。 

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

分享到:
评论

相关推荐

    Access Objects from Velocity

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

    Velocity 语言培训.ppt

    Layout 是一个容器,它定义了 Screen 和 Navigation 在页面上的布局和位置,起到了布局管理的作用。Navigation 可以是 Header 或 Footer,也可以是 Menu 或 Tree View,负责展示网站的导航结构。Screen 是页面的核心...

    velocity.ppt

    Layout 是页面的框架,用于控制整体布局,它可以包含 Screen 和 Navigation。Screen 是具体的内容区域,生成 HTML 代码,由 Layout 调用。Navigation 通常指的是页面的顶部和底部导航,也可以表现为菜单或树形视图,...

    swift-基于swft3.0的水平横向排布流体布局

    同时,为了支持不同屏幕尺寸,可以使用Auto Layout和Size Classes来动态调整布局参数。 在实际项目中,你可能还会遇到性能优化的问题。例如,避免一次性计算所有元素的布局属性,而是在需要时才进行计算。此外,...

    自定义collectionView的三种layout实现

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

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

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

    瀑布流布局

    5. **自动布局和约束**:在Swift中,可以使用Auto Layout或者Size Class来帮助计算单元格的大小和布局,确保在不同设备和屏幕尺寸上都能良好显示。 6. **数据源和代理方法**:确保实现UICollectionViewDataSource和...

    UICollectionViewFlowLayout自定义布局

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -&gt; CGPoint { // 计算滚动到目标偏移量时的真实内容偏移量 return ...

    jetspeed2样式的开发文档

    - `layout`目录下的每个子目录代表一种布局样式。 - 例如:`myblue`目录就代表了一种名为“myblue”的样式。 - `myblue`目录内必须包含以下几个文件或子目录: - `css`:放置CSS样式表文件。 - `images`:存放样式...

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

    在`res/layout`目录下创建一个新的XML布局文件,例如`menu_content.xml`。这个文件将包含菜单的所有视图元素,如TextView、ImageView等,用于展示菜单项。 接下来,我们需要在主布局文件(例如`activity_main.xml`...

    前端项目-bricks.js.zip

    砌石布局(Masonry Layout)是一种流行的网页布局方式,其特点是元素根据页面空间自动调整位置,形成类似砖墙堆砌的效果,每一行的元素高度不一,但宽度保持一致。这种布局可以最大化地利用屏幕空间,使得内容更紧凑...

    瀑布流布局演示demo

    1. `-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath`:返回每个单元格的大小,根据内容...

    LXCollectionViwFallLayout.zip

    (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity`:这个方法用于计算滚动到某一位置时,内容区域应该偏移的位置,对于瀑布流布局,...

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

    `ViewFlipper`是Android SDK提供的一种布局管理器,它可以自动在多个子视图之间进行切换,通常用于创建动态内容展示,如轮播图或连续的界面切换。在XML布局文件中,我们可以像下面这样定义`ViewFlipper`: ```xml ...

    UICollectionViewLayouts:UICollectionView 线性布局 ,布局出相册浏览的效果

    4. **计算cell的大小**: 可以通过`- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath`方法来...

    Tiles框架.rar

    在上面的例子中,`baseLayout`定义了一个基本的布局,其中包括一个header、body和footer的tile。然后,我们可以为特定的页面创建一个扩展这个基础布局的定义: ```xml &lt;definition name="homePage" extends="base...

    Jetspeed2.0中的PSML介绍

    例如,有一个布局片段定义为“jetspeed-layouts::VelocityOneColumn”,意味着这个布局片段使用了Velocity模板引擎,采用了一列表单的布局方式。另一个portlets片段定义为“j2-admin::LocaleSelector”,它表示这是...

    ios-Swift_Collection.zip

    设置好布局后,记得在UICollectionView的`collectionView(_:layout:sizeForItemAt:)`方法中返回单元格的大小。这通常取决于内容的尺寸,但瀑布流布局通常需要根据列宽动态计算。 最后,别忘了在`collectionView(_:...

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

    首先,我们需要创建一个布局文件,这里以`main.xml`为例,该文件定义了界面的基本结构。在给出的示例中,只有一个简单的`LinearLayout`作为容器,包含一个`TextView`。这只是一个基本布局,实际应用中,侧滑菜单通常...

    CollectionView Header 上拉下拉显隐

    在iOS开发中,UICollectionView是一种非常强大的视图组件,用于展示数据集合,它的灵活性使得开发者能够创建各种复杂的布局。本主题将深入探讨如何实现一个“CollectionView Header”的上拉下拉显隐效果,特别是在...

Global site tag (gtag.js) - Google Analytics