strawberry是一款基于JavaScript(vml,svg)的Web拓扑图(流程设计器)

1 篇文章 0 订阅
1 篇文章 0 订阅
背景:

    你是否曾经有过类似实现网络拓扑图的需求,网上搜索相关的资源后。要么简单数语概括下大体结构,要么就是成熟的收费商业产品。而少数为学习开源的几个也大都是基于IE浏览器的。因此笔者就产生了写一个能够兼容主流浏览器的Web拓扑图及工作流定制器的想法。  
    Strawberry是支持在Web上绘制工作流,拓扑图及其它简单拥有交互能力(用户行为或后台响应)的自定义绘图;并支持兼容主流浏览器(IE、火狐、Chrome、Safari等)。

一.拓扑图

    拓扑图的主要元素为"节点"、"链路"、"通路".

    1.节点就是网络单元,网络单元是网络系统中的各种数据处理设备、数据通信控制设备和数据终端设备。

    2.链路是两个节点间的连线。

    3.通路是从发出信息的节点到接收信息的节点之间的一串节点和链路。(百度)

二.工作流

    简单说,就是工作从开始到完成的过程。工作流由流程逻辑和路线规则组成。

    流程逻辑定义了任务的顺序和必须遵循的路线规则,还有截止期限以及由工作流引擎实现的其他业务规则。(google)

三.自定义绘图

    在页面上能够任意的对模型元素进行布局、拖拽、并能够通过与用户或后台的交互(操作)来改变页面元素的表现形态。可由图片或动画来提供更加丰富的交互效果。

四.应有功能
   
    1.模元:描述拓扑图中的"节点",工作流中的"流程逻辑",自定义绘图中的"模型元素"需要能够进行缩放,并能够附带业务信息。
    2.线元:描述拓扑图中的"链路",工作流中的"路线",自定义绘图中的线条元素,如分割线等。
    3.模元组:对模元进行编组,方便操作。
  其它应有扩展功能:
    4.历史操作
    5.略缩图
    6.对齐
    7.预览
    8.打印
    9.Word工具栏
       
五.性能
   
    JavaScript为什么慢?
    javaScript是解释型语言,并不能直接翻译成本地代码。所以相对于可以直接编译为本地代码的语言,速度方面是不具备可比性的。
    javaScript虽然名字里有Java但其实真的跟Java没什么太大的关系。所以像Java语言中积累优化(编译优化、运行期优化)方法也有很多并不存在。所以就要求开发人员掌握更多开发的技巧来一点一滴的来挤性能。

    1.尽量避免dom操作
    2.局部变量优先(作用域链)
    3.高效ECMAScript写法
    4.如何有效减少重绘重排
    5.减少事件数
    6.js压缩
    7.内存泄露
    8.其它:CSS相关、正则相关、网络相关、Ajax相关、缓存相关、当然还有最重要的" 兼容主流浏览器"!(我很少用!号)。

    目前Strawberry中创建一个模元时间大体为16毫秒,拖动模元、创建线元、拖动线元均可控制在45毫秒之内(具体浏览器可能有偏差)。

    以上所列的并不是关于js优化方案的全部主题,如果你想了解更多有关js内容欢迎加入我们讨论相关性能的问题。

六.版本情况
   
   虽然目前版本并没有正式Release,但从发布后已经有很多朋友用于正式的商业项目中去了。虽然和主流商用产品比起来,目前来看确实缺少了一些功能。但经过二次开发或调整解决方案也是大多能够达到预期的要求,满足客户的需要。
   最初strawberry只是因为个人兴趣和爱好驱使建立的,所以主要偏重于如何实现功能,如何解决各种主流浏览器兼容问题。类似调研试验项目,所以并没有在代码的整体结构和扩展性上投入过多的设计。现阶段计划重构整个项目,打算在YUI或Dojo两种体系结构中选择一种作为基础结构开发以保证高质量的扩展性与可维护性,并提供更多的实用功能。
  目前strawberry群组中有很多专业从事JavaScript前端的朋友(前HP高级前端、前方正高程、等知名企业的工程师)如果您对strawberry有什么建议或疑问。我们也会耐心解答,同时如果你想加入我们,成为strawberry的一员,为strawberry贡献源代码。我们更是欢迎。
   

  如果你喜欢javaScript、喜欢java、喜欢数据库、善于沉淀积累、乐于分享助人,有好的点子。我们欢迎你加入我们的群讨论组: 55959447

  Strawberry项目地址:http://code.google.com/p/xiaojw-graph-strawberry/
  (如果打不开,请耐心多尝试几次.)
 跨浏览器,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览器,且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务语言建立的后台上.  跨领域:流程设计不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.  以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义;  当左边的侧边栏设为不显示时,为只读状态,此时的视图区可当作是一个查看而非编辑。  侧边工具栏除了基本和一些流程节点按钮外,还自定义新的节点按钮,自定义节点都可以有自有的图标、类型名称,定义后在使用可可在工作区内增加这些自定义节点。  顶部栏可显示流程图数据组的标题,也可提供一些常用操作按钮。  顶部栏的按钮,除了撤销、重做按钮外,其余按钮均可自定义点击事件。  可画直线、折线;折线还可以左右/上下移动其中段。  具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。  具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。  能直接双击结点、连线、分组区域中的文字进行编辑  在对结点、连线、分组区域的各种编辑操作,如新增/删除/修改名称/重设样式或大小/移动/标注时,均可捕捉到事件,并触发自定义事件,如果自定义事件执行的方法返回FALSE,则会阻止操作。  具有操作事务序列控制功能,在工作区内的各种有效操作都能记录到一个栈中,然后可以进行撤销(undo())或重做(redo()),像典型的C/S软件一样。
? 跨浏览器,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览器,且不需要浏览器再加装任何控件。 ? 多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务语言建立的后台上. ? 跨领域:流程设计不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用. ? 以下从纯技术实现层面具体描述: ? 页面顶部栏、左边侧边栏均可自定义; ? 当左边的侧边栏设为不显示时,为只读状态,此时的视图区可当作是一个查看而非编辑。 ? 侧边工具栏除了基本和一些流程节点按钮外,还自定义新的节点按钮,自定义节点都可以有自有的图标、类型名称,定义后在使用可可在工作区内增加这些自定义节点。 ? 顶部栏可显示流程图数据组的标题,也可提供一些常用操作按钮。 ? 顶部栏的按钮,除了撤销、重做按钮外,其余按钮均可自定义点击事件。 ? 可画直线、折线;折线还可以左右/上下移动其中段。 ? 具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。 ? 具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。 ? 能直接双击结点、连线、分组区域中的文字进行编辑 ? 在对结点、连线、分组区域的各种编辑操作,如新增/删除/修改名称/重设样式或大小/移动/标注时,均可捕捉到事件,并触发自定义事件,如果自定义事件执行的方法返回FALSE,则会阻止操作。 ? 具有操作事务序列控制功能,在工作区内的各种有效操作都能记录到一个栈中,然后可以进行撤销(undo())或重做(redo()),像典型的C/S软件一样。
基于JQUERY的WEB在线流程设计GOOFLOW 0.5版 (2013-11-23) [特点]  跨浏览器,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览器,且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务语言建立的后台上.  跨领域:流程设计不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.  以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义;  当左边的侧边栏设为不显示时,为只读状态,此时的视图区可当作是一个查看而非编辑。  侧边工具栏除了基本和一些流程节点按钮外,还自定义新的节点按钮,自定义节点都可以有自有的图标、类型名称,定义后在使用可可在工作区内增加这些自定义节点。  顶部栏可显示流程图数据组的标题,也可提供一些常用操作按钮。  顶部栏的按钮,除了撤销、重做按钮外,其余按钮均可自定义点击事件。  可画直线、折线;折线还可以左右/上下移动其中段。  具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。  具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。  能直接双击结点、连线、分组区域中的文字进行编辑  在对结点、连线、分组区域的各种编辑操作,如新增/删除/修改名称/重设样式或大小/移动/标注时,均可捕捉到事件,并触发自定义事件,如果自定义事件执行的方法返回FALSE,则会阻止操作。  具有操作事务序列控制功能,在工作区内的各种有效操作都能记录到一个栈中,然后可以进行撤销(undo())或重做(redo()),像典型的C/S软件一样。  0.4版中,加入了只导出在初始载入后被编辑的流程图中,只作了增删改等变更的元素,这样可用于用户快速存储,只保存本次变更过的内容,不用重新保存整个流程。  0.5版中,结点的样式不再受到原有程序的限制,所有样式均默认为淡蓝色长方形;如果要指定为圆形,可在初始化时定义结点类型为”原有类型”+” round”;如果要指定为复合结点,则可在初始化时定义结点类型为”原有类型”+” mix”。”原有类型”+” myType”:myType可为自己写的一种特殊样式类.
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值