可视化开发平台使用教程(五)

一、应用举例

知识管理平台-采集发布

1、界面开发

a、在应用管理器添加一个框架应用

c、添加一个“单组件面板”作为根组件

d、在根组件内添加“标签组”子组件

e、在“标签组”内添加“标签”子组件（可添加多个）

f、选中第一个标签，该特有熟悉“label”的值为“采集发布”，左侧视图标签名会自动更新，在选中的“标签”内添加“水平可调二分容器”子组件，并为“水平可调二分容器”子组件添加“name”为“leftWidth”,”value”为“20”的原生变量（设置左侧部分默认宽度）

g、在“水平可调二分容器”内左侧添加“树形结构”子组件，右侧添加“渲染器”子组件

 

2、业务开发

a、在ide界面适当位置创建用于响应根组件加载完成事件，并将该图id复制并注册到根组件的“loaded”事件

b、在ide界面添加响应树组件右键事件的图，并将该图id复制并注册到树组件的node-contextmenu事件

d、将“渲染器”组件特有属性“name”的值改为“pig.crawlView.crawlPublish.renderContent”，便于业务处理，业务处理是动态改变右侧部分渲染的内容

e、为“树形结构”组件添加动态变量

f、实现初始化具体功能

查询根分组业务数据，构造，然后写入“树形组件”定义的动态变量

g、实现右键事件具体功能

业务判断是哪种类型节点被右击，然后选择不同的菜单显示业务，查询并构造菜单，然后显示菜单

 

写入到“树形组件”添加的更新数据动态变量名

3、运行效果

二、 实际操作

1、添加应用

在应用管理器添加类型为框架的应用。

2、开发

开发界面左侧区域为组件实例编辑界面，当没有添加任何实例是，会显示添加根组件按钮。

根据组件类型不同会显示不同的添加子组件按钮。

添加事件响应

graphTypeId为响应事件调用的图

原生变量，不同的组件支持的原生变量不太相同

特有属性，表现不尽相同

动态变量，组件预定义,应用运行时，开发者可以在代码中使用“$.view[]=xxx;”修改前端视图变量，从而动态修改视图。（下图为树形组件的更新数节点数据的变量，只要构造好树节点所需数据，调用“$.view[]=xxx;”即可修改树的渲染内容）

3、运行

运行效果如下