鸿鹄创新官方网站 使命:推动智能制造创新革命

经典案例

当前位置:首页 > 经典案例

工作流开发实例

首个实例接下来让我们写出第一个最简单的实例。demo.html中,引入GooFlow样式文件和核心库文件<!-- demo.html --><head> <link rel="st...

首个实例

接下来让我们写出第一个最简单的实例。

demo.html中,引入GooFlow样式文件和核心库文件

<!-- demo.html --><head>
    <link rel="stylesheet" type="text/css" href="./dist/assets/GooFlow.min.css"/></head><body>
    <div id="demo"></div>
    ……    <script type="text/javascript" src="./dist/GooFlow.js"></script>
    <script type="text/javascript" src="./dist/extends/group.js"></script>
    <script type="text/javascript" src="./dist/extends/export.js"></script>
    <script type="text/javascript" src="./dist/extends/print.js"></script>
    <script type="text/javascript" src="./demo.js"></script></body>
//// demo.js
    var options = {
        toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"],
        haveHead:true,
        headLabel:true,
        headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true,则定义HEAD区的按钮
        haveTool:true,
        haveGroup:true,
        useOperStack:true
    };
    var demo = GooFlow.init("#demo",options);

打开demo.html,就可以看到一个空白绘图区的设计器页了!体验一下绘画流程图时行云流水的快感。

AMD加载实例

当然,你也可以AMD模式载入库文件,但初始化方式是一致的:

/** require.config.js **/requirejs.config({
    map: {
		'*': {
			'css': 'https://cdn.bootcss.com/require-css/0.1.10/css.min.js' // https://github.com/guybedford/require-css, RequireJs's plugin
		}
	},
    paths: {
        GooFlow: './dist/GooFlow',
        'GooFlow.group': './dist/extends/group',    //可选,支持分组泳道显示的扩展包 (从1.3.8rp版本开始)
        'GooFlow.export': './dist/extends/export',  //可选,将流程图导出为图片文件的扩展包
        'GooFlow.print': './dist/extends/print',    //可选,将流程图输出打印或另存为PDF的扩展包
    },
    //// ……
    shim: {
        GooFlow: {
            deps:['css!./dist/assets/GooFlow.min.css']
        }
    },});
<body>
    <div id="demo"></div>
    ……    <script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
	<script src="../assets/js/require.config.js"></script></body>
/** main.js 扩展功能包 **/require(['GooFlow'], function ( GooFlow ) {
    require(['GooFlow.export','GooFlow.print'], function (){
        // 初始化的代码
        var options = { …… };
        var demo = GooFlow.init("#demo",options);
        demo.setNodeRemarks(remark);         //remarks为左侧工具栏按钮的title提示定义
        demo.setHeadToolsRemarks(headBtns);  //headBtns为顶部标题栏按钮的title提示设置
        demo.loadData(jsondata);             //jsondata为表达流程图详细的JSON数据
        demo.onBtnSaveClick=function(){
            demo.exportDiagram('myFile');//流程图导出图片功能
        }
        demo.onPrintClick=function(){
			demo.print();//打印流程图或另存为PDF功能
        }
    });});

用户界面

如图所示:


工作区 宽度高度初始为无滚动条时的大小,鼠标滑到最右/最下边时出现半透层,只要对其点击便可手工扩展工作区。 水平X轴方向由左至右,竖直Y轴方向由上至下,与CSS样式中的顶距top和左距left是一样的。 当载入一个已绘制好的JSON流程图数据时,工作区宽高也会自适应载入流程图的宽高大小,自动扩展。

绘制工具栏 在绘图区左边,从上至下依次为: 选择指针、连接线、开始节点、结束节点、任务节点、自动节点、决策节点、状态节点、扩展附加节点、分支结点、聚合结点、复合子流程结点 ;最后一个不是节点,而是节点连线编辑与分组泳道编辑两种工作区状态的切换开关,当切换至分组泳道编辑后,只能操作分组泳道块,节点与连线都被锁定;反之即然。

顶部操作栏 是展示流程图标题和放置一些功能按钮的地方,这些按钮除了系统自带外,还可由用户自定义。

初始化时如果设置了不要左边工具栏 ,则关闭了编辑功能,该组件就变成了一个流程图查看/跟踪器。

绘图区元素

被选中的节点被选中的边线被选中的分组泳道被选中的便笺

结合“界面设计”一节中的完整截图及以上的元素选中样式图例表格,你可以发现:

  • 节点 默认为淡蓝色的圆角矩形;若加入了.item_mix类,则显示为绿色;若加入了.item_round类,则显示为圆形。

  • 节点 一共有双击文字更名、拖动、调整大小、新增、删除的默认功能,可自定义右键单击事件。

  • 连线 一共有有向实线有向虚线无向实线无向虚线四种(1.3.9新增),并有直线、中段可上下拖动的折线、中段可左右拖动的折线共三种绘画方式,双击线条可直接编辑线条的文字说明内容,也可手动改变连线的起点或终点。

  • 分组泳道 需要左下角的开关被按下后才可编辑,有四种随机颜色,点击左上角的圆形图标后可改变颜色,双击文本可直接编辑,也可像节点一样拖动和调整大小。

  • 便笺(1.3.8新增) 需要左下角的开关被按下后才可编辑,双击中间区域可直接编辑,也可像泳道一样拖动和调整大小。


文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~