# 工作台

工作台是云智开发平台开发平台的主要工作区域。采取通用的云 IDE 的设计方案,契合开发者的使用习惯。主要包括项目结构面板、组件面板、页签、工具栏 、视图 ide、脚本 ide、样式 ide、属性配置面板、事件配置面板、样式配置面板、工具栏、组件大纲面板、数据集面板、数据模型面板、函数面板、视图层面板、系统设置面板、画布等部分组成。下图为云智开发平台的功能架构图:

功能分区图

# 项目面板

开发者参与的项目都将展示在这里,云智开发平台采取就近维护的原则,每个项目都包含前端页面和后台服务两部分。

项目

# 组件面板

云智开发平台提供的内置前端组件将展示在这里,可以直接拖拽这里的组件进行页面的搭建。组件分为表单类、报表类、基础类、交互类,图表类。

# 页签

云智开发平台支持同时打开多个项目的页面和服务,被打开的项目都会缓存在系统后台,通过页签无缝切换。

项目

# 工具栏

通过工具栏可以对页面节点进行检索,,进行页面和服务的锁定解锁、保存、调试和发布。

# 数据集面板

页面上需要用到的数据集需要先到数据集面板中进行选用。选用后系统将数据集解析为可以后续开发过程需要使用到的字段集。字段集数据结构:

字段集

# 数据模型面板

对表单组件进行字段的双向绑定时,系统将自动生成一份数据模型,开发过程中可以直接通过该数据模型对表单的数据模型进行更新和访问。数据模型的结构如下:

{
	// 数据集名称
	"gatewayFD_FIELD_HDR_wlw": {
		// 入参 | 出参
		"request": {
			// 字段
			"Status": ""
		}
	}
}

TIP

数据模型是一种便捷性的辅助工具,在某些场景中推荐使用,详见数据模型

# 函数列表面板

函数列表面板是对页面上可执行函数的一个概览,可以通过查看按钮在 ide 中查看函数的脚本代码。 函数式编程详见事件驱动和函数式编程

函数列表

# 设置面板

通过设置面板可以对拖拽边界、开发账号信息以及系统快捷键等进行一个全局设置。

设置

# 视图面板

视图面板中的画布为页面在开发环境的渲染区,创建阶段,组件被拖拽到画布上通过渲染器渲染成视图投射到画布上。更新阶段,配置中心修改组件并通知渲染器对视图进行重绘,视图经过 EventlLoop 更新到画布上。

项目

# 脚本 ide

脚本 ide 为一个标准的在线 javascript 编辑器,支持代码高亮、代码智能提示等一系列功能,函数脚本代码统一通过脚本 ide 编辑。

脚本ide

# 样式 ide

样式 ide 为一个标准的在线 css 编辑器,支持代码高亮、代码智能提示等一系列功能,css 样式统一在样式 ide 中编辑。

脚本ide

WARNING

为保证应用的风格一致性,云智开发平台希望用户界面样式能通过统一的组件封装、主题配置来解决。所以样式 ide 应该只会在很少的场景中会被用到。当然,在个性化需求中对样式有特殊要求的情况下,完全可以在样式 ide 中编写 css 样式以覆盖组件内部原有样式。仅作为样式配置面板的一个补充。

# 视图层面板

云智开发平台中的视图是由一个个视图层组成的,目前视图层分为主视图层、弹窗视图层、侧边栏视图层三类。如下例,点击一个按钮打开弹窗就可以配置一个弹窗视图层:

视图层

# 配置中心

配置中心主要包括属性配置、事件配置、样式配置三个配置面板。在此你可以对组件的属性、行为以及样式进行配置。

# 属性配置

在云智开发平台中,页面向组件内部传值主要是通过各个组件提供的属性传递的,在属性配置面板中,可以通过对组件的属性配置来定义组件内部的不同状态。以表格树形为例, 可以通过对组件属性的配置很方便的控制表格的多选、分页、排序、边框、行列特殊状态高亮等等一系列特性。

属性配置 属性配置

TIP

在属性配置面板中还可以看到组件的句柄,关于组件句柄的用法详见$(组件句柄)

# 事件配置

在云智开发平台中,页面与组件间的交互以及组件与组件间的交互是通过事件来驱动的,每个组件都有自己特定的事件,详情见组件。事件分为两部分:原生事件与组件自定义事件。开发过程中组件自定义事件会用的比较多。 在事件配置面板中我们可以配置组件的事件来定义组件的行为。下面以按钮的点击事件为例:

属性配置

# 样式配置

在云智开发平台中,如果需要对组件的样式进行微调,可以在样式配置面板中进行设置。如下例:

属性配置

WARNING

为保证应用的风格一致性,云智开发平台希望用户界面样式能通过统一的组件封装、主题配置来解决。所以样式配置面板只是一个补充。另外,因为组件是封装性质的,组件内部结构对外不可见,样式配置面板是以行内样式作用于组件的,只会作用于组件的根节点,无法作用于组件的内部节点。如果需要覆盖组件内部节点的样式,请在样式 ide 中进行编写。

# 组件大纲

组件大纲是对当前视图中组件节点层级关系的一个展示,在视图上组件层级较为复杂,无法通过点击视图上的组件节点选中组件时,可以通过点击组件大纲中对应的组件来进行快捷选中。