`

Velocity布局（layout）功能介绍

Velocity布局layout介绍 
阅读更多

对于一个WEB应用来说，页面的基本结构往往是固定的，页面中的很多部分，例如页面统一的头部、尾部和菜单，我们一般是不太需要变化的，各个页面基本一致，变化的往往是页面的具体内容部分，这样，布局(layout)功能的使用，就能大大减化前端页面的复杂性了。这里简单介绍一下如何使用velocity框架来实现页面的布局。

         我们知道，要在spring框架中配置velocity，一般需要配置两个bean，一个是velocityConfig, 别一个则是viewResolver。先来看velocityConfig的配置，基本配置如下所示，这里和不使用布局的配置方式没有任何差别。

 

Xml代码  收藏代码
  1. <!-- velocity 配置-->  
  2. <bean id= "velocityConfig"  
  3.  class= "org.springframework.web.servlet.view.velocity.VelocityConfigurer">  
  4.          <property name= "resourceLoaderPath">  
  5.                    <value>WEB-INF/view</value>  
  6.          </property>  
  7.          <property name= "velocityProperties">  
  8.                    <props>  
  9.                             <prop key= "input.encoding">utf-8</prop>  
  10.                             <prop key= "output.encoding">utf-8</prop>  
  11.                    </props>  
  12.          </property>  
  13. </bean>  

 

 

 

         接下来看看viewResolver的配置，在使用布局时，一般会配置如下：

 

Xml代码  收藏代码
  1. <bean id= "viewResolver"  
  2. class= "org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">  
  3.          <property name= "cache" value= "true"/>  
  4.          <property name= "prefix" value= "/"/>  
  5.          <property name= "suffix" value= ".vm"/>  
  6.          <property name= "contentType">  
  7.                    <value>text/html;charset=utf-8</value>  
  8.          </property>  
  9.          <property name="toolboxConfigLocation">  
  10.                    <value>/WEB-INF/toolbox.xml</value>  
  11.          </property>  
  12.          <property name="layoutUrl" value="layout/layout.vm" />  
  13.          <property name="allowSessionOverride" value="true"/>  
  14.          <property name="allowRequestOverride" value="true"/>  
  15.          <property name="exposeSessionAttributes" value="true"/>  
  16.          <property name="requestContextAttribute" value="rc"/>  
  17.          <property name="exposeRequestAttributes" value="true"/>  
  18. </bean>  

 

 

         如果你配置过velocity，你会发现与你之前的配置主要有两个地方的差别：

    1.  一般情况下，当我们不使用velocity的布局功能时，我们一般会把viewResolver的class配置为：

org.springframework.web.servlet.view.velocity.VelocityViewResolver，当需要使用布局功能的时候，viewResolver的class需要配置为：

org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver，顾名思义，从命名中我们就能看出来这个viewResolver是支持layout功能的。

    2.  另外一点不同的是，这里多了一个layoutUrl的属性配置：<property name="layoutUrl" value="layout/layout.vm" />， 这个配置是设置你的layout文件的存在路径，需要注意的是，这个路径不是相对于webapp路径来的，而是相对于velocityConfig配置中的resourceLoaderPath属性配置的路径（resourceLoaderPath的路径是相对于webapp的路径）。

 

看看一般情况下，我们的layout页面大概长什么样子吧：

 

Html代码  收藏代码
  1. <body>  
  2.         <div class="content">  
  3.             #parse("/common/header.vm")  
  4.             <div class="content-info">  
  5.                 #parse("/common/leftMenu.vm")  
  6.                 <div class="content-main">  
  7.                     $screen_content  
  8.                 </div>  
  9.             </div>  
  10.             #parse("common/footer.vm")  
  11.         </div>  
  12. </body>  

 

 

解释一下：如果你在处理某个请求时返回了a.vm模板，那么最终返回的页面是：将a.vm模板的内容填充layout页面的$screen_content占位符的内容，然后再将整个填充后的页面返回给用户。如果有兴趣你可以看一下大致的实现原理，其实很简单，就是先调用velocity引擎渲染请求返回的模板，将该渲染结果（一个String类型的字符串）作为一参数传递给layout页面，参数名称就是screen_content，然后再次调用引擎渲染layout页面，这样就会把该screen_content参数对应的值作为页面的一部分渲染出来了，从而实现整个页面的布局功能。

这样，我们就简单介绍了如何简单配置和使用velocity的layout功能了，这里你可以会有疑问了，如果我某个页面需要使用不同的layout页面，甚至我有些页面不需要使用layout功能，该怎么办？其实很简单，我们前面viewResolver配置中，配置的只是默认的layout页面的地址，如果你要使用不同的layout页面，只需在你要返回的页面中如下简单设置一下即可：

 

Html代码  收藏代码
  1. #set($layout = "/layout/layout2.vm")  

 

         这样，我们就强制我们的这个页面使用的是layout2.vm这个页面布局。按照这个思路，如果我在某个特殊的页面，不想使用layout功能了，我们可以再指定另外一个layout页面，只不过这个layout页面内容比较特殊，它没有一般布局页面中有的那些页面统一的头部、尾部和菜单，只有如下所示的一行代码就可以了：

 

Html代码  收藏代码
  1. $screen_content  

 

   

分享到：
| HTML img标签之onAbort、onError、onLoad ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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

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

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

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

    自定义collectionView的三种layout实现

    本主题将深入探讨如何实现自定义collectionView的三种布局方式：线性布局、瀑布流布局（也称为流式布局）和轮播布局。这些布局方式能够帮助开发者构建出更加独特且吸引用户的界面。 首先，我们从最基础的线性布局...

    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.0中的PSML介绍

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

    jetspeed2样式的开发文档

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

    前端项目-bricks.js.zip

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

    LXCollectionViwFallLayout.zip

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

    ios-Swift_Collection.zip

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

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

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

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

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

    瀑布流布局演示demo

    瀑布流布局，又称Masonry布局或Infinite Scroll布局，在网页设计和移动应用开发中非常常见，主要用于展示大量的图片或内容，如电商应用的商品列表、社交媒体的动态墙等。这种布局方式模仿了瀑布从高处流下的自然现象...

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

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

    Tiles框架.rar

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

    android 图片左右滑动

    一、`ViewFlipper`组件介绍 `ViewFlipper`是Android提供的一个视图切换控件，它可以方便地在多个子视图之间进行切换，通常用于实现动画效果，如轮播图、卡片式切换等。`ViewFlipper`内部包含一个或多个子视图，通过...

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

    侧滑菜单通常用于隐藏主界面下的附加选项或功能，用户通过向左或向右滑动屏幕来显示或隐藏菜单。 首先，我们需要创建一个布局文件，这里以`main.xml`为例，该文件定义了界面的基本结构。在给出的示例中，只有一个...

Magicbox
Global site tag (gtag.js) - Google Analytics