效果示例

一个单表维护页面，如下图:

假如我们分析自己的系统后发现存在多个这种效果的页面，同时在团队开发中，我们又希望能统一该类型页面的开发效果,假设要求如下：

标题顶部居左显示，且有统一的背景和渲染效果;
标题下统一放置数据导航按钮，如果业务界面有自己特殊的按钮，我们要求必须与数据导航按钮同一行，且在其右侧；
业务界面的数据展现控件统一展现在导航按钮的下方;

我们设计的模板页面的效果图:

视图模板定义

如上的视图模板，我们可以直接在一个view中定义，并通过<import>标记定义占位符号:

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <View>
    <PageBanner caption="${argument.caption}" layoutConstraint="top"/>
    <ToolBar layoutConstraint="top">
      <DataPilot dataSet="${argument.dataSet}"/>
      <Separator/>
      <PlaceHolder id="toolbarContent"/>
      <ToolBarButton action="${argument.saveAction}"/>
      <Fill/>
      <ToolBarButton caption="点击此按钮查看视图模板的效果">
        <ClientEvent name="onClick">window.open(&quot;com.bstek.dorado.sample.basic.TemplateView.d&quot;, &quot;_blank&quot;);</ClientEvent>
        <Property name="iconClass">fa fa-search</Property>
      </ToolBarButton>
    </ToolBar>
    <PlaceHolder id="mainContent"/>
  </View>
</ViewConfig>

上例中定义了两个占位对象toolbarContent和mainContent:

toolbarContent占位符是让开发人员可以在模板的数据导航按钮栏的右侧添加与业务相关的按钮
mainContent占位符是让开发人员在模板中添加业务数据展现控件(可能有一到多个控件)

视图模板的关联

定义好视图模板后,程序员在业务页面中就可以通过如下的代码关联视图模板:

<View template="com.bstek.dorado.sample.basic.TemplateView" title="${argument.caption}">

上述代码中view节点通过template进行模板引用声明

业务页面中的<Group>标签

在视图模板中我们通过<Import>定义了两个占位符号toolbarContent和mainContent,下面我们再来看业务页面中怎么向这两个占位符中加入自己页面需要的内容,范例代码如下:

 <ToolBar layoutConstraint="top">
      <Property name="userData"></Property>
      <GroupStart id="toolbarContent"/>
      <ToolBarButton caption="添加">
        <ClientEvent name="onClick">dorado.MessageBox.alert(&quot;您点击了添加按钮.&quot;);</ClientEvent>
        <Property name="iconClass">fa fa-plus</Property>
      </ToolBarButton>
      <ToolBarButton caption="删除">
        <ClientEvent name="onClick">dorado.MessageBox.alert(&quot;您点击了删除按钮.&quot;);</ClientEvent>
        <Property name="iconClass">fa fa-minus</Property>
      </ToolBarButton>
      <GroupEnd/>
    </ToolBar>

在上述的代码中我们通过<GroupStart>和<GroupEnd>标记申明了toolbarContent对象，并在两个标记中间加入两个新的按钮。通过这种方式我们就将这两个按钮加入到模板中的toolbarContent占位符中。

mainContent的使用与上面类似，看代码:

 <GroupStart id="mainContent"/>
    <DataSet id="dsProducts" dataProvider="simpleCRUD#getAll" dataType="[Product]" pageSize="10"/>
    <UpdateAction id="actionSave" caption="Save" dataResolver="simpleCRUD#saveAll">
      <ClientEvent name="onSuccess">dorado.MessageBox.alert(&quot;OK.&quot;);</ClientEvent>
      <Property name="iconClass">fa fa-save</Property>
      <UpdateItem dataSet="dsProducts"/>
    </UpdateAction>
    <DataGrid dataSet="dsProducts">
      <IndicatorColumn/>
    </DataGrid>
    <GroupEnd/>

该处代码我们申明了一个id为mainContent的ExportStart标签,并以ExportEnd结尾.在其中定义了一个DataSet,UpdateAction和一个DataGrid对象。这样我们在最终的展现界面上就看到本文第一张图的展现效果。

<Argument>标记说明

视图模板还支持<Argument>使用，在本例中，在视图模板的控件属性定义中我们通过"${argument.xxxxxx}"方式进行申明,如:

<PageBanner caption="${argument.caption}" layoutConstraint="top" />

<DataPilot dataSet="${argument.dataSet}" />

以上代码中对PageBanner的caption和DataPilot的dataSet属性都使用了"${argument.xxxxxx}"的定义方法
在业务页面中则需要定义<Argument>节点，便于模板视图使用，本例我们在业务页面中定义:

<Arguments>
        <Argument name="caption" value="视图模板测试" />
        <Argument name="dataSet" value="dsProducts" />
        <Argument name="saveAction" value="actionSave" />
</Arguments>

Dorado 9 : 视图模板(sample-center)

效果示例

视图模板定义

视图模板的关联

业务页面中的<Group>标签

<Argument>标记说明

Attachments: