引用:https://www.iteye.com/blog/qstar-1677130
对于一个WEB应用来说,页面的基本结构往往是固定的,页面中的很多部分,例如页面统一的头部、尾部和菜单,我们一般是不太需要变化的,各个页面基本一致,变化的往往是页面的具体内容部分,这样,布局(layout)功能的使用,就能大大减化前端页面的复杂性了。这里简单介绍一下如何使用velocity框架来实现页面的布局。
我们知道,要在spring框架中配置velocity,一般需要配置两个bean,一个是velocityConfig, 别一个则是viewResolver。先来看velocityConfig的配置,基本配置如下所示,这里和不使用布局的配置方式没有任何差别。
Xml代码 收藏代码
<!-- velocity 配置-->
<bean id= "velocityConfig"
class= "org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name= "resourceLoaderPath">
<value>WEB-INF/view</value>
</property>
<property name= "velocityProperties">
<props>
<prop key= "input.encoding">utf-8</prop>
<prop key= "output.encoding">utf-8</prop>
</props>
</property>
</bean>
接下来看看viewResolver的配置,在使用布局时,一般会配置如下:
Xml代码 收藏代码
<bean id= "viewResolver"
class= "org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<property name= "cache" value= "true"/>
<property name= "prefix" value= "/"/>
<property name= "suffix" value= ".vm"/>
<property name= "contentType">
<value>text/html;charset=utf-8</value>
</property>
<property name="toolboxConfigLocation">
<value>/WEB-INF/toolbox.xml</value>
</property>
<property name="layoutUrl" value="layout/layout.vm" />
<property name="allowSessionOverride" value="true"/>
<property name="allowRequestOverride" value="true"/>
<property name="exposeSessionAttributes" value="true"/>
<property name="requestContextAttribute" value="rc"/>
<property name="exposeRequestAttributes" value="true"/>
</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代码 收藏代码
<body>
<div class="content">
#parse("/common/header.vm")
<div class="content-info">
#parse("/common/leftMenu.vm")
<div class="content-main">
$screen_content
</div>
</div>
#parse("common/footer.vm")
</div>
</body>
解释一下:如果你在处理某个请求时返回了a.vm模板,那么最终返回的页面是:将a.vm模板的内容填充layout页面的$screen_content占位符的内容,然后再将整个填充后的页面返回给用户。如果有兴趣你可以看一下大致的实现原理,其实很简单,就是先调用velocity引擎渲染请求返回的模板,将该渲染结果(一个String类型的字符串)作为一参数传递给layout页面,参数名称就是screen_content,然后再次调用引擎渲染layout页面,这样就会把该screen_content参数对应的值作为页面的一部分渲染出来了,从而实现整个页面的布局功能。
这样,我们就简单介绍了如何简单配置和使用velocity的layout功能了,这里你可以会有疑问了,如果我某个页面需要使用不同的layout页面,甚至我有些页面不需要使用layout功能,该怎么办?其实很简单,我们前面viewResolver配置中,配置的只是默认的layout页面的地址,如果你要使用不同的layout页面,只需在你要返回的页面中如下简单设置一下即可:
Html代码 收藏代码
#set($layout = "/layout/layout2.vm")
这样,我们就强制我们的这个页面使用的是layout2.vm这个页面布局。按照这个思路,如果我在某个特殊的页面,不想使用layout功能了,我们可以再指定另外一个layout页面,只不过这个layout页面内容比较特殊,它没有一般布局页面中有的那些页面统一的头部、尾部和菜单,只有如下所示的一行代码就可以了:
Html代码 收藏代码
$screen_content
由于暂时没找到如何在某个页面中,关闭页面的layout功能,所以想到了上面的方式投机取巧地实现了类似的功能,如果大家有好的方式可以指出。
分享到:
相关推荐
在Liferay门户中使用Velocity模板,开发者可以在三个不同的地方利用Velocity模板引擎:主题(Themes)、布局模板(Layout Templates)和CMS模板(CMSTemplates)。虽然这些地方都使用Velocity模板,但它们的行为略有...
Layout 是一个容器,它定义了 Screen 和 Navigation 在页面上的布局和位置,起到了布局管理的作用。Navigation 可以是 Header 或 Footer,也可以是 Menu 或 Tree View,负责展示网站的导航结构。Screen 是页面的核心...
在实际应用中,Velocity 还提供了其他功能,如宏定义、逻辑控制结构(if/else)、迭代(foreach)等,这些都使得开发者能够构建复杂的动态网页。同时,Velocity 支持与其他 Java 库的集成,如 Spring 或 Hibernate,...
同时,为了支持不同屏幕尺寸,可以使用Auto Layout和Size Classes来动态调整布局参数。 在实际项目中,你可能还会遇到性能优化的问题。例如,避免一次性计算所有元素的布局属性,而是在需要时才进行计算。此外,...
本主题将深入探讨如何实现自定义collectionView的三种布局方式:线性布局、瀑布流布局(也称为流式布局)和轮播布局。这些布局方式能够帮助开发者构建出更加独特且吸引用户的界面。 首先,我们从最基础的线性布局...
CSS3是CSS的最新版本,提供了许多新的功能和特性,如过渡(Transitions)、动画(Animations)以及多列布局(Multi-column Layout)等。在这个项目中,CSS3被用来辅助 Velocity.js,进一步增强动画效果,比如平滑的...
5. **自动布局和约束**:在Swift中,可以使用Auto Layout或者Size Class来帮助计算单元格的大小和布局,确保在不同设备和屏幕尺寸上都能良好显示。 6. **数据源和代理方法**:确保实现UICollectionViewDataSource和...
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { // 计算滚动到目标偏移量时的真实内容偏移量 return ...
例如,有一个布局片段定义为“jetspeed-layouts::VelocityOneColumn”,意味着这个布局片段使用了Velocity模板引擎,采用了一列表单的布局方式。另一个portlets片段定义为“j2-admin::LocaleSelector”,它表示这是...
- `layout`目录下的每个子目录代表一种布局样式。 - 例如:`myblue`目录就代表了一种名为“myblue”的样式。 - `myblue`目录内必须包含以下几个文件或子目录: - `css`:放置CSS样式表文件。 - `images`:存放样式...
砌石布局(Masonry Layout)是一种流行的网页布局方式,其特点是元素根据页面空间自动调整位置,形成类似砖墙堆砌的效果,每一行的元素高度不一,但宽度保持一致。这种布局可以最大化地利用屏幕空间,使得内容更紧凑...
(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity`:这个方法用于计算滚动到某一位置时,内容区域应该偏移的位置,对于瀑布流布局,...
设置好布局后,记得在UICollectionView的`collectionView(_:layout:sizeForItemAt:)`方法中返回单元格的大小。这通常取决于内容的尺寸,但瀑布流布局通常需要根据列宽动态计算。 最后,别忘了在`collectionView(_:...
4. **计算cell的大小**: 可以通过`- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath`方法来...
在`res/layout`目录下创建一个新的XML布局文件,例如`menu_content.xml`。这个文件将包含菜单的所有视图元素,如TextView、ImageView等,用于展示菜单项。 接下来,我们需要在主布局文件(例如`activity_main.xml`...
瀑布流布局,又称Masonry布局或Infinite Scroll布局,在网页设计和移动应用开发中非常常见,主要用于展示大量的图片或内容,如电商应用的商品列表、社交媒体的动态墙等。这种布局方式模仿了瀑布从高处流下的自然现象...
在Android开发中,手势识别是提升用户交互体验的重要方式之一,尤其在移动设备上,手势操作使得用户可以更直观、快捷地与...在实际开发中,你可以根据需要扩展此功能,例如添加更多视图或者实现更复杂的手势识别逻辑。
在上面的例子中,`baseLayout`定义了一个基本的布局,其中包括一个header、body和footer的tile。然后,我们可以为特定的页面创建一个扩展这个基础布局的定义: ```xml <definition name="homePage" extends="base...
一、`ViewFlipper`组件介绍 `ViewFlipper`是Android提供的一个视图切换控件,它可以方便地在多个子视图之间进行切换,通常用于实现动画效果,如轮播图、卡片式切换等。`ViewFlipper`内部包含一个或多个子视图,通过...
侧滑菜单通常用于隐藏主界面下的附加选项或功能,用户通过向左或向右滑动屏幕来显示或隐藏菜单。 首先,我们需要创建一个布局文件,这里以`main.xml`为例,该文件定义了界面的基本结构。在给出的示例中,只有一个...