Sexta 21 de Agosto de 2015 - Primeiros passos com bpmn-js (simple-bower)

Ontem quinta-feira dia 20 tive muita dor de cabeça e acabei não estudando.

Hoje retomei os estudos a partir do exemplo simple-bower que mostra como importar bpmn-js para um projeto web usando bower.

Bower (http://bower.io/) é um package manager.

"Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json."

Bower é utilizado apenas para instalar a dependencia de bpmn-js localmente.

O projeto em si consiste em dois arquivos. O primeiro arquivo é um javascript (app.js) que define uma variavel BpmnViewer a partir de window.BpmnJS que também requer uma variavel viwer que recebe new BpmnViewer({container: '#canvas'})

Um script XMLHttpRequest(XHR) onreadystatechange chama viewer.get('canvas').zoom('fit-viewport') para redimensionar o viewer do tamanho da janela do browser (viewport).

Outro XHR faz um GET em um arquivo bpmn armazenado dentro do projeto. Trocar o arquivo por xpdl retornou uma visualização em branco e no log do servidor retornou File not found.

O segundo arquivo é um html que possui uma div com id #canvas e importa dois scripts em seu corpo.

O componente de visualização:
<script src="../bower_components/bpmn-js/dist/bpmn-viewer.js"></script>

E o javascript da aplicação:
<script src="./app.js"></script>

Substituir o componente bpmn-viewer.js por bpmn-modeler.js é suficiente para conseguir selecionar, redimensionar e renomear os componentes do processo, mas a visualização fica um pouco estranha e não aparecem componentes para serem adicionados ao modelo. Provavelmente são necessárias outras váriaveis dentro do app.js para que se possa ter um editor completo e elas ainda são desconhecidas para mim. Após reiniciar o servidor o modelo de processo segue inalterado em seu arquivo.

TODO:
1- Projetos de exemplo

• simple-bower - an example showcasing how pull bpmn-js via bower and include it into your application.
• simple-commonjs - an example showcasing how to load bpmn-js via npm in a node-style application and package it and the application code for the browser with browserify. 

2- Estudar Node e Grunt