Sábado 22 de Agosto de 2015 - Avançando cuidadosamente - Começando com exemplos intermediarios

Retomando estudos com exemplo "simple-commonjs" que mostra como integrar bpmn-js em uma aplicação node. Importa bpmn-js via npm e empacota na aplicação usando browserify.

browserify:

Use a node-style require() to organize your browser code and load modules installed by npm.
browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single <script> tag.

A principal diferença do exemplo anterior (usando bower) é que na página html é incluido apenas app.js. E no proprio app.js a variavel BpmnViewer é instanciada usando require('bpmn-js') e a importação do modelo bpmn não é feita via XHR pois o arquivo ja foi lido usando fs + brfs:

// we use fs + brfs to inline an example XML document.
// exclude fs in package.json#browser + use the brfs transform
// to generate a clean browserified bundle
var fs = require('fs');
// inlined in result file via brfs
var pizzaDiagram = fs.readFileSync(__dirname + '/../resources/pizza-collaboration.bpmn', 'utf-8');


Além disso o projeto usa Grunt (JavaScript Task Runner) para automatizar build. No grunt é configurado build com browserify e tambem task para levantar servidor (grunt auto-build).

Esse projeto de exemplo não trouxe muita novidade. O projeto seguinte dentro da lista do readme de exemplos (https://github.com/bpmn-io/bpmn-js-examples) é "overlays".

Básicamente o que o exemplo mostra é como criar overlays (camadas como por exemplo uma nota com momentarios sobre o canvas). Semelhante a como se importa o canvas, instanciamos uma variavel overlay chamando metodo get em cima do bpmnViewer:

// retrieve services and work with them 

bpmnViewer.get('overlays').add(...); 

E depois adiciona-se o elemento passando seu id (id do arquivo/modelo bpmn) e um descritor

que deve conter um elemento html assim como uma posição: 

// attach an overlay to a node
  overlays.add('SCAN_OK', 'note', {
    position: {
      bottom: 0,
      right: 0
    },
    html: '<div class="diagram-note">Mixed up the labels?</div>'
  }); 

O exemplo seguinte estudado foi "url-viewer" que permite importar um arquivo bpmn e o exibir na página.

Para conseguir executar esse exemplo foi necessário analisar o arquivo bower.js para descobrir quais as dependencias eram necessárias instalar via bower install.

Nesse caso toda aplicação esta dentro do index.html como javascript inline e não tras muita novidades além de uma maneira simples de carregar o modelo através de um input de caminho para o arquivo bpmn.

Antes de ver o exemplo que contempla um editor mais completo, passei rapidamente pelos outros e dois chamaram a atenção e podem ser úteis no futuro:

Interaction: mostra como logar ou tratar cada uma das interações com o modelo de processo de negócio, por exemplo mouse hoover e cliques.
https://github.com/bpmn-io/bpmn-js-examples/tree/master/interaction

custom-bower-bundles: mostra como criar seus proprios pacotes bower customizados
https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-bower-bundle