跳转到内容
Trantor 文档

视图

概念理解

示例代码

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

Trantor 提供了一种高度抽象的 DSL 来编写视图，具体描述详见：DSL语法。

DSL 基于 XML 扩展，用户在编写视图时，主要关注布局容器、数据容器、前端控件等主要概念即可完成视图的编写。

视图定义

模块中的视图放置在Impl模块中的 src/main/resources/trantor/resources/{moduleKey}/view 目录下，名称类似于{name}.view.xml的文件组成，例如名称为PositionCreate.view.xml。

内建视图

业务模型、搜索模型、快照模型有3个内建页面 :

  • {modelKey}__List__builtIn： 列表页，为模块配置菜单时可选择模型List的内建视图
  • {modelKey}__Detail__builtIn：详情页
  • {modelKey}__Form__builtIn： 表单页，用于新增和编辑

配置模型有2个内建页面：

  • {modelKey}__SettingDetail__builtIn，详情页
  • {modelKey}__SettingForm__builtIn， 表单页，用于新增和编辑

@BuiltInView

Trantor目前提供了内建视图，但内建视图过于简单，为了提高内建视图的可玩性，Trantor提供了内建视图注解@BuiltInVIew，用于渲染内建视图。目前仅支持GroupField渲染

public @interface BuiltInView {
    /**
     * 字段组，效果为视图DSL的<GroupField></GroupField>
     */
    GroupField[] groupFields() default {};
}

GroupField仅针对Detail和Form类型的内建视图生效

public @interface GroupField {
    /**
     * 标题
     */
    String title() default "";


    /**
     * 当前分组下的field是否单行展示
     */
    boolean singleColumn() default false;


    /**
     * 组里面的字段，即用DSL中<GroupField></GroupField>包裹的字段
     */
    String[] fieldNames();
}

示例:

@Model(name = "商品")
@BuiltInView(
        groupFields = {
                @GroupField(title = "基本信息", fieldNames = {ItemBO.itemName_field, ItemBO.itemNumber_field, ItemBO.itemType_field}),
                @GroupField(title = "其他信息", singleColumn = true, fieldNames = {ItemBO.desc_field, ItemBO.itemImage_field}
                )}
)
public class ItemBO extends BaseModel<Long> {


    @Field(name = "商品名称")
    private String itemName;


    @Field(name = "商品编号")
    private String itemNumber;


    @Field(name = "商品类型")
    @DictionaryMeta(ItemTypeDict.class)
    private String itemType;


    @Field(name = "商品详细描述")
    private String desc;
    @ImageMeta
    @Field(name = "商品图片")
    private String itemImage;


    @Field(name = "商品价格")
    private BigDecimal itemPrice;
}

视图渲染效果：

image-20210527174918085

设置为菜单视图

在设置视图为菜单视图后，配置菜单时，路由视图可以选择该视图。

<View  menuView="true">


</View>

视图跳转

在进行跳转视图行为时，可以通过视图key 实现视图的跳转，如跳转到PositionCreate.view.xml视图：

<Actions>
    <Action label="新建岗位" targetView="demo_Position_PositionCreate"/>
</Actions>

demo_Position_PositionCreate为视图key，规则为：modelKey_文件名

视图Controller

Controller可以让前端自定义写一些代码，可做字段校验，数据获取，表单联动，动态数据校验，页面通信等功能。

模块中的Controller放置在Impl模块中的src/main/resources/trantor/resources/{moduleKey}/view目录下，名称类似于{name}.view.ts文件组成，例如名称为：StaffList.view.ts，和视图页面相对应。

注意：视图和配套的 Controller 文件除了文件名后缀不同外，文件名name需要相同才能被识别成一组。

详情见：开发文档controller。