WebX实践指南_页面模板(二)

简介: 正如前面所讲的,WebX中View使用Velocity模板引擎来实现的。VelocityVelocity是一个基于Java的模板引擎,它可以让视图的设计者在web页面中引用java代码中定义的数据对象和命令,从而实现真正意义上的MVC模式,保证了系统长期可维护性。下面简单地介绍下,Velocity的使用,关于Velocity的更详细介绍参考:http://velo

正如前面所讲的,WebX中View使用Velocity模板引擎来实现的。

Velocity

Velocity是一个基于Java的模板引擎,它可以让视图的设计者在web页面中引用java代码中定义的数据对象和命令,从而实现真正意义上的MVC模式,保证了系统长期可维护性。下面简单地介绍下,Velocity的使用,关于Velocity的更详细介绍参考:http://velocity.apache.org/engine/devel

Velocity中语句都是#开头的,变量的定义都是$开头的
注释代码:## #* *#
模板的引用: #include() #parse()

变量

变量定义和使用

    定义:#set($a="velocity")
    使用:$a $!a

变量名规范:字母开头,中间可以由下划线、连接符或者数字组成
!的作用是,为空的时候输出为空;如果不加velocity莫波引擎不会解析空的变量

    变量的属性: $customer.Address $customer.name #set($customer.name="liujiajie")
    变量的方法: $customer.getAddress() $customer.getName()

对变量属性的操作间接使用了对象的get/set方法

Q: Velocity模板变量都是var这样的字符?
A: 使用\转义, #set(var="hello");$var=var,对应的$var=hello

Q: 单引号双引号区别?
A: 单引号里的变量不会被解析。#literal() … #end可以用与一段代码的中,这样引擎也不会解析其中的内容。

变量类型

数组: {"A", "B", "C"} 访问.get(0)
Map: {"key1":"val1", "key2":"val2"}  
串: 连字符 $firstname$secondname

内置变量

[1..2] //range操作

变量操作

#set($id=1)
#set($id=$id+1)

语句

  • foreach
 #foreach( $name in $names)
     #if($name)
     #elseif()
     #end
 #end
  • if elseif else end
    逻辑的与或非 ! && ||
  • stop
    #stop 用于停止模板解析
  • macro
    定义宏 #macro(d) #end, 使用宏的时候 #d()
    当然宏中可以传递参数 #macro(tablerows colorsomelist)

关于更多Velocity的内容参照官网的介绍,这里的说明基本上能满足常见的业务处理,后续会针对Velocity模板的处理做专题的说明。

Velocity结合Html/CSS/JS

在实际的使用中,Velocity语法都是嵌入到HTML/CSS/JS文件中,其作用主要是实现动态数据的渲染控制。例如,典型的Table表处理时,对数据的渲染:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  #foreach($item in $items)
  <tr>
    <td>$item.month</td>
    <td>$item.savings</td>
  </tr>
  #end
</table>

WebX中的扩展

WebX中能够很好地支持Velocity模板引擎,同时添加了很多的服务支持,这里主要介绍page服务和url服务 。在webx-component.xml文件中有相关的配置:

<!-- 将beans暴露给模板。 -->
<services:pull>
    <pull-factories:utils />
    <pull-factories:rundata-tool />
    <pull-factories:csrfToken />
    <pull-factories:form-tool />
    <pull-factories:control-tool />
    <pull-factories:uris-tool />
</services:pull>

这方面的资料比较少,后续用到的时候再补全

page

$page的处理, web.xml page-tool用于处理$page对象
常见的使用方法:

$page.setTitle("")

uri

在示例程序中会看到:

#set($url = "$app1Link.setTarget('simple/download.do').addQueryData('filename', 'blob')")
<a href="$url">$url</a>

这里的$app1Link是哪里来的?又有啥作用?现在可以明确的是app1Link这个变量肯定不是velocity模板提供的,grep命令看一下,找到对应的代码在uris.xml文件中配置的。仔细看之后发现这里实际上是使用了URIBrokerService。

UriBrokerService简介

Web由有许多资源组成,比如HTML文档,图片,视频, css/javascript等。每一种资源都由一种叫做资源标示符(URI)的符号来定位。URI除了出现在Web页面上,对于程序员来说,有时也会将它作为字面值常量定义在程序当中。

这类静态录入的URI,在早期的系统开发过程中,的确让程序员屡试不爽。但随着系统功能的不断扩充,复杂性越来越高,静态录入URI使得整套系统变得难以扩展和维护。为了有效解决静态录入URI带来的维护和扩展性问题,URIBroker Service应运而生。

URIBroker Service的特点是以统一的配置和动态渲染的方式来生成URI字符串。在系统重构或移植时,你只需要修改URIBroker Service的统一配置文件 ,无需修改一行代码即可完成全系统URI的无缝迁移。URLBroker Service从本质上,解决了URI移植性,扩展性差等问题,同时也简化了开发人员的编码工作量。

Velocity模板中如何使用

常见的使用方式如下:

$applLink.setTarget("simple/download.do")
$applLink.setTarget("simple/download.do").addQueryData('filename', 'name')
目录
相关文章
|
3月前
|
Java 数据库
若依框架---模板生成
若依框架---模板生成
48 0
|
6月前
|
开发者
SAP UI5 初学者教程之二十二 - 过滤器 filter 的开发和使用试读版
SAP UI5 初学者教程之二十二 - 过滤器 filter 的开发和使用试读版
47 0
|
9月前
|
XML 前端开发 JavaScript
Spring Boot + vue-element 开发个人博客项目实战教程(二十一、个人介绍、公告管理、标签管理开发)2
Spring Boot + vue-element 开发个人博客项目实战教程(二十一、个人介绍、公告管理、标签管理开发)2
148 0
|
9月前
|
XML SQL 前端开发
Spring Boot + vue-element 开发个人博客项目实战教程(二十一、个人介绍、公告管理、标签管理开发)1
Spring Boot + vue-element 开发个人博客项目实战教程(二十一、个人介绍、公告管理、标签管理开发)1
158 0
|
9月前
|
前端开发 NoSQL Java
Spring Boot + vue-element 开发个人博客项目实战教程(二十、登录日志、用户、分类管理页面开发)1
Spring Boot + vue-element 开发个人博客项目实战教程(二十、登录日志、用户、分类管理页面开发)1
113 0
|
9月前
|
XML SQL Java
Spring Boot + vue-element 开发个人博客项目实战教程(二十、登录日志、用户、分类管理页面开发)2
Spring Boot + vue-element 开发个人博客项目实战教程(二十、登录日志、用户、分类管理页面开发)2
68 0
|
9月前
|
JSON 前端开发 NoSQL
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)2
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)2
53 0
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)2
|
9月前
|
前端开发 JavaScript Java
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)1
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)1
132 0
|
9月前
|
XML SQL 缓存
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
103 1
|
9月前
|
前端开发 NoSQL Java
Spring Boot + vue-element 开发个人博客项目实战教程(二十二、文章管理页面开发(1))
Spring Boot + vue-element 开发个人博客项目实战教程(二十二、文章管理页面开发(1))
64 0