概述

Trantor 通过对应用、交互和场景的抽象，以元数据驱动的方式帮助开发者高效可控的构建业务应用或对已有应用进行二次开发。

在 Trantor 研发中做了很多信息的抽象，最核心的就是 元信息 的抽象。在元信息的抽象这方面又分了一些不同的类型，其中最核心的三个类型为: 模型、视图、逻辑。

本节主要讲解的是 Trantor 的视图部分，Trantor 提供了一种高度抽象的 DSL 语法来编写视图，在配合对应的布局容器、数据容器和前端控件等，来达到高效开发的目的。在这篇文章中，主要介绍目前在 Trantor 中是如何定义视图，对常见的 List(列表)、Form(表单)、Detail(详情)类型视图进行分析、对视图 Controller、布局容器、数据容器和前端控件进行基本的概念描述，以及对视图资源的生效过程包括： 视图创建 ->资源上报 -> 创建模块 -> 发布模块 -> 访问视图 等流程进行描述。

建议接下来的内容配合示例代码一起学习

概念理解

Trantor 为每一个持久化模型都动态生成了内建视图，当内建视图无法满足某些业务场景时，可以自定义视图。

关于 DSL 的语法提示：

<?xml version="1.0" encoding="UTF-8"?>
<View version="2"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="https://terminus-trantor.oss-cn-hangzhou.aliyuncs.com/xsi//base.xsd">

    <!--配置时使 View 标签中的 xsi 链接生效就有语法提示了-->

</View>

视图

在 Trantor 项目中，视图承载着与用户交互的内容，并且视图总是属于一个模型。目前 Trantor 支持 List 、Detail 、Form 三种视图类型，分别对应模型的复数展示、模型单条记录的展示以及模型单条记录的新增和修改。

在 Trantor 项目中，是采用的一种自定义的 DSL(以 xml 语法标准去定义的) 语法来编写视图。使用这种 DSL 编写视图时，不需要去考虑 CSS 样式和一些简单的逻辑验证这部分的代码，实现较为复杂的 Javascript 逻辑时，采用视图 Controller 去实现。

DSL 语法

DSL 即「Domain Specific Language」，中文一般译为「领域特定语言」，在《领域特定语言》这本书中它有了一个定义：

一种为特定领域设计的，具有受限表达性的编程语言

在 016 版本之前， Trantor 的视图语法是一套类前端 vue 框架的模板语法，但剥离了很多模板逻辑语句，我们称之为 DSLv1

从 016 版本开始，Trantor 为了更好的进行解析和优化，采用了标准 XML 语法来描述视图资源。我们称之为 DSLv2

关于 xml 的介绍请点击这里

DSL 语法描述的标签形成了一棵文档树。这棵树从根部开始，并扩展到树的最底端。所有的标签都可以有子内容和属性。

简单使用

下面的例子展示了一个详情页字段平铺展示的容器：

<!-- 1. 页面根容器标签 -->
<View title="部门信息" version="2">
  <Detail title="所属公司" model="model"> <!-- 2. 数据容器标签 -->
    <Fields> <!-- 3. 容器内部标签 -->
      <Field name="age" /> <!-- 4-1. 字段标签 -->
      <Field name="name" /> <!-- 4-2. 字段标签 -->
    </Fields>
  </Detail>
</View>

语法及校验

常规 xml 语法，对 Trantor 来说视图模板 xml 是份解析配置。

DSLv2 支持 使用 xsd 进行语法校验。请在 View 节点中配置以下属性，并开启 IDE 的 xml 语法校验支持（一般默认开启）。

添加 xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”，指定文档规范
添加 xsi:noNamespaceSchemaLocation=“https://terminus-trantor.oss-cn-hangzhou.aliyuncs.com/xsi/1.0/base.xsd ，(这里也可以是本地文件相对路径）

<?xml version="1.0" encoding="UTF-8"?>
<View
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="https://terminus-trantor.oss-cn-hangzhou.aliyuncs.com/xsi/1.0.x/base.xsd"
  version="2"
   title="人员详情">
  <Detail model="trantor_doc_Person" key="person" dataCondition="age &lt; 25">
    <Fields>
      <GroupField title="#{this.data ? this.data.name : '基本信息'}">
        <Field name="name"/>
      </GroupField>
      <GroupField title="扩展信息">
        <Field name="password"/>
        <Field name="credentials"/>
        <Field name="birthday"/>
      </GroupField>
    </Fields>
    <Actions>
      <Action action="GoBack" label="GoBack" layout="Header"/>
    </Actions>
  </Detail>
</View>

表达式

DSLv2 中的表达式为 key="#{expression}"

表达式里可以使用controller 里自定义的方法和属性以及数据容器设置的上下文

注意：

只允许整个表达式包key=#{'name' + this.record.name}，不支持引号内拼接使用#{}的用法 key="name:#{this.record.name}"
对于数字和布尔的属性，表达式会被自动转换，可以不包#{}，例如：判断是否属于自动转换的属性，需要以语法提示为准，对于自定义组件的属性自动转换暂时还不支持
不再支持 true 的简写方式，例如 <Action multi /> 必须显式标识 <Action multi="#{true}" />。若语法提示该属性是boolean类型，也可以简写成 <Action multi="true" />
由于标准 xml 语法约束，若表达式中含有特殊符号，需要转义。

/**
* @desc
* name: 静态属性 value 值为 user
* label: 以'#{}'包裹 代表动态属性 value 值为 ${label}
* 以 #{} 包裹, 描述的 key 值 代表方法 比如
* initValue 代表方法 initValue
* onChange 代表方法 onChange
*/
<Field name="user" label="#{label}" initValue="#{'abc'}" onChange="onChange" />

<Field name="user" show="#{this.record.id &amp;&amp; this.record.isMale}" />

字段控件

字段控件与模型上的字段类型对应,控件分为编辑控件和展示控件以及搜索控件。

每种字段类型对应一种或多种控件（编辑/展示/搜索态）Field 详细参数

数据容器

数据容器是模型展示的最小粒度，每个数据容器对应一个模型（自定义数据容器除外）。在页面上的表现是一个独占一行的卡片或分组。

Trantor 内置的数据容器

数据容器	简介	数据结构
Table	表格，支持勾选，二级嵌套表	ListData
TableForm	表格表单，支持勾选，二级嵌套表，动态添加行	ListData
Detail	详情展示	ItemData
Form	表单容器	ItemData
Record	不展示的纯数据容器，可以作为数据载体	ItemData
IFrame	打开外部页面	ItemData
CascadeList	级联容器	TreeData
Tree	异步树	TreeData
SyncTree	同步树	TreeData

自定义数据容器

当 Trantor 内置的数据容器满足不了一些特定的业务场景的情况下，可以考虑自定义数据容器。

布局容器

布局容器能够在容器级别完成页面的多样化组合布局结构，这些布局容器最后描述出的页面结构就是静态的页面内容。可以在这些布局结构中填充数据容器进行数据的展示和操作

特点

不会涉及动态数据的交互，或者更直白可以描述为用已知的数据去描述当前页面布局
布局容器内部主要是对静态数据内容的描述

与数据容器的区别

数据容器内部会与数据交互，会去向服务端获取相关的数据资源(比如 table 数据)和页面描述资源(模型资源描述),这中间就涉及前后端数据交互的场景，比如删除，新增数据；布局容器只是通过已有的数据和已知的内容做前端渲染工作
数据容器是模型数据展示的窗口，每个数据容器对应一个模型（自定义数据容器除外），而布局容器不会对应一个模型

内置的布局容器

布局容器	简介
View	根容器，相当于页面级别的容器
Anchors	以页面锚点的形式快速定位多个容器
Tabs	页面内选项卡布局
LinkTabs	多页面间的选项卡布局
Steps	步骤条容器
Grid	自定义栅格布局

更多使用参考以下：DSL 语法、布局容器、数据容器、前端控件等的详细使用。

常见问题

菜单视图

将某个视图设置为菜单视图后，才可以在配置菜单时找到。

<View menuView="true">

</View>

视图跳转

用来处理页面之间的跳转，类似于 React 中 Route 的作用。

<Action targetView="erp_Staff_StaffCreate"/>

数据请求

根据上面的 Table、Detail 两种数据容器的使用，得知使用数据容器时都需要先请求数据，接着去渲染请求到的数据。

Table：<Table dataCondition="">，Trantor 视图内置的获取数据的方法
Detail：<Detail dataFunction="erp_QueryStaffFunc" dataParams="{id: pageContext.record.id}">，通过逻辑函数获取数据信息
补充：<Detail dataFlow="erp_QueryStaffFunc" dataParams="{id: pageContext.record.id}">，通过逻辑流获取数据信息

逻辑执行

根据上面的 Table、Form 两种数据容器的使用，得知：用于像”删除、提交”这样的操作：

Table：<Action logicFunction="erp_StaffDeleteFunc"/>，通过逻辑函数提交执行请求
Form: <Action logicFlow="erp_StaffCreateFlow"/>，通过逻辑流提交执行请求

视图 Controller

简单来说，就是为了适应复杂场景时，支持去编写 React 语法的前端逻辑代码，也就是 js 代码。

视图 Controller 是作为前端处理逻辑的一个扩展，Trantor 通过对视图的高度抽象，提供了字段校验，数据获取，表单联动，动态数据校验，页面通信等功能，对于一些特定的情况我们可以选择自定义去扩展一些特殊的逻辑。详情使用参考：视图 controller 开发文档。

代码示例

例如以下一个简单的案例，在 Staff 创建的时候，输入 staffName 后将输入的值打在浏览器开发者工具的 console。

import {
  state,
  PubSub,
  action,
  _,
  computed,
  Controller,
  utils,
} from "nusi-sdk";
import { Toast } from "@terminus/nusi";

export default class extends Controller {
  // 当字段值发生变化时触发以下方法
  onFieldChange = (filedName: string, value: string) => {
    if (filedName === "staffName") {
      //对数据进行处理和判断
      console.log("staffMobile: " + value);
    }
  };
}