石頭閒語:WebFlow UserInterface

操作圖例:

FlowNode.js

Flow object。資料結構。

/*
Copyright (c) 2006 Shih Yuncheng. All rights reserved.

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
*/

function NodeIndex(l, n) {
	this.level = l;
	this.node = n;
	return this;
}
NodeIndex.prototype.toString = function() {
	return "(" + this.level + "," + this.node + ")";
}

function FlowNode(name) {
	this.name = name;

this.items = new Array();
	//this.items.push(null); //每一新節點的會辦者為 END
	//this.backs = new Array();
	return this;
}
FlowNode.prototype.toString = function() {
	return this.name;
}

//每一層級至少有一節點。
function FlowLevel(name) {
	this.nodes = new Array();
	this.nodes.push(new FlowNode(name));
	return this;
}
FlowLevel.prototype.addNode = function(name) {
	var nodes = this.nodes;
	//nodes[nodes.length] = new FlowNode(name);
	for(var i = 0; i < nodes.length; i++) {
	    if(nodes[i].name == name)
	        return nodes[i];
	}
	var node = new FlowNode(name);
	nodes.push(node);
	return node;
}

/*
  Flow
*/
function Flow() {
	this.levels = new Array();
	this.levels.push(new FlowLevel("")); // Node END, Flow.levels[0]
	return this;
}

Flow.prototype.getNodeIndex = function(node) {
	var levels = this.levels;
	if(node == null || node.name == "")
	    return new NodeIndex(0,0);
	var nodes;
	for(var i=1; i < levels.length; i++) {
	    nodes = levels[i].nodes;
	    var j = this.arrayHasItem(nodes, node);
	    if( j >=0 ) {
	        return new NodeIndex(i,j);
		}
	}
	return null;
}

Flow.prototype.getNodeByName = function(nodeName) {
	var levels = this.levels;
	if(nodeName == null || nodeName == "")
	    return levels[0].nodes[0]/*null*/;
	var nodes;
	for(var i=0; i < levels.length; i++) {
	    nodes = levels[i].nodes;
	    for(var j = 0; j < nodes.length; j++) {
	        if(nodes[j].name == nodeName) {
	            return nodes[j];
			}
		}
	}
	return null;
}
/*
Flow.prototype.removeNodeFromItem = function(node) {
	if(node == null)
	    return;
	var levels = this.levels;
	var nodes;
	for(var i=1; i < levels.length; i++) {
	    nodes = levels[i].nodes;

for(var j = 0; j < nodes.length; j++) {
			this.removeItem(i, j, node);
		}
	}
}
*/
Flow.prototype.replaceNodeInItems = function(node, replaceWithItems) {
	if(node == null)
	    return;
	var levels = this.levels;
	var nodes;
	for(var i=1; i < levels.length; i++) {
	    nodes = levels[i].nodes;

for(var j = 0; j < nodes.length; j++) {
			for(var k = 0; k < replaceWithItems.length; k++) {
			    if(this.hasItem(i,j,node) >= 0) {
		        	this.addItem(i, j, replaceWithItems[k]);
				}
		    }
			this.removeItem(i, j, node);
		}
	}
}

Flow.prototype.insertLevel = function(indexOfLevel, name, fromNode) {
	var levels = this.levels;
	if(indexOfLevel > levels.length)
		return null;
	if(this.getNodeByName(name) != null)
	    return null; //已存在 (可能在不同層級)

levels.splice(indexOfLevel, 0, new FlowLevel(name));

var node = levels[indexOfLevel].nodes[0];

if(fromNode != null) {
		//node.items.pop();
		// remove the Node END; 新層級會包含一個新節點，而新節點的會辦者預設為 END
		while(fromNode.items.length >0) {
			node.items.push(fromNode.items.pop());
			//新層級之新節點之會辦者，為處理者的會辦者。
		}
		fromNode.items.push(node);
		//將新節點加入處理者的會辦者中
	}
	return levels[indexOfLevel];
}

Flow.prototype.removeLevel = function(indexOfLevel) {
	var levels = this.levels;
	if(indexOfLevel != levels.length - 1)
		return false;
	// NOTE: 層級移除策略未定。暫定只能移除最後一個層級。

if(indexOfLevel > levels.length)
	    return false;
	var level = levels[indexOfLevel];
	if(level.nodes.length > 1)
	    return false;
	//只有一個參與者時，才可移除層級
	var node = level.nodes[0];

this.replaceNodeInItems(node, node.items);

this.levels.splice(indexOfLevel, 1);

return true;
}

Flow.prototype.addNode = function(indexOfLevel, name, fromNode) {
	var levels = this.levels;
	if(indexOfLevel > levels.length)
		return null;
	if(this.getNodeByName(name) != null) {
	    return null; //已存在 (可能在不同層級)
	}
	else {
		var node = this.levels[indexOfLevel].addNode(name);
		if(fromNode) {
			fromNode.items.push(node);
		}
		//node.items.push(new NodeIndex(0,0));
		return node;
	}
}

Flow.prototype.removeNode = function(indexOfLevel, indexOfNode) {
	if(indexOfLevel > this.levels.length || indexOfNode > this.levels[indexOfLevel].nodes.length)
		return false;

if(this.levels[indexOfLevel].nodes.length <= 1)
		return false; //一個層級至少要有一個節點。

var node = this.levels[indexOfLevel].nodes[indexOfNode];
	//只有一個會辦者，且其為 END ，才可移除
	if(node.items.length > 1) {
	    return false;
	}
	else {//if(node.items.length <= 1 /*&& node.items[0] == null*/) {
		this.replaceNodeInItems(node, node.items);

this.levels[indexOfLevel].nodes.splice(indexOfNode, 1);
	}
	return true;
}

Flow.prototype.updateNode = function(indexOfLevel, indexOfNode, nodeData) {
	if(indexOfLevel > this.levels.length || indexOfNode > this.levels[indexOfLevel].nodes.length)
		return false;

if(this.getNodeByName(name) == null) {
	    return false; //不存在
	}

var node = this.levels[indexOfLevel].nodes[indexOfNode];
	var oldNode = new FlowNode(node.name);
	if(nodeData['name']) {
	    node.name = nodeData['name'];
	}
	this.replaceNodeInItems(oldNode, [node]);

return true;
}

Flow.prototype.arrayHasItem = function(ar, item) {
	for(var i = 0; i < ar.length; i++) {
		if(ar[i] == null && (item == null || item.name == ""))
			return i;
		else if(ar[i] != null && item != null) {
			if(ar[i].name == item.name)
				return i;
		}
	}
	return -1;
}

Flow.prototype.hasItem = function(indexOfLevel, indexOfNode, item) {
	if(indexOfLevel > this.levels.length || indexOfNode > this.levels[indexOfLevel].nodes.length)
		return -1;
	return this.arrayHasItem(this.levels[indexOfLevel].nodes[indexOfNode].items, item);
}

Flow.prototype.addItem = function(indexOfLevel, indexOfNode, item) {
	if(indexOfLevel > this.levels.length || indexOfNode > this.levels[indexOfLevel].nodes.length)
		return false;
    if(this.levels[indexOfLevel].nodes[indexOfNode] == null)
		return false;
	var items = this.levels[indexOfLevel].nodes[indexOfNode].items;
	if(this.hasItem(indexOfLevel, indexOfNode, item) <= -1) {
		items.push(item);
	}
	return true;
}

Flow.prototype.removeItem = function(indexOfLevel, indexOfNode, item) {
	if(indexOfLevel > this.levels.length || indexOfNode > this.levels[indexOfLevel].nodes.length)
		return false;

var items = this.levels[indexOfLevel].nodes[indexOfNode].items;
	if(items.length <= 1)
		return false;
	if(items.length <= 1 && items[0] && items[0].name == "")
		return false;
	var i = this.hasItem(indexOfLevel, indexOfNode, item);
	if(i >= 0) {
		items.splice(i, 1);
	}
	return true;
}
/*
Flow.prototype.nodeEnd = function() {
	//return this.levels[0].nodes[0];
	return null;
}
*/

WebFlow.js

流程編輯功能。源碼不展開。

/*
Copyright (c) 2006 Shih Yuncheng. All rights reserved.

function hiddenFlowMenu1() {
	document.getElementById("FlowMenu1").style.visibility = "hidden";
}

function mouseOverMenuItem(menuItem) {
	menuItem.className = "MenuItemMouseOver";
}

function mouseOutMenuItem(menuItem) {
	menuItem.className = "MenuItem";
}

function layoutToElement(objId, layoutToObj) {
	var obj = document.getElementById(objId);

if(obj) {
		var cs = obj.style;

//if(cs.visibility == 'hidden') {
			var o = layoutToObj;
			var x=0;
			var y=0;
			while(o.offsetParent) {
				x+=o.offsetLeft;
				y+=o.offsetTop;
				o=o.offsetParent;
			}
			//cs.top=(y+layoutToObj.offsetHeight)+'px';
			//cs.left=x+'px';
			cs.top=y+'px';
			cs.left=(x+layoutToObj.offsetWidth)+'px';
		//	cs.visibility='visible';
		//}
		//else {
		//	cs.visibility='hidden';
		//}
	}
}

function setCurrentNode(l, n) {
	currentNodeIndex.level = l;
	currentNodeIndex.node = n;
	currentNode = flow.levels[l].nodes[n];
}

function getNewLevelName() {
	var textbox = document.getElementById("FlowMenuAddNewLevel").getElementsByName("nodeName")[0];
	return textbox.value;
}

function cancleAddNewLevel() {
	var obj = document.getElementById("FlowMenuAddNewLevel");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
	hiddenFlowMenu1();
	obj.style.visibility = "hidden";
}

function submitAddNewLevel() {
	var obj = document.getElementById("FlowMenuAddNewLevel");
	var textbox = obj.getElementsByTagName("input")[0];
	//textbox.value = "";
    //layoutToElement("FlowMenuAddNewLevel", document.getElementById("FlowMenu1"));
    hiddenFlowMenu1();
	obj.style.visibility = "hidden";
	if(textbox.value != "") {
	    flow.insertLevel(currentNodeIndex.level+1, textbox.value, currentNode);
	    renderFlowTable();
	}
}

function showAddNewLevel() {
	var obj = document.getElementById("FlowMenuAddNewLevel");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
    layoutToElement("FlowMenuAddNewLevel", document.getElementById("FlowMenu1"));
	obj.style.visibility = "visible";
	textbox.focus();
}

function getNewNodeName() {
	var textbox = document.getElementById("FlowMenuAddNewNode").getElementsByName("nodeName")[0];
	return textbox.value;
}

function cancleAddNewNode() {
	var obj = document.getElementById("FlowMenuAddNewNode");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
	hiddenFlowMenu1();
	obj.style.visibility = "hidden";
}

function hideAddNewNode() {
	var obj = document.getElementById("FlowMenuAddNewNode");
	obj.style.visibility = "hidden";
	bodyControler.removeClickHandler(hideAddNewNode);
}

function showAddNewNode() {
	var obj = document.getElementById("FlowMenuAddNewNode");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
    layoutToElement("FlowMenuAddNewNode", document.getElementById("FlowMenu1"));
	obj.style.visibility = "visible";
	textbox.focus();
}

function cancleUpdateNode() {
	var obj = document.getElementById("FlowMenuUpdateNode");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
	hiddenFlowMenu1();
	obj.style.visibility = "hidden";
}

function showUpdateNode() {
	var obj = document.getElementById("FlowMenuUpdateNode");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = currentNode.name;
    layoutToElement("FlowMenuUpdateNode", document.getElementById("FlowMenu1"));
	obj.style.visibility = "visible";
	textbox.focus();
}

function getItemName() {
	var textbox = document.getElementById("FlowMenuAddItem").getElementsByName("nodeName")[0];
	return textbox.value;
}

function cancleAddItem() {
	var obj = document.getElementById("FlowMenuAddItem");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
    hiddenFlowMenu1();
	obj.style.visibility = "hidden";
}

function showAddItem() {
	var obj = document.getElementById("FlowMenuAddItem");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";

layoutToElement("FlowMenuAddItem", document.getElementById("FlowMenu1"));
	obj.style.visibility = "visible";
	textbox.focus();
}

function cancleRemoveItem() {
	var obj = document.getElementById("FlowMenuRemoveItem");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";
	hiddenFlowMenu1();
	obj.style.visibility = "hidden";
}

function submitRemoveItem() {
	var obj = document.getElementById("FlowMenuRemoveItem");
	var textbox = obj.getElementsByTagName("input")[0];
	//textbox.value = "";
    //layoutToElement("FlowMenuAddNewLevel", document.getElementById("FlowMenu1"));
    hiddenFlowMenu1();
	obj.style.visibility = "hidden";
	//if(textbox.value != "") {
	//window.alert(flow.getNodeByName(textbox.value));
	    flow.removeItem(currentNodeIndex.level, currentNodeIndex.node, flow.getNodeByName(textbox.value));
	    renderFlowTable();
	//}
}

function showRemoveItem() {
	var obj = document.getElementById("FlowMenuRemoveItem");
	var textbox = obj.getElementsByTagName("input")[0];
	textbox.value = "";

layoutToElement("FlowMenuRemoveItem", document.getElementById("FlowMenu1"));
	obj.style.visibility = "visible";
	textbox.focus();
}

function cancleRemoveNode() {
	var obj = document.getElementById("FlowMenuRemoveNode");
	//var textbox = obj.getElementsByTagName("input")[0];
	//textbox.value = "";
	hiddenFlowMenu1();
	obj.style.visibility = "hidden";
}

function showRemoveNode() {
	var obj = document.getElementById("FlowMenuRemoveNode");
	//var textbox = obj.getElementsByTagName("input")[0];
	//textbox.value = "";
    layoutToElement("FlowMenuRemoveNode", document.getElementById("FlowMenu1"));
	obj.style.visibility = "visible";
}

function renderFlowTable() {
	var div = document.getElementById("div1");

var offsetX=0;
	var offsetY=0;
	var o = div;
	while(o.offsetParent) {
		offsetX += o.offsetLeft;
		offsetY += o.offsetTop;
		o = o.offsetParent;
	}

jg_doc.clear();
	/*for(var i=0; i < div.childNodes.length; i++) {
	    div.removeChild(div.childNodes[i]);
	}*/

nodes[0].offsetLeft = offsetX + ((maxWidth - ((20+80)*flow.levels[0].nodes.length - 20)) / 2);
	nodes[0][0].innerHTML = "<input type='button' value='結案'/>";
   	nodes[0][0].style.top = offsetY + ((flow.levels.length-1) * (50 + 40)) + 'px';
   	nodes[0][0].style.left = offsetX + (nodes[0].offsetLeft + (20 + 80)) + 'px';
   	nodes[0][0].getElementsByTagName("input")[0].style['width'] = 80 + 'px';
   	nodes[0][0].getElementsByTagName("input")[0].style['height'] = 40 + 'px';
   	div.appendChild(nodes[0][0]);

for(var i = 1; i < flow.levels.length; i++) {
		for(var j = 0; j < flow.levels[i].nodes.length; j++) {
			nodes[i][j].innerHTML = "<input type='button' value='"
				+ flow.levels[i].nodes[j] + "' onClick='showFlowMenu1(this,"+i+","+j+");'/>";//+ flow.levels[i].nodes[j].items.join(",");
			if(nodes[i][j].addEventListener) {
				//nodes[i][j].addEventListener("mouseover", function(event){this.className = 'FlowMenuItemMouseOver';}, false);
				//nodes[i][j].addEventListener("mouseout", function(event){this.className = 'FlowMenuItem';}, false);
			}
			else { // M$IE
				//nodes[i][j].onmouseover = function(){this.className = 'FlowMenuItemMouseOver';};
				//nodes[i][j].onmouseout = function(){this.className = 'FlowMenuItem';};
			}
	    	nodes[i][j].style.top = offsetY +((i-1) * (50 + 40)) + 'px';
	    	nodes[i][j].style.left = offsetX +(nodes[i].offsetLeft + (j+1) * (20 + 80)) + 'px';
	    	nodes[i][j].getElementsByTagName("input")[0].style['width'] = 80 + 'px';
	    	nodes[i][j].getElementsByTagName("input")[0].style['height'] = 40 + 'px';

div.appendChild(nodes[i][j]);
		}
	}

//var EndNodeIndex = new NodeIndex(flow.levels.length,0);

jg_doc.setColor("#0000ff"); // green
	//jg_doc.drawLine(100, 50, 200, 400);
	for(var i = 1; i < flow.levels.length; i++) {
	    //var currentLevelLeft = (maxWidth - ((20+80)*flow.levels[i].nodes.length - 20)) / 2;
		for(var j = 0; j < flow.levels[i].nodes.length; j++) {
			var item;
			var nodeIndex;
		    for(var k = 0; k < flow.levels[i].nodes[j].items.length; k++) {
		        item = flow.levels[i].nodes[j].items[k];
				if(item == null || item.name=="") {
				    //nodeIndex = EndNodeIndex;
					jg_doc.drawLine(
						offsetX+(nodes[i].offsetLeft+(j+1) * (20 + 80) + 40),
						offsetY+((i-1)*(50 + 40)+40),
						offsetX+(nodes[0].offsetLeft+(0+1)*(20 + 80)+40),
						offsetY+((flow.levels.length-1) * (50+40)));
				}
				else {
					nodeIndex = flow.getNodeIndex(item);
					if(nodeIndex.level > i) {
						jg_doc.drawLine(
							offsetX+(nodes[i].offsetLeft+(j+1) * (20 + 80) + 40),
							offsetY+((i-1)*(50 + 40)+40),
							offsetX+(nodes[nodeIndex.level].offsetLeft+(nodeIndex.node+1)*(20 + 80)+40),
							offsetY+((nodeIndex.level-1) * (50+40)));
					}
					else {
						jg_doc.drawLine(
							offsetX+(nodes[i].offsetLeft+(j+1) * (20 + 80) + 40),
							offsetY+((i-1)*(50 + 40)),
							offsetX+(nodes[nodeIndex.level].offsetLeft+(nodeIndex.node+1)*(20 + 80)+40),
							offsetY+((nodeIndex.level-1) * (50+40)+40));
					}
				}
				//window.alert(item + nodeIndex);
		    }
		}
	}
	jg_doc.paint(); // draws, in this case, directly into the document

}

FlowTableSubmit.js

送出編輯內容。此處僅將結果顯示於網頁上，並未送回伺服端。請依實作規格自行補上伺服端的部份。

我當時是把內容轉成 JSON 格式後送回伺服端儲存。伺服端是以 C#/ASP.Net 實作。我並未擁有伺服端的著作權，故不發佈伺服端源碼。

/*
Copyright (c) 2006 Shih Yuncheng. All rights reserved.

div1.innerHTML += "</li>";
}

function addRow(tableId, level, n, node) {
	var table1 = document.getElementById(tableId).getElementsByTagName("tbody")[0];

var tdLevel = document.createElement("td");
	tdLevel.innerHTML = level;

var tdName = document.createElement("td");
	tdName.innerHTML = node;

var tdItems = document.createElement("td");
	for(var i = 0; i < node.items.length; i++) {
	    if(i>0)
            tdItems.innerHTML += ",";
		if(node.items[i] != null)
	    	tdItems.innerHTML += node.items[i];
		else
            tdItems.innerHTML += "結案";
	}

var tr = document.createElement("tr");
	tr.appendChild(tdLevel);
	tr.appendChild(tdName);
	tr.appendChild(tdItems);
//	tr.appendChild(tdBacks);

table1.appendChild(tr);
}
function X_renderFlowTable() {
	document.getElementById("div1").style.visibility = 'hidden';
	document.getElementById("table2").style.visibility='visible';
	var table1 = document.getElementById("table2").getElementsByTagName("tbody")[0];
	var trs = table1.getElementsByTagName("tr");
    while(trs.length > 1) {
		table1.deleteRow(1); //using Table Object Model;
	}

for(var l = 1; l < flow.levels.length; l++) {
		for(var n = 0; n < flow.levels[l].nodes.length; n++) {
	    	addRow("table2", l, n, flow.levels[l].nodes[n]);
		}
	}
}

WebFlow.sql

WebFlow SQL schema.

-- when insert, the column which IDENTITY could be ignored.
-- Note: IDENTITY only in M$ SQL Server, not SQL-92 Standard.
create table WebFlowMaster (
	WebFlowID int IDENTITY(1,1) not null primary key,
	Description text not null default '',
	ModifyEmployee varchar(50) not null,
	ModifyMemo text not null default '',
	ModifyTime datetime not null
);

create table WebFlowDetail (
	WebFlowID int not null,
	FlowLevel int not null,
	NodeID varchar(50) not null,
	ItemIDs varchar(1000) not null
	-- text will not allow to insert with select union in SQLServer.
	--SQL Sever線上說明:
    --在 SQL Server 版本 7.0 上，execute_statement 無法包含會
    --傳回 text 或 image 資料行的延伸預存程序。
    --此行為是對先前 SQL Server 版本的一項變更。
);

--select WFM.WebFlowID.*, N.FlowLevel, N.NodeID, I.ItemID
--from WebFlowMaster as WFM
--inner join (WebFlowNode as N inner join WebFlowItem as I
--  on N.WebFlowID = I.WebFlowID and N.NodeID = I.NodeID)
--on WFM.WebFlowID = N.WebFlowID

create procedure dt_WebFlowMasterInsert (
	@WebFlowID int output,
	@Description text,
	@ModifyEmployee varchar(50),
	@ModifyMemo text,
	@ModifyTime datetime
)
AS
BEGIN
Insert Into WebFlowMaster (
	Description,
	ModifyEmployee,
	ModifyMemo,
	ModifyTime
)
Values (
	@Description,
	@ModifyEmployee,
	@ModifyMemo,
	@ModifyTime
);

Set @WebFlowID = SCOPE_IDENTITY();

END
GO

create procedure dt_WebFlowMasterUpdate (
	@WebFlowID int,
	@Description text,
	@ModifyEmployee varchar(50),
	@ModifyMemo text,
	@ModifyTime datetime
)
AS
BEGIN
Update WebFlowMaster set
	Description = @Description,
	ModifyEmployee = @ModifyEmployee,
	ModifyMemo = @ModifyMemo,
	ModifyTime = @ModifyTime
where WebFlowID = @WebFlowID;

END
GO

WebFlow.css

視覺元件外觀。

WebFlow.html

主程式。

<span id="FlowMenuAddItem" class="FlowSubMenu1">
    <fieldset>
    <legend>新增會辦者</legend>
    <label>關卡名稱: <input type="text" name="nodeName" />
    <select name="nodeList" onChange="if(this.selectedIndex > 0){document.getElementById('FlowMenuAddItem').getElementsByTagName('input')[0].value = this.options[this.selectedIndex].value};"></select></label><br/>
    </fieldset>
    <p align="center">
    <input type="button" value="確定" onClick="submitAddItem();"/>
    <input type="button" value="取消" onClick="cancleAddItem();" />
    </p>
</span>

<span id="FlowMenuRemoveItem" class="FlowSubMenu1">
    <fieldset>
    <legend>移除會辦者</legend>
    <label>關卡名稱: <input type="text" name="nodeName" />
    <select name="nodeList" onChange="if(this.selectedIndex > 0){document.getElementById('FlowMenuRemoveItem').getElementsByTagName('input')[0].value = this.options[this.selectedIndex].value};"></select></label></label><br/>
    </fieldset>
    <p align="center">
    <input type="button" value="確定" onClick="submitRemoveItem();"/>
    <input type="button" value="取消" onClick="cancleRemoveItem();" />
    </p>
</span>

<table id="table2" border="1" style='visibility:hidden'>
<tboby>
<tr>
	<td>Level</td>
	<td>Node</td>
	<td>Items</td>
</tr>
</tbody>
</table>

var canvas = document.getElementById('div2');
if (canvas.getContext) {
	var ctx = canvas.getContext('2d');
}

var bodyControler = {
	currentNode: null,
	currentNodeIndex: new NodeIndex(0,0),
	jg: new jsGraphics("div1"),

currentObject: null,

_clickHandlers: new Array(),

addClickHandler: function(func) {
		this._clickHandlers.push(func);
	},

removeClickHandler: function(func) {
	    for(var i = 0; i < this._clickHandlers.length; i++) {
	        if(this._clickHandlers[i] === func) {
	            this._clickHandlers.splice(i, 1);
	            break;
			}
		}
	},

clickHandler: function() {
		for(var i = 0; i < this._clickHandlers.length; i++) {
		    this._clickHandlers[i]();
		}
	}
};

/*=============================================*/

var flow = new Flow();

flow.insertLevel(1, "申請人", null);
flow.addItem(1,0,null);
//flow.insertLevel(2, "A1", flow.levels[1].nodes[0]);
//flow.addNode(2,"A2",flow.levels[1].nodes[0])

renderFlowTable();

</script>
</body>
</html>

這是我一年前在某公司任職時寫的，算是程式雛型。當時最主要的困難點是在瀏覽器頁面上「畫圖／線」。試了包括 SVG 的多種方式後皆不可行，最後還是用 wz_jsgraphics.js 解決。日後待網頁向量圖形規格確認與普及後，再改寫吧。

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

石頭閒語

2007年08月28日

WebFlow UserInterface

FlowNode.js

WebFlow.js

FlowTableSubmit.js

WebFlow.sql

WebFlow.css

WebFlow.html

引用URL