cf战队模板(html),09. HTML模板(SEFC)
前面我们提到过大部分的Dorado页面都不需要JSP,我们可以通过布局管理器和容器完成系统中绝大部分的页面设计,但是也不能排除系统中还是会存在某几个特殊的页面,开发人员希望能够引入JSP或Velocity作为页面的布局管理器。比如说原有的布局管理器无法满足特殊的页面布局管理,或者说开发人员希望让美工更好的参与到页面的设计中。
下面我们介绍一下Dorado7中的HTML模板功能。
Velocity页面模板
我们查看sample-center中提供的Velocity页面模板示例:
从页面的风格我们看出这是一种开放式布局页面,其页面上嵌入了一些Dorado的控件,如:场景1中的按钮;
场景2中的一个在Dorado中叫ListBox的控件;
场景3中的一个面板控件
现在我们先看看其中的Velocity页面模板,找到src目录下com.bstek.dorado.sample.basic目录中的VelocityTemplate.html,并打开查看其中代码:
可以看到这是一个普通的html,唯一不同之处是"#outputPageHeader()"这行代码,这样这个html就比较容易的被美工人员在DremWeaver或FrongPage中进行编辑。与使用标签库开发不同,这种页面美工更容易读懂,也更容易被一般的网页编辑器读取和编辑。
我们再来看看同样目录下的VelocityTemplate.view.xml:
由于采用的是Velocity布局,因此在这个View中我们可以看到其中的控件是一个个罗列在View节点下的。View不再进行布局的管理。
现在我们再看看Velocity页面模板与View是怎么配合工作的,我们先了解View的一个特性:
Dorado默认的资源文件加载的约定:与View同名同目录的html、js、css文件可以被自动装载。
如刚才的VelocityTemplate.html和VelocityTemplate.view.xml文件我们注意到他的名字是一样的,这样Dorado就默认认为VelocityTemplate.html是VelocityTemplate.view.xml的HTML模板页面,并自动装载。同理相关的js和css文件也是这样,如果我们希望加载不同文件名或不同资源路径的文件,则我们也可以通过View的几个属性进行设定:
属性名说明
pageTemplateHTML页面模板
javascriptFilejs资源文件,多个js资源逗号隔开
styleSheetFilecss文件按,多个css文件逗号隔开
以上三个属性的值都支持协议的写法,如:classpath:xxx或file:xxx
这样我们就知道了View与HTML模板建立关系的方式。
另外关于控件渲染到HTML模板的模式,Dorado设计了三种:renderTo模式
renderOn模式
renderOn容器模式
renderTo
其中的Button1和Button2被渲染到了页面中带红边框的一个DIV中,在XML定义的时候我们设置了其renderTo属性:
这儿我们用了"#place1",如果对jquery属性就能猜出来这是css中的一种写法:在dorado中目的是表示要查找HTML模板中id为"place1"的DOM对象,并将当前控件渲染进去。我们在对应的HTML模板中可以找到这个一个DIV:
这个DIV本身设置了class,本例为:
显示效果为一带红色边框的DIV对象。renderTo功能是把button1和button2渲染到这个DIV的内部。place1这个DIV还会被保留。这就是我们在页面上看到的最效果。
renderOn
通过我们对renderTo的了解,我们很容易就能想到应该还有一种可以把目标DIV替换的渲染方式,如页面上的ListBox控件:
与Button控件采用了renderTo的方式不同,ListBox采用了renderOn的方式进行渲染。
查看HTML模板的设定:
其中place2与place1的class值相同,正常来将它们在浏览器中显示的时候都应该有一个红色边框,但实际运行的时候由于LisBox采用了renderOn的模式,导致整个DIV被替换了,也就无法看到那个红色边框。
renderOn容器模式
最后我们再来了解一下renderOn容器模式,我们已经知道了renderOn的运行处理机制,当在某些场景下美工人员可能希望他可以定义DIV的内部元素,也就是说希望在renderOn的运行处理过程中只替换外部的DIV,这中模式已经被renderOn支持了,例如我们看到的:
上面的place3中包含了一段文字说明以及一个图片的定义。而在View中我们定义的控件如下:
这儿用了一个Panel控件替换place3最外面的那个DIV,这样在浏览器中我们最终看到的效果中,那段文字和图片都得到了保留。不过需要注意的是这儿只能使用容器类的控件才能实现这种效果。
JSP页面模板示例
另外很多开发人员都更习惯JSP,而可能这个页面的开发中并需要美工人员的参与,那么开发人员可能会更乐于采用JSP做HTML模板。这个在Dorado7中也得到了支持,其基本的使用方法与Velocity模板一致。包括三种控件的渲染方式:renderTo,renderOn,renderOn容器
查看页面发现它与之前的Velocity页面是一模一样的。
唯一差别是View与模板的关系我们是通过View的pageUri属性设定的,如下图:
JSP所处的位置并不一定要在WEB-INF下,也可以按照习惯的用法直接放在根目录下。
我们再来看/WEB-INF/jsp/JspTemplate.jsp页面:
这个JSP与刚才的Velocity对应的HTML页面几乎没有差别,差别在头部,在这个JSP中我们需要引入Dorado的标签库:
另外我们在
标签中加入了:
Velocity中我们用的是:
从代码上看,dorado并没有对JSP做太多的侵入。我们还可以按照自己习惯的方式开发JSP。
可以选择其它的模板
从JSP的模板使用中我们注意到它的pageUri,事实上按照pageUri的运行规则是:当我们访问这个View的时候,如果发现配置了pageUri的时候,View就认为需要通过这个属性装载一个HTML模板,并Forward到这个URL上,至于这个URL是JSP还是html还是别的什么都不重要,关键在于web服务器的Servlet可以解析它。因此通过JSP模板的运行机制我们知道只要WEB服务器可以解析我们所希望的某种形式的模板(例如Velocity Tools, FreeMarker等),我们都可以将它配置到View的pageUri中作为Dorado的View的HTML模板。
cf战队模板(html),09. HTML模板(SEFC)相关推荐
- 模板 (函数模板语法 ,类模板与函数模板的区别,:函数模板案例,普通函数与函数模板的区别,普通函数与函数模板调用规则,模板的局限性,类模板分文件编写.cpp,Person.hpp,类模板与友元)
**01:函数模板语法: #include<iostream> using namespace std;//交换两个整型函数 void swapInt(int &a ,int &a ...
- html模板字幕,HTML通用模板
xxx *{margin: 0px;padding: 0px;} a{text-decoration: none;color: #333;} ul,li{list-style: none;} body ...
- Django模板、配置文件、静态文件及案例实现(创建模板、设置模板查找路径、模板接收视图传入的数据、模板处理数据、BASE_DIR、DEBUG、本地语言与时区、App应用配置)
1.Django模板 网站如何向客户端返回一个漂亮的页面呢? 漂亮的页面需要html.css.js. 可以把这一堆字段串全都写到视图中, 作为HttpResponse()的参数,响应给客户端. 存在的 ...
- C++知识点56——类模板(1、模板类的介绍)
一.类模板 和函数模板一样,类模板也得通过template关键字来声明和定义,C++标准库中有很多容器都是类模板 示例 template <typename T> class mystac ...
- 泛函编程—模板函数_类模板
函数业务逻辑一样,只是函数参数类型不同 函数模板的本质:类型参数化--泛型编程 语法: template <typename T> template <class T1,class ...
- 由浅入深:自己动手开发模板引擎——解释型模板引擎
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
- 由浅入深:自己动手开发模板引擎——置换型模板引擎(四)
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
- 由浅入深:自己动手开发模板引擎——置换型模板引擎(三)
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
- 由浅入深:自己动手开发模板引擎——置换型模板引擎(二)
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
最新文章
- php5.5 php5.6,php 5.5 5.6的区别有哪些
- 【企业管理】优秀的管理者没有追随者,而是与大家一起奋斗
- 回馈读者:赠花书一本!
- ALGO-123_蓝桥杯_算法训练_A+B problem
- javascript-抽象工厂模式
- Unity AssetBundle 爬坑手记
- java适合年龄_Java实现三人年龄
- AppFuse 3的乱码问题
- 漫画 | 硬核技术预测你有没有女朋友
- Disable STRICT_TRANS_TABLES @Mysql 5.7
- 最轻松mflac转flac、mp3方法
- matlab波浪号怎么打,数学中字母上面波浪号 波浪号怎么打到上面
- kotlin data class 遇到的坑
- Ubuntu下软件安装的方法(配图解)
- java数据结构-动态规划算法-一次性学会
- 什么是JIT,JDK17移除了JIT?
- [推荐]php编码规范
- php mql获取结果集,mql查询删除更新嵌入求指导php
- 标题 穿越雷区 java_6届国赛java试题 4: 穿越雷区
- 获取通讯录、通话记录、短信
热门文章
- WOW魔兽世界账号安全完全攻略(转)
- 案例03 补充:金字塔等图形边框的绘制
- 中国式家长 for Mac(模拟养成游戏)
- html跨行跨列学生报名表,HTML表格跨行、跨列操作(rowspan、colspan)
- 软件工程笔记:唯一不变的是变化
- Java 向数组中添加元素
- 开启零售新革命 阿里推「码上淘」
- 七年电商路,九条运营心经!
- tts文字转语音_Linux文字转语音(TTS)的问题
- 《识数寻踪:WinHex应用与数据恢复开发秘籍》——1.4 我们的“闺蜜”——数据恢复工具...