Dorado 9 : Velocity页面模板(sample-center)

This page last changed on May 10, 2020 by william.jiang@bstek.com.

视图配置文件与Velocity模板文件之间的关系

示例中通过view的pageTemplate属性与Velocity模板建立关联关系:

<View title="Velocity Template" pageTemplate="com/bstek/dorado/sample/basic/VelocityTemplate.html">

Velocity模板关注点

#outputPageHead()

这是被view引用的Velocity模板中必须添加的一行代码

占位符

所谓占位符，即制作页面模板时，由模板制作人员预先定义，并留作开发人员使用的一个特别占位符号，开发人员可以在自己的视图开发完成后引用一个做好的模板，并将自己的控件使用renderTo,renderOn等方式最终在客户端渲染出来。

占位符号的定义并没有强制要求，模板处理机制中只遵循id匹配原则
我们查看本例的代码：

	<body style="margin:24px; background:white url(images/summary-bg.png) no-repeat">
<h1>Velocity模板</h1>
<h3>场景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

<h3>场景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

<h3>场景3 - renderOn容器模式:</h3>
<div id="place3" class="place">
这里的内容是通过HTML模板定义的！
<p>
<img src="images/dorado-logo-big.png">
</p>
</div>

在上面的代码中都是标准的HTML代码，并无特别之处，如果美工设计人员希望，将来你在place1, place2, place3中加入用户感兴趣的控件.则只要按照上述方式定义即可。

开发人员根据业务要求可能会定义如下的view:

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
    <View title="Velocity Template" >
        <Button caption="按钮1" />
        <Button caption="按钮2" />
        <ListBox items="One,Two,Three" />
        <Panel caption="一个面板控件" collapseable="true" width="800" height="300" layout="padding:20" />
    </View>
</ViewConfig>

为了使用之前的页面模板，则我们可以将view改造为:

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
    <View title="Velocity Template" pageTemplate="com/bstek/dorado/sample/basic/VelocityTemplate.html">
        <Button caption="按钮1" renderTo="#place1" />
        <Button caption="按钮2" renderTo="#place1" />
        <ListBox renderOn="#place2" items="One,Two,Three" />
        <Panel caption="一个面板控件" renderOn="#place3" collapseable="true" width="800" height="300" layout="padding:20" />
    </View>
</ViewConfig>

上述代码可以看出，我们将"按钮1"和"按钮2"替换到"place1"中,ListBox替换到"place2"中,面板控件替换到place3中.

区分三种模式:renderTo, renderOn, renderOn容器模式

为了细化替换方式，从而使模板具有更高的灵活性，这儿支持了三种模式

  • renderTo:保留原来的dom对象，将新的元素植入原dom对象的内部;
  • renderOn:将新的对象替换原来的dom对象;
  • renderOn容器模式:保留模板dom对象的内部内容，仅仅将dom对象替换为dorado控件对象