如何创建BPMN.io示例

Question

有人能引导我正确地开始这样一个例子吗？我习惯于开发ASP.NET项目，需要创建一个具有自定义属性的bpmn建模器。因此，我找到了BPMN.IO，https://bpmn.io/，它(我认为)可以为我提供这样一个建模者和使用自定义属性的机会。

有许多例子可以在网站上找到，但不知何故，我无法正确地开始其中之一。例如：https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel

我需要采取哪些步骤才能在VS2017中实现这一目标？我不熟悉在这个例子中看到的结构。

任何帮助都是非常感谢的。

Answer 1

1. 您必须开始在您的项目中使用node.js --一旦安装完毕，您将在项目中获得node_modules文件夹
2. 从bpmn.io下载属性面板示例。您将在node_modules中有4个额外的文件夹-- bpmn-字体、bpmn、bpmn properties-面板、bpmn-moddle。
3. 现在，作为项目的一部分，您应该有来自示例的其他文件夹-捆绑、css、modeler、属性面板和属性面板扩展。我将我的文件夹命名为"BPMN“(用于步骤4)
4. 编写browersify命令，将第3部分中的文件合并到BPMN_PropertiesPanel.js文件中。此脚本需要包含在您的页面中。我的是：

浏览器化BPMN/properties-面板-扩展名/app/index.js -t [ stringify - .bpmn ] -g [ babelify --预设"env“] -o ToolLibraries/BPMN/BPMN_PropertiesPanel.js

1. 要将app.less更改为app.css文件，也需要一个命令行。我的是：

BPMN/属性-面板-扩展/css/app.less BPMN/properties-面板-扩展/css/app.css

1. 若要添加自定义属性，请修改"MagicPropertiesProvider.js“
2. 若要在属性面板上添加自定义选项卡，请修改"SpellProps.js“。您的browserify命令将收集这些更改并将它们输出到脚本中。
3. 如果需要将图表存储在Server中，我建议使用varchar。一开始我使用XML，但我无法让它工作。也许你会比我更幸运。

PS --建模器仍然存在依赖浏览器的问题，它可以在IE中抛出js错误(Chrome，FF，似乎还可以)。尽管如此，这还是我能找到的最好的图表，而且输出XML也是正确的。