2.1 架构设计
开发人员点击“设计”进入设计模式,开发人员进行模型设计、开发和复用。
2.1.1 工程管理
- 新建工程
鼠标停留在分组目录最末尾,出现[+]按钮,选择创建工程。
- 工程顺序调整
通过拖拽可以调整工程的顺序以及所在目录。
- 工程编辑
鼠标停留在工程名称上,出现笔状图标,点击修改工程名称。
- 复制和删除
点击[复制]按钮,复制选中的工程。
点击[删除]按钮,删除选中的工程。
- 公开(待开发)
工程公开即发布到公开组件库,供其他工程使用。
2.1.2 画布节点树
画布节点树展示画布上所有组件大纲结构,对于较难在画布上选中的组件,大纲可以轻松区分组件层级,便于快速定位以及复用。
复制和引用
在画布节点树中,右键点击组件,即可复制或引用当前选中的组件。
2.1.3 组件库和属性栏
2.1.3.1 公开组件库
公开组件库提供可使用的组件,用户可以根据设计需要从公开组件库复制或引用相应的组件。
[复制]和[引用]
在画布节点树中,右键点击组件,即可复制或引用当前选中的组件。
2.1.3.2 基础组件库及其属性栏
(1)容器组件
- 模块
模块容器用于划分服务,您可以按照特定的功能和责任来创建不同的模块。
| 交互说明
通过拖拉,将模块区间拖到画布中。
双击模块,进入内部,内部可以放置模块、框架容器、流程容器以及基本形状。
| 属性栏说明
选中模块容器,在右侧属性栏,可以编辑名称以及说明。
- 流程容器
流程容器用于业务流程的开发。
| 交互说明
通过拖拉,将模块区间拖到画布中。双击容器,进入流程容器内部,内部只能放置引用的术语以及基础形状。
| 规则说明
业务流程由遵循一定的规则的术语组成。规则如下:
a.流程中必须存在基本形状中的空心圆和实心圆,空心圆作为流程开始标志,实心圆作为流程结束标志。
b.条件类型的术语,它后面的节点必须是切词类术语@(从公开组件库引用);
c.切词类术语@,它后面的节点必须是结果类术语;
d.用切词类术语!(从公开组件库引用)作为一条语句的结束;
e.一个流程可以由多条语句组成;
| 属性栏说明
{基础设置}
选中流程容器,在右侧属性栏,可以编辑名称以及说明。
{高级设置}(待开发)
高级设置是关于部署的配置,在设计模式中可以不需要填写。
- 框架容器
框架容器用于领域组件开发的主要容器。
| 交互说明
通过拖拉,在模块内部创建框架容器。
框架容器由五层构成,分别是体验层,领域语言层,标准语言层,函数层,数据层,每一层分别放置对应的模型组件。
五层名称 | 放置组件的类型 |
体验层 | 用于放置前端应用(待开发)。目前可以使用基本形状来表达一个前端应用; |
领域语言层 | 用于放置术语 |
标准语言层 | 用于放置状态机 |
函数层 | 用于放置函数; |
数据层 | 用于放置数据表。 |
| 属性栏说明
{基础设置}
选中框架容器,在右侧属性栏,可以编辑名称以及说明。
{高级设置}(待开发)
高级设置是关于部署的配置,在设计模式中可以不需要填写。
(2)模型组件
- 函数
函数可以是用户、优特云或其他云服务商提供的API,也可以是一段脚本函数或者设备函数。
| 交互说明
在框架容器内,通过拖拉,将函数组件拖到函数层中。
| 属性栏说明
{基础设置}
选中函数,在右侧属性栏,可以编辑函数英文名、中文名、别名以及描述。英文名当前容器内唯一。
{高级设置}
用于函数类型以及函数入参返参的定义。
{基础设置}
字段名称 | 是否必填 | 字段限制 |
函数英文名 | 必填 | 最长不超过50个字符,仅支持大小写字母、数字、下划线和中划线 |
函数中文名 | 必填 | 最大长度为30,仅支持中文、大小写字母、数字、下划线和中划线 |
函数别名 | 非必填 | 最长不超过50个字符,仅支持大小写字母、数字、下划线 |
函数描述 | 非必填 | 最大长度500 |
{高级}
函数类型 | 描述 |
本地全局函数 | 函数所在环境与框架容器所运行的环境一致,则称为本地全局函数。本地全局函数由开发者实现。用户需要将本地全局函数的运行环境和唯一编码定义在属性里。 |
云端函数 | 云端函数是由用户、优特云或其他云服务商提供的服务。用户需将云端函数的请求方式,访问路径、函数入参和返参定义在函数属性栏里。 |
JS脚本函数 | 用户只需分别上Js语言的脚本的代码文件 |
Lua脚本函数 | 用户只需分别上Lua语言的脚本的代码文件 |
Fn-SaaS函数 | Fn-SaaS函数是一中无需管理服务器既可以运行的云函数服务,用户只需编写代码并上传代码及相关文件,轻松实现各种服务。 |
入参 | 是否必填 | 字段限制 |
参数名称 | 非必填 | 最长不超过50个字符,仅支持大小写字母、数字、下划线和中划线 |
参数数据类型 | 必填 | int8,int16,int32,int64,double,float,string,bool,array,other |
参数备注 | 非必填 | 最大长度500 |
参数取值范围 | 非必填 | 格式为[最小值-最大值]。例:[1-500]。 |
返参 | 是否必填 | 字段限制 |
参数名称 | 非必填 | 最长不超过50个字符,仅支持大小写字母、数字、下划线和中划线 |
参数数据类型 | 必填 | int8,int16,int32,int64,double,float,string,bool,array,other |
参数备注 | 非必填 | 最大长度500 |
参数取值范围 | 非必填 | 格式为[最小值-最大值]。例:[1-500] |
备注:平台使用utf8mb4字符集,对于string类型,长度超过255自动转为text类型;长度超过16384个字符自动转为mediumtext类型;长度超过4MB自动转为longtext类型。
[插件]
对于云端函数,可以选择上传插件,插件本质即Js函数,在配置领域函数时通过关联相关的插件,可以实现对领域函数调用前,调用时,调用后的扩展。请参考附件-函数插件。
- 数据表
数据表是数据库的一部分,用于存储和管理数据。包含数据表名和字段名。
| 交互说明
在框架容器内,通过拖拉,将数据表组件拖到数据层的数据库中。
| 属性栏说明
属性有两部分,一个数据表属性,另外一个是使用。“数据表属性”用于设计数据表名以及字段定义等,“使用”用于新增数据。
字段名称 | 是否必填 | 字段限制 |
数据表英文名 | 必填 | 最长不超过50个字符,仅支持大小写字母、数字、下划线和中划线 |
中文名 | 必填 | 最大长度为30,仅支持中文、大小写字母、数字、下划线和中划线 |
别名 | 非必填 | 最长不超过50个字符,仅支持中文、大小写字母、数字、下划线 |
描述 | 非必填 | 最大长度500 |
字段英文名 | 必填 | 最长不超过50个字符,仅支持大小写字母、数字、下划线和中划线 |
字段中文名 | 必填 | 最长不超过30个字符,仅支持大小写字母、数字、下划线和中划线 |
类型 | 必填 | int8,int16,int32,int64,double,float,string,json,array |
默认值 | 非必填 | 最大长度500 |
取值范围 | 非必填 | 格式为[最小值-最大值]。例:[1-500] |
- 术语
| 交互说明
在框架容器内,通过拖拉,将术语组件拖到领域语言层中。
| 属性栏说明
属性栏有两个属性,“术语属性”用于术语定义,“使用”顾名思义就是术语的使用。
{基础设置}
字段名称 | 是否必填 | 字段限制 |
术语名称 | 必填 | 最长不超过30个字符,仅支持中文、大小写字母、数字、下划线和中划线。 |
术语描述 | 非必填 | 最大长度500. |
术语语句定义 | 必填 | 术语语句由名称、填空词和固定词组成。 |
{高级设置}
字段名称 | 是否必填 | 字段限制 |
术语类别 | 必填 | 切词类,匹配类 |
术语类型 | 必填 | 条件、结果、二者皆可,其他 |
标准语句定义 | 必填 | 见下文 |
[标准语句定义]
标准语句由值,函数、运算符和变量四种类型的元素组成。
其中值和函数参数支持编写Lua代码,使用lua语法定义。
- 状态机
状态机用来编写用户语言标准语句,包含状态机编号,名称,参与条件,触发条件,真动作和假动作。
| 交互说明
通过拖拉,将状态机拖到框架容器的标准语言层。
| 属性栏说明
{基础设置}
定义状态机编号、名称、变量表以及编写逻辑语句。
字段名称 | 是否必填 | 字段限制 |
状态机编号 | 必填 | 仅支持数字、大写字母C和下划线 |
状态机名称 | 必填 | 最长不超过30个字符,仅支持中文、大小写字母、数字、下划线和中划线。 |
{高级设置}
定义返回值表和返回值处理表。
[返回值表]是一个定义表,当前状态机表的返回值。
[返回值处理表]是一个定义表。当前表对其他表的返回值,有哪些业务处理。例如当遇到500时,抛出异常。
(3)基本形状
实心圆和空心圆在流程容器里有特殊意义,作为流程开始和结束符号。
其他基本形状没有特殊意义,可用于说明性表述。
| 交互说明
通过拖拽,可将基础形状拖动到画布上。
| 属性栏说明
基本形状只有一个名称属性。以“空心圆”为例,属性如下图:
2.1.4 日志(待开发)
2.1.5 画布
2.1.5.1 连线及其属性栏
选中组件锚点可以拉出线条连接其他组件。
| 属性栏说明
选择线段两端连接点,可以设置连线属性。可以设置连线名称,名称会显示在画布连线上。
2.1.5.2 组件操作
- 组件图拖拉拽
在画布上,可以选中组件进行上下左右移动,也可以点击组件四个边角进行放大或者缩小。
- 组件复制
选中组件,按住键盘Ctrl+C可以复制选中组件,按住Ctrl+V可以粘贴组件至画布中间位置。
2.1.5.3 三个视图
开放平台提供了三个视角的视图,分别是架构框图,五层架构图和详细设计图,让你可以让全面的了解设计方案,帮助你做出更准确的决策。
架构框图是从容器的角度生成的的容器层次关系视图;五层架构图是按五层架构规则重组所有组件的视图;详细设计图是将所有设计二维化成一张视图。
2.1.6 工具栏
2.1.6.1 撤销与恢复
2.1.6.2 图层调整
2.1.6.3 删除
在画布上选中组件,点击[删除]按钮,删除组件
2.1.6.4 画布比例调整
2.1.6.5 保存
2.1.6.6 导入和导出
| 导出
将当前工程导出为excel格式。
|导入
将excel格式的文件导入到画布中。
需要注意的是,导入工程会完全覆盖当前工程,如果误导入了,可以不要点击保存,直接刷新工程,便可以找回原来的数据。
2.1.6.7 编译和发布
点击[编译]按钮,平台会检查方案是否存在错误,编译成功后,生成可执行程序。
点击[发布]按钮,将可执行程序发布到云端。
发布成功之后,工程前端工程可以调用,进行前后端联调。
2.2 界面设计
开发人员——前端工程师,进在此进行前端开发。
2.2.1 功能栏
2.2.1.1 工程管理
在工程管理中,鼠标停留在分组目录最末尾,出现[+]按钮,选择创建前端工程。
2.2.1.2 预览和部署
点击[预览]按钮可以预览应用。
点击[部署]按钮将应用部署上线。
2.2.2 页面目录
菜单管理提供隐藏菜单的功能。
2.2.3 组件库
2.2.3.1 公开组件库(待开发)
2.2.3.2 基础组件库与属性栏
- 基础组件列表
布局
组件名称 | 组件功能 | 详细说明 |
弹窗 | 用于实现基础的弹窗(对话框)展示效果。 | 参见布局组件-弹窗 |
容器 | 可放入多个组件,常用于对组件布局进行管理控制。 | 参见布局组件-容器 |
标签页 | 用于实现页面的 Tab 栏导航效果。 | 参见布局组件-标签页 |
表单 | 快捷实现表单数据的提交与展示场景。绑定数据源后,可根据字段类型自动生成单行输入、下拉选择、提交按钮等组件。 | 参见布局组件-表单 |
json表单 | 用于展示和操作JSON数据 | 参见布局组件-json表单 |
分割线 | 为页面添加一条分割线,常用于组件之间的布局区分。 | 参见布局组件-分割线 |
展示
组件名称 | 组件功能 | 详细说明 |
音频 | 用于处理和播放音频 | 参见展示组件-音频 |
录音机 | 实现音频的录制、播放和存储等功能 | 参见展示组件-录音机 |
按钮 | 用于需要用户点击触发特定事件的场景,例如信息提交、页面跳转等。 | 参见展示组件-按钮 |
按钮组 | 用于将多个按钮组织在一起,以便于用户进行选择和操作 | 参见展示组件-按钮组 |
图片 | 用于在页面进行图片的展示。 | 参见展示组件-图片 |
文本 | 用于展示页面中的文本或标题的内容。 | 参见展示组件-文本 |
图标按钮 | 以图标的形式用户执行特定功能和操作 | 参见展示组件-图标按钮 |
统计框 | 用于展示和分析数据 | 参见展示组件-统计框 |
地图 | 用于展示地图信息 | 参见展示组件-地图 |
树 | 以树形结构展示多层级的数据内容。 | 参见展示组件-树 |
文档查看器 | 用于查看文档 | 参见展示组件-文档查看器 |
内联框架 | 支持将不同网页内容整合到一个页面中 | 参见展示组件-内联框架 |
地图图表 | 用于展示地理位置信息,以及与地理位置相关的数据 | 参见展示组件-地图图表 |
图表 | 用于数据的柱状图的可视化展示 | 参见展示组件-图表 |
列表 | 以列表的形式展示和操作数据 | 参见展示组件-列表 |
表格 | 以表格形式展示多行数据,支持对数据进行排序、搜索、自定义显示内容和操作。 | 参见展示组件-表格 |
表单
组件名称 | 组件功能 | 详细说明 |
输入框 | 用于输入单行的文字内容。 | 参考表单组件-输入框 |
下拉选择器 | 以列表形式展示选项,用户可进行单选操作。 | 参考表单组件-下拉选择器 |
(下拉)选择树 | 以树形结构展示多层级的选项,用户可进行单选操作 | 参考表单组件-选择树 |
文件上传 | 用于上传保存本地文件。 | 参考表单组件-文件上传 |
日期选择器 | 用于选择日期时间,支持年月日时分秒、年月日等选择模式。 | 参考表单组件-日期选择器 |
扫码 | 用于实现二维码的生成、扫描和识别功能。 | 参考表单组件-扫码 |
照相机 | 用于实现拍照和图片预览功能。 | 参考表单组件-照相机 |
富文本编辑器 | 提供丰富的文本编辑功能 | 参考表单组件-富文本编辑器 |
货币输入 | 用于货币值的输入。 | 参考表单组件-货币输入 |
电话输入框 | 用于输入电话号码。 | 参考表单组件-电话输入框 |
多选 | 以列表形式展示选项,用户可进行多选操作。 | 参考表单组件-多选 |
多选树 | 以树形结构展示多层级的选项,用户可进行多选操作。 | 参考表单组件-多选树 |
复选框 | 用于用户多选操作 | 参考表单组件-复选框 |
复选框组 | 页面中平铺选项,用户可进行多选操作。 | 参考表单组件-复选框组 |
单选组 | 页面中平铺选项,用户可进行单选操作。 | 参考表单组件-单选组 |
滑动开关 | 用于控制布尔值的是/否。 | 参考表单组件-滑动开关 |
滑动开关组 | 页面中平铺选项,用户可进行是否滑动操作。 | 参考表单组件-滑动开关组 |
数字滑动条 | 用于实现数字的输入和选择功能。 | 参考表单组件-数字滚动条 |
分类滚动条 | 用于实现根据不同类别对滚动内容进行分组的功能。 | 参考表单组件-分类滚动条 |
| 交互说明
在基础组件库中,通过拖动,可以将所需组件拖动到画布上,调整大小和位置。
| 属性栏说明
- 行为事件
组件提供执行动作配置的功能,你可以根据需求选择组件的执行动作。
- 行为事件
组件提供执行动作配置的功能,你可以根据需求选择组件的执行动作,当前支持的动作如下:
(1)跳转到
将重定向到另一个页面或应用程序。这个功能可以帮助您实现页面之间的导航和交互,提高应用程序的用户体验。
(2)显示消息
在界面上显示一条消息,通常用于提示用户或开发人员某些信息,该动作使用户更容易了解应用程序的状态和操作结果。
(3)打开对话框
弹出一个对话框,用户可以在对话框中输入信息或者选择选项,然后点击“确定”或“取消”按钮来关闭对话框。这个功能通常用于收集用户输入或者确认某些操作。
(4)关闭对话框
关闭当前的对话框。
(5)值存储
用于存储组件的值,以便在其他地方使用。
(6)刷新数据源
重新从服务器获取数据并更新组件中显示的数据。
(7)重置组件
清除所有已经输入的数据,并且恢复到你最初创建它时的状态。
(8)条件判断
根据特定条件来决定是否执行某些操作。
(9)调用函数
组件调用函数。
(10)操作数据表
组件操作数据表。
(11)调用状态机
组件调用状态机。
(12)调用术语
组件调用术语。
下图以调用函数为例,展示动作配置过程。
- 数据源
组件提供数据源管理的功能,可以创建、管理多个数据源。
2.2.4 前端案例
(1)餐饮菜谱食材计算
(1)餐饮菜谱食材计算
(2) 电脑钥匙案例