Skip to content

uitemplate

Jump to bottom
gcht edited this page Aug 2, 2018 · 4 revisions

layout: "post"
title: "UITemplate说明"
date: "2018-08-02 10:26"

服务概述

UI模板服务为用户提供了基于业务实体元数据的UI建模及运行渲染的整个过程。通过提供的UI模板设计器进行业务UI建模，形成UI模板元数据，UI模板运行时框架提供了一个基于元数据的高性能模板解析引擎，通过改模板引擎可以动态渲染出运行时UI界面，实现从元数据、UI模板设计到UI运行时渲染的整个设计开发过程。
UI模版服务支持租户级模板分类、定制模版、并支持UI模板的组织级分类。UI模板服务还支撑扩展能力，根据租户的不同需求可以对现有的档案进行属性扩展，也可以进行子实体扩展。UI模板服务为领域SaaS产品提供管理系统模板和租户个性化模板的能力。
从功能上讲，UI模板服务包含模板设计，模板维护服务，模板管理服务，模板加载服务和业务数据转换服务

业务需求

  • 针对企业业务场景需求，UI页面有统一的视觉及交互风格
  • 用户扩展业务需求，UI能及时根据业务需求自动变更，开发无需干预
  • 企业自身有定制个性化UI的需求
  • 企业需要为不同级别组织定制UI的需求

解决方案

这里描述针对业务场景的解决方案，可包括技术栈选型以及技术突破点，应用效果等。 UI模版通过基于业务实体元数据来实现UI模版的设计，进而在运行时通过元数据驱动来渲染展示页面。
将业务场景抽象成业务对象，进而抽象为业务实体，通过实体之间的关系和行为来控制UI模版的展示渲染。
前端UI模版解释引擎在运行态通过解析UI模版元数据动态生成UI页面，经过统一的渲染来实现统一的页面风格和交互，并提供统一的浏览、新增、编辑、保存、删除等常见的业务操作。

在实现上，UI模版为开发设计人提供了UI模版设计器来设计基于业务实体元数据的UI模版界面，通过从实体元数据和UI工具栏以拖拽方式进行布局设计、表单设计、复杂表格设计，并建立UI组件于元数据属性字段的绑定关系，生成并持久化UI模版元数据。

功能说明

UI模版服务具有以下功能：

  • 模板设计器
  • 模板管理
  • 模板分配

架构设计

这里要描述清楚服务的应用架构以及技术架构。

使用说明

界面操作说明

  • 模板管理 开发设计人员可以进入模版管理后，可以通过根据当前的应用服务分类、业务功能节点分类依次过滤查看自己默认的模版分类，在每个分类下都有预置的UI模版。开发设计人员可以进行浏览、编辑

模版管理员可以

  • 模板设计 具体操作流程如下

  • 在模版管理界面点击某一个模版分类标示下的➕，进入模版设计界面。

  • 模版设计器左侧【业务对象】使用说明 业务对象是当前功能节点下某一分类的实体元数据，以树的形式展示，通过拖拽实体字段到中间设计器画布上进行布局

  • 通过设计器左侧【控件】tab页里使用 【控件】tab页签里提哦那个

  • 通过设计器右侧属性栏，可以设置某一个具体控件的相关属性

  • 点击新增选择元数据模型

  • 模板分配

Maven依赖

此处注明maven依赖配置（可选）

API

此处对REST API和SDK API进行描述

引入模板sdk以及环境配置信息

开发人员要想使用模板服务需要引入模板依赖的sdk maven 坐标

<dependency> <groupId>com.yonyou.iuap</groupId> <artifactId>uitemplate_sdk</artifactId> <version>1.0-diwork-SNAPSHOT</version> </dependency>

引入配置信息文件uitemplate_sdk.properties ,该文件放到resouces 资源路径下
注意 ： 如果放到其他的路径下是识别不了的

配置信息内容如下 ：

引入模板sdk以及环境配置信息 开发人员要想使用模板服务需要引入模板依赖的sdk maven 坐标 com.yonyou.iuap uitemplate_sdk 1.0-diwork-SNAPSHOT

引入配置信息文件uitemplate_sdk.properties ,该文件放到resouces 资源路径下 注意 ： 如果放到其他的路径下是识别不了的

配置信息内容如下 ：

uitemplate.url 表示的是模板服务地址，可以根据自己的需求换成开发环境或是本地运行环境
accessKey ，accessScret 表示用于sdk rest 请求的加签认证使用的

模板sdk使用说明

UITemplateRestSingleton singleton= UITemplateRestSingleton.newInstance(tenantId, sysId, userId);
RestService restService = singleton.getRestService();
TranslateService translateService = restService.getTranslateService();

模板前端使用说明

详细说明文档可以查看：https://www.npmjs.com/package/yyuap-template

预置数据

此处描述需要预置什么数据（可选）

Clone this wiki locally