首先抱怨一下,GoJS BPMN扩展中有两个图标和标题是一样的,我看了又看还是分不清. ActivitiGoJS BPMNStartEventsStart Event Start Timer Event Start Signal Event Start Message Event Start Error Event ActivitiesAll Activiti activities support compensation optionAll GoJS BPMN activities support "Add Email Event", "Add TimerEvent", "Add Escalation Event" and "Add Error Event" options.User Task Service Task Looping Service TaskScript Task Business Rule Task Receive Task Manual Task Mail Task Camel Task Mule Task Generic TaskStructuralSub Process Event Sub Process Call Activity GatewaysExclusive Gateway Parallel Gateway Inclusive Gateway Event Gateway BoundaryEventsBoundary Error Event Boundary Timer Event Boundary Signal Event Boundary Message Event Intermediate Catching EventsIntermediate Timer Catching Event Intermediate Signal Catching Event Intermediate Message Catching Event Intermediate Throwing EventsIntermediate None Throwing Events Intermediate Signal Throwing Events EndEventsEnd Event End Error Event ?

GoJS BPMN样例中可以存储BPMN模型，它采用的存储媒体是浏览器的本地存储。Web Storage(W3C WebApps Working Group)中定义了如下的Storage接口： interface Storage { readonly attribute unsigned long length; DOMString key(unsigned long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear(); }; GoJS BPMN样例采用的方法如下： function checkLocalStorage() { return (typeof (Storage) !== "undefined") && (window.localStorage !== undefined); } window.localStorage.setItem(key, value) window.localStorage.getItem(key) window.localStorage.removeItem(key) 我的测试是存储一个名为yqu_GoJSBPMN_Samp1的模型。 如果想清除我的小测试所用的本地存储，可以通过chrome://settings/cookies#cont页面来完成： 参考 MDN：DOM Storage guide DOM Storage

准备工作 登录一台Linux服务器，并完成下列工作： 在目录/home/mryqu/创建子目录out，在out目录下创建子目录ssl和curl； 从OpenSSL项目下载openssl-1.0.2.tar.gz，并解压； 从curl项目下载curl-7.40.0.tar.gz，并解压 编译OpenSSL 进入openssl-1.0.2目录; 完成OpenSSL配置，仅支持静态库不支持动态库： ./config no-shared --openssldir=/home/mryqu/out/ssl 对Makefile文件中的FGLAG和DEPFLAG变量进行修改，增加-fPIC。 编译： make depend make make install 编译产生如下内容： 编译libCurl 进入curl-7.40.0目录; 首先设定pkg-config路径，指定为上一步OpenSSL编译结果。由于我们的OpenSSL编译结果不在编译器/链接器默认搜索路径，通过pkg-config路径和–with-ssl让libCurl查找到OpenSSL。通过–without-zlib禁止掉即时解压缩。 export PKG_CONFIG_PATH=/home/mryqu/out/ssl/lib/pkgconfig ./configure --prefix=/home/mryqu/out/curl --with-ssl --without-zlib make make install 编译产生如下内容： 参考 OpenSSL Compilation and Installation how to install curl and libcurl OpenSSL Cookbook Everything curl

OpenUI5的Grid机制位于sap.ui.layout库内，它在12列流布局中定位子控件位置。取决于当前屏幕尺寸，子控件可以指定可变的列数，从而实现响应式设计。 在上图示例中，无论屏幕大小，子控件1都占满12列，从而其他子控件无法跟它位于同一行内。 在大屏幕和中等屏幕尺寸下，子控件2和3共同占满12列，可以置于一行内；而在小屏幕尺寸下，二者需要列数超过12，只能分置于两行了。 参考 Responsive Web Design UI5 features for building responsive Fiori apps jsDoc: sap.ui.layout.GridData MDN: CSS Grid Layout MDN: Using CSS multi-column layouts

昨天跟同事说Activiti Modeler中的sid比GoJS中的元素ID讲究，估计是由时戳和随机数混合生成的。 今天看了一下，发现原来就是一个纯随机数。 [tomcat]\webapps\activiti-explorer\editor-app\editor.html里对类为stencil-item的HTML元素设置的拖拽处理函数在[tomcat]\webapps\activiti-explorer\editor-app\stencil-controller.js中定义。 sid生成方法在[tomcat]\webapps\activiti-explorer\editor-app\editor\oryx.debug.js中定义。 ORYX.Editor.provideId = function() { var res=[], hex='0123456789ABCDEF'; for(var i=0; i<36; i ) res[i]=Math.floor(Math.random()*0x10); res[14]=4; res[19]=(res[19] & 0x3) | 0x8; for(var i=0; i<36; i ) res[i] = hex[res[i]]; res[8] = res[13] = res[18] = res[23] = '-'; return "sid-" res.join(''); }; 当然，GoJSBPMN样例中的ID就更简单的不得了，全都是预定义的简单数字。例如，userTask的key预定义为7，当一个BPMN元素加入GoJSmodel时，GoJS会让model中的key变成唯一的（代码混淆过，我猜估计没混淆前叫makeUniqueKeyFunction）。在我的小测试中，第一个userTask的key仍然为7，第二个userTask的key被改成了-3。 感觉要是借鉴MongoDB的ObjectId生成机制，ID的冲撞概率可能会更低。

熬粥时，一开始创建一个跟editor-app平行的独立目录gojs-editor-app，结果我的Chrome浏览器报“Resourceinterpreted as stylesheet but transferred with MIME typetext/html”错误，GoJS的所有Javascript和stylesheet文件(例如BPMN.js和BPMN.css)都被加了料从Tomcat发给浏览器变成了html格式。 看了下面两个帖子，没有丝毫头绪： http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-tex thttp://stackoverflow.com/questions/22631158/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-see 搜了一下ActivitiExplorer的配置，看到org.activiti.explorer.filter.ExplorerFilter里有六个路径("/ui"、"/VAADIN"、"/modeler.html"、"/editor-app"、"/service"、"/diagram-viewer")走了特殊的过滤器。只好将GoJS的内容都转到Activiti已有的editor-app目录，这下齐活了。

我在Activiti中建立一个简单的仅有startEvent、userTask和endEvent的BPMN模型，导出的process.bpmn.xml内容如下： 前一博文玩玩GoJS BPMN样例中我给出了类似 BPMN模型的JSON数据。通过分析可知，除了两者的ID生成机制不同（GoJSBPMN生成的ID太简单，很容易重复），完全可以通过GoJS的JSON数据构造上面的process.bpmn.xml文件内容。 试了一下在Javascript中生成上面的process.bpmn.xml文档，大致可行。从MDN查到的资料可知，仅支持IE9+浏览器。不支持低版本IE浏览器，估计现在不算什么问题。目前生成的XML文档有些瑕疵，第一个使用createElement_x方法创建的节点会自动添加命名空间xmlns=http://www.w3.org/1999/xhtml，但是应该可以避免。 |Chrome|Firefox (Gecko)|Internet Explorer|Opera|Safari |—– |(Yes)|1.0 (1.7 or earlier)|9.0|(Yes)|(Yes) JS代码如下：

玩一玩GoJS，GoJS是Northwoods Software的产品。Northwoods Software创立于1995年，专注于交互图控件和类库。旗下四款产品： GoJS：用于在HTML上创建交互图的纯javaSCript库，GoJS支持复杂的模板定义和数据绑定。 GoDiagram：用于WinForms的.NET图控件。 GoXam：用于WPF/Silverlight的图控件。 JGo：用于Swing/SWT中创建交互图的java库。 试了一下GoJS的BPMN样例，很容易导出SVG或PNG/JPEG等格式的图像数据。其中： 由于GoJS是经过代码混淆的，不能对makeSVG方法进行确定的分析，大概是采用HTMLCanvasElement.getContext(‘2d’).drawImage(…).getImageData(…)获得的 makeImage和makeImageData方法通过HTMLCanvasElement.toDataURL()方法实现的 在控制台执行window.myDiagram.model.toJson()，返回如下结果： { "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ { "category": "activity", "item": "User task", "key": 7, "loc": "388.33645784919577 140.35229369949943", "text": "User Task", "taskType": 2, "boundaryEventArray": [ ], "size": "120 80" }, { "category": "event", "item": "End", "key": 104, "loc": "569.86545617508 140.90913111767696", "text": "End", "eventType": 1, "eventDimension": 8 }, { "category": "event", "item": "start", "key": 101, "loc": "183.42028795985397 135.34075693590137", "text": "Start", "eventType": 1, "eventDimension": 1 } ], "linkDataArray": [ { "from": 101, "to": 7, "fromPort": "", "toPort": "", "points": [ 204.

start-hbase.sh hbase-daemons.sh start zookeeper zookeepers.sh --hosts /usr/local/hbase/conf/regionservers--config /usr/local/hbase/conf cd /usr/local/hbase;/usr/local/hbase/bin/hbase-daemon.sh --config /usr/local/hbase/confstart zookeeper 检查配置HBASE_MANAGES_ZK，若不为true则终止处理。 ssh node51054 cd /usr/local/hbase;/usr/local/hbase/bin/hbase-daemon.sh --config /usr/local/hbase/confstart zookeeper hbase zookeeper start java org.apache.hadoop.hbase.zookeeper.HQuorumPeer

Activiti Model Editor组件 我的了解Activiti Explorer及其Vaadin实现方式博文里提到ActivitiExplorer使用的是Vaadin架构，但是Activiti 模型编辑器组件却没用使用Vaadin架构，而是采用Angular.JS的MVC模式。Activiti模型编辑器组件的客户端代码位于Activiti\modules\activiti-webapp-explorer2\src\main\webapp\editor-app\。 该目录下的editor.html是Activiti Modeler Editor的主界面HTML代码 其中palette区是通过Angular.JS使用stencilsets\bpmn2.0\icons下多个子目录内的PNG图像形成的多组列表。其节点层次关系获取相关代码为： stencil-controller.js Activiti\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\main\StencilsetRestResource.java Activiti\modules\activiti-webapp-explorer2\src\main\resources\stencilset.json editor.html中的视图与两个控制器进行了绑定: stencil-controller.js：处理对canvas中BPMN元素的操作，很多处理是通过editor目录下的QRYX库完成的 toolbar-controller.js：处理对工具栏的操作，很多处理由configuration\toolbar-default-actions.js完成 保存模型操作 保存模型操作，是通过toolbar-default-actions.js中的SaveModel方法完成的，它需要将三部分信息传给服务器： 模型的元数据：例如模型名称、分类、创建时间、最后一次更新时间等等 模型JSON数据：将canvas内的图像数据转换成JSON数据UTF8字符串 { "resourceId": 53, "properties": { "process_id": "process", "name": "", "documentation": "", "process_author": "", "process_version": "", "process_namespace": "http://www.activiti.org/processdef", "executionlisteners": "", "eventlisteners": "" }, "stencil": { "id": "BPMNDiagram" }, "childShapes": [ { "resourceId": "sid-4F7484B9-11EC-4FCE-8950-FEFFB723D88B", "properties": { "overrideid": "", "name": "", "documentation": "", "executionlisteners": "", "initiator": "", "formkeydefinition": "", "formproperties": "" }, "stencil": { "id": "StartNoneEvent" }, "childShapes": [], "outgoing": [ { "resourceId": "sid-B589A0D9-FA79-4C12-95B7-253E72480384" } ], "bounds": { "lowerRight": { "x": 259, "y": 139 }, "upperLeft": { "x": 229, "y": 109 } }, "dockers": [] }, { "resourceId": "sid-1A762474-62B9-4F3D-A81C-1ADD46AF7D2F", "properties": { "overrideid": "", "name": "", "documentation": "", "asynchronousdefinition": "false", "exclusivedefinition": "false", "executionlisteners": "", "multiinstance_type": "None", "multiinstance_cardinality": "", "multiinstance_collection": "", "multiinstance_variable": "", "multiinstance_condition": "", "isforcompensation": "false", "usertaskassignment": "", "formkeydefinition": "", "duedatedefinition": "", "prioritydefinition": "", "formproperties": "", "tasklisteners": "" }, "stencil": { "id": "UserTask" }, "childShapes": [], "outgoing": [ { "resourceId": "sid-4134C10E-B589-42FF-AACC-463D35D52016" } ], "bounds": { "lowerRight": { "x": 746, "y": 172 }, "upperLeft": { "x": 646, "y": 92 } }, "dockers": [] }, { "resourceId": "sid-B22A5CAB-94D0-419E-BB1E-E8538C6A7283", "properties": { "overrideid": "", "name": "", "documentation": "", "executionlisteners": "" }, "stencil": { "id": "EndNoneEvent" }, "childShapes": [], "outgoing": [], "bounds": { "lowerRight": { "x": 1089, "y": 138 }, "upperLeft": { "x": 1061, "y": 110 } }, "dockers": [] }, { "resourceId": "sid-B589A0D9-FA79-4C12-95B7-253E72480384", "properties": { "overrideid": "", "name": "", "documentation": "", "conditionsequenceflow": "", "executionlisteners": "", "defaultflow": "false" }, "stencil": { "id": "SequenceFlow" }, "childShapes": [], "outgoing": [ { "resourceId": "sid-1A762474-62B9-4F3D-A81C-1ADD46AF7D2F" } ], "bounds": { "lowerRight": { "x": 645.