多比Web工作流设计器开发图模型与核心类

多比控件 中最核心的类是 v s G r a p h M o d e l ，它用来描述图的结构。该类提供  基本的 API 用来添加，更改和删除图中的元素。另外，它还提供一些其他的 函数，如获取图形的结构，以及提供的方法来设置的图的可见性，分组和样 式等等。

程序员只需要了解 vsGraphModel 类就可以了， 因为编程的时候并不要和 vsGraphModel 打交道。 我们在 vsGraphModel 上包装了一个类 vsGraph， 这个类提供更友好的 API 供程序要使用。

注意： 一些核心的 API，我们用红色表示出来。 我们引入了事务的概念，用来确保多项操作同时成功或同时失败（类似数据

库事务）。例如在我们的第一个例子中，有如下的代码片段：

 

//  在事务中同时添加多个元素 graph.getModel().beginUpdate(); try

{

var  v1 =  graph.addDian(parent,  null,  'Hello,',  20,  20,  80,  30);

var  v2 =  graph.addDian(parent,  null,  'World!',  200,  150,  80,

30);

var  e1 =  graph.addBian(parent,  null,  '', v1,  v2);

}

finally

{

//  更新界面

graph.getModel().endUpdate();

}

 

请注意上面的代码片段。我们先调用了 beginUpdate(), 使得图模型进入事务 模式， 添加了一些元素后，我们再在 finally 中调用 endUpdate() 提交事 务，这样使得 v1,v2,e1 要么同时加入成功，要么一个都不加入。

 

主要使用的  A PI :

 

vsGraphModel.beginUpdate()  – 开始事务  vsGraphModel.endUpdate()  – 结束事务.  vsGraph.addDian()  – 添加一个节点.  vsGraph.addBian()  – 添加一根连线.

修改图的重要函数

 

 

以下是一些修改图属性的的函数。

 

add(parent, child, index) remove(cell) setCollapsed(cell, collapsed) setGeometry(cell, geometry) setRoot(root)

setStyle(cell, style)

setTerminal(cell, terminal, isSource) setTerminals(bian,source,target) setValue(cell, value)

setVisible(cell, visible)

 

插入元素

 

 

程序员可以通过以上的 add 方法向多比控件中插入元素。 但是程序员需要 在插入元素前构造节点或连线。这样比较麻烦。我们提供以下两个快捷函数 用来插入节点和连线。

 

重要的函数:

 

v sG raph.insertDian(parent, id, value, x, y, width, height, style)  –

产生一个节点，并插入到图形中。

v sG raph.insertBian(parent, id, value, source, target, style) –  产生

一条连线并插入到图形中。.

 

vsGraph.insertDian() 参数意义:

 

parent  – 插入节点的父节点。程序员可以使用

graph.getDefaultParent()来获取默认的父节点。

i d  – 节点的唯一标示。 程序员可以通过该标示查找节点。如果不想关

心 id，只需要传入 null。（注意，请确保 vsGraphModel.isCreateIds()

返回 true），这样控件可以自动为你管理。

v al ue  – 这个可以是代表你业务数据的任何对象，例如，包含身高、姓

名、年龄等的职员对象。 如果是简单的字符串， 该字符串会为节点

或连线的标记文字。

x , y, width, height  –分别是位置坐标和宽度、高度。

s t y l e  – 样式字符串。会在以后的章节详细说明。

 

在插入连线的函数中， 有 source 和 target 两个参数，分别代表连线的开始 节点和结束节点。在调用该函数之前， 需要将开始和结束节点先插入到图 中。