`

工作流、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贡献源代码。我们更是欢迎。
   
七.未来功能

    1.支持图片导出(群内成员最新需求)
    2.支持主流工作流兼容
    3.动画效果
    4.提供方便简洁的数据访问接口(群内成员需求
    5.3D
    6.完善的文档
    7.尽可能的高效

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

  Strawberry项目地址(源码):http://code.google.com/p/xiaojw-graph-strawberry/
  (如果打不开,请耐心多尝试几次.)

新建流程:

流程图1:

流程图2:



1
1
分享到:
评论
2 楼 冰冷缠绵 2012-02-01  
leexiaodong2009 写道
怎么中间的连线不能删除啊???

可以删除的,具体问题咨询可加群聊。
1 楼 leexiaodong2009 2012-01-31  
怎么中间的连线不能删除啊???

相关推荐

    基于WEB的全JS工作流

    【基于WEB的全JS工作流】是一种现代软件开发技术,它允许开发者在Web环境中实现复杂的业务流程管理,而无需依赖后端服务器的处理。这种技术的核心在于使用JavaScript语言,一种在浏览器环境中运行的脚本语言,来构建...

    strawberry(web拓扑图)

    Strawberry是一个提供了可以让用户动态制定Web拓扑图(流程设计器)的Web解决方案,Strawberry是基于JavaScript?,VML,SVG等Web技术开发而成,并且支持主流浏览器.IE,火狐,Chrome,Safari等.Strawberry不含有任何三方插件...

    web工作流设计器(strawberry)

    Strawberry是一个提供了可以让用户动态制定Web拓扑图(流程设计器)的Web解决方案,Strawberry是基于JavaScript?,VML,SVG等Web技术开发而成,并且支持主流浏览器.IE,火狐,Chrome,Safari等.Strawberry不含有任何三方插件...

    基于 HTML5 快速构建拓扑图1

    Web Storage 可以快速存取小量数据,而 IndexedDB 则适合存储结构化的大数据,可以实现拓扑图的离线浏览和快速检索。 此外,HT 提供了一系列预定义的图形组件和交互模式,如节点、连接线、拖放、缩放和平移等,...

    html5绘图工具 基于 HTML5 的 Canvas 技术,拓扑图是电力

    在电力和电信行业中,拓扑图是一种常见的方式,用于表示设备、网络和系统的连接关系,有助于理解和分析复杂系统的工作原理。 基于 HTML5 的 Canvas 技术,我们可以开发出专门用于绘制拓扑图的工具。这些工具通常...

    web 流程图 设计器

    电力、军工、煤炭、化工、科研、能源等各种监控软件、web工作流设计器、asp.net工作流设计器、电力、化工、煤炭、工控组态软件、仿真、地理信息系统、工作流、复杂报表 工业SCADA系统、ERP流程设计系统、图形管理、...

    工作流设计器(多比图形控件).rar

    多比图形控件是一款基于Web的矢量图形控件, 类似于网页上的Visio控件,是目前国内外最佳的基于web的工作流设计器、工作流流程监视器解决方案。 可广泛应用于包括:电力、军工、煤炭、化工、科研、能源等各种监控...

    多比工作流设计器图形控件 v2.5

    多比图形控件是一款基于Web的矢量图形控件, 类似于网页上的Visio控件,是目前国内外最佳的基于web的工作流设计器、工作流流程监视器解决方案。 可广泛应用于包括:电力、军工、煤炭、化工、科研、能源等各种监控...

    Visio 2007 Web控件模板

    地理信息系统、工作流、复杂报表 工业SCADA系统、ERP流程设计系统、图形管理、图形拓扑分析、 GIS地理信息系统系统、工程制图等领域。 目前已经为全球20多个国家的数千家客户采用。 如何使用 1. 将本软件解压到web...

    F5图标及标准拓扑图

    无论是针对物理设备还是虚拟环境,F5都提供了丰富的图标资源,使得网络架构师和工程师能够创建出既美观又实用的拓扑图,有效地展示系统的结构和工作流程。此外,对于那些需要进行灾难恢复或优化广域网性能的企业来说...

    jQuery实现人事物关系拓扑图代码.zip

    最后,调试和优化是必不可少的步骤,确保拓扑图在各种设备和浏览器上都能正常工作,并且性能良好。这可能涉及到代码的优化、图片资源的压缩、异步加载策略的应用等。 总的来说,"jQuery实现人事物关系拓扑图代码....

    web流程设计器(jsplumb+jqueryUI)拖拽功能

    这个工具对于业务流程建模、工作流设计以及任何需要图形化表示流程的应用场景都非常有用。下面我们将详细讲解相关技术及其应用。 1. **jsPlumb**: jsPlumb是一个JavaScript库,主要用于在HTML元素之间创建视觉...

    workberch-tolopogy:由 Taverna Workbench 上的工作流文件创建的动态 Apache Storm 拓扑

    转换后的拓扑能够在 Storm 集群上运行,实现对工作流的实时执行。 5. **Java 开发**: 由于标签中提到了 Java,我们可以推断该项目是用 Java 实现的。Apache Storm 提供了丰富的 Java API,使得开发者能够方便地...

    软件工程专业框架,拓扑图

    这些课程包括嵌入式微处理器结构与应用、信息管理导论、统一建模语言、软件质量保证、软件项目管理、软件体系结构、工作流技术、ERP原理及设计、工程数据库、实时操作系统、数字系统设计、嵌入式软件技术、系统管理...

    多比矢量图控件

    电力、军工、煤炭、化工、科研、能源等各种监控软件、web工作流设计器、asp.net工作流设计器、电力、化工、煤炭、工控组态软件、仿真、地理信息系统、工作流、复杂报表 工业SCADA系统、ERP流程设计系统、图形管理、...

    jsPlumb 绘画拓扑图

    2. **流程图**:在业务流程模拟或工作流设计中,用于描绘各个步骤之间的关系。 3. **数据可视化**:将复杂的数据模型通过连线表示,便于理解和分析。 4. **UI设计**:在布局编辑器或原型设计工具中,用以构建组件...

    ht-for-web

    【ht-for-web】是一款专为前端开发者设计的框架,主要用于创建和管理拓扑图以及页面布局。这个框架的强大之处在于它的灵活性和可定制性,使得开发者可以轻松地构建出复杂且交互性强的可视化应用。 在拓扑图制作方面...

    twaver web实例源码

    通过学习这些源码,开发者可以深入了解这两个库如何协同工作,创建交互式和可视化的Web应用。这可能包括如何定义和渲染图形元素,处理用户交互,以及如何利用ExtJS的组件系统来构建应用程序的界面。 【标签】...

    上海交大Web挖掘课件

    Web结构挖掘关注的是网页之间的链接关系和网络拓扑结构。这涉及到爬虫技术、链接分析和图论。通过爬虫抓取大量网页,分析链接模式,可以揭示网站的影响力、权威性或发现隐藏的社区结构。PageRank算法就是一个典型的...

    在web页面画流程图V1.0

    - Web页面的可视化工具允许用户通过浏览器来展示复杂的数据结构,流程图是其中一种,可以清晰地展示任务流程或系统工作流。 2. **Flash技术**: - Flash是一种历史悠久的富互联网应用程序(RIA)平台,擅长于创建...

Global site tag (gtag.js) - Google Analytics