Desde o ultimo domingo diversos acontecimentos atrapalharam a continuidade da exploração, como doença, queda de conectividade e outros contratempos.
Durante a semana consegui apenas aprender um pouco de grunt (https://player.oreilly.com/videos/9781785288265) e formatar o notebook.
Hoje voltei a analisar o exemplo modeler e threads de discussões interessantes:
How to extend bpmn-io with custom elements?
https://forum.bpmn.io/t/how-to-extend-bpmn-io-with-custom-elements/200/12
Create a custom element example #4
https://github.com/bpmn-io/bpmn-js-examples/issues/4
O plano agora é tentar criar um icone no palette de ações que inclua algum workflow pattern no modelo. Tendo isso é possível passar para o próximo passo que analisa o modelo atual e cria recomendações de elementos a serem adicionados.
segunda-feira, 31 de agosto de 2015
sábado, 22 de agosto de 2015
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:
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:
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
browserify:
Use a node-stylerequire()to organize your browser code and load modules installed by npm.
browserify will recursively analyze all therequire()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
sexta-feira, 21 de agosto de 2015
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 é 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
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.
quarta-feira, 19 de agosto de 2015
Quarta, 19 de Agosto de 2015 - Aportando em terras desconhecidas (Desbravando os fontes do projeto bpmn-js)
Estudei código fonte do bpmn-js.
Compilei os fontes através de um script (https://github.com/bpmn-io/bpmn-js/blob/master/docs/project/setup.sh) na pasta 'bpmn-io-test'.
As coisas ainda estão um pouco confusas sobre como utilizar e alterar os fontes para o trabalho. Então acabei olhando o projeto de exemplos (https://github.com/bpmn-io/bpmn-js-examples).
O projeto é um conjunto de exemplos separados em pastas, na pasta modeler é possível seguir o README e rodar um editor de BPMN 2.0 bastante completo e com boa usabilidade.
Depois na pasta bpmn.io segui o passo a passo descrito em: https://github.com/bpmn-io/bpmn-js/blob/master/CONTRIBUTING.md
Onde explica como construir o projeto localmente para quem deseja colaborar com o projeto.
Para próximo dia pretendo rodar exemplos mais simples para começar a entender como cada projeto e modulo se relacionam entre si.
TODO:
1- Projetos de exemplo
Compilei os fontes através de um script (https://github.com/bpmn-io/bpmn-js/blob/master/docs/project/setup.sh) na pasta 'bpmn-io-test'.
As coisas ainda estão um pouco confusas sobre como utilizar e alterar os fontes para o trabalho. Então acabei olhando o projeto de exemplos (https://github.com/bpmn-io/bpmn-js-examples).
O projeto é um conjunto de exemplos separados em pastas, na pasta modeler é possível seguir o README e rodar um editor de BPMN 2.0 bastante completo e com boa usabilidade.
Depois na pasta bpmn.io segui o passo a passo descrito em: https://github.com/bpmn-io/bpmn-js/blob/master/CONTRIBUTING.md
Onde explica como construir o projeto localmente para quem deseja colaborar com o projeto.
mkdir bpmn.io
cd bpmn.io
git clone git@github.com:bpmn-io/diagram-js.git
(cd diagram-js && npm i)
git clone git@github.com:bpmn-io/bpmn-js.git
(cd bpmn-js && npm install && npm link ../diagram-js)
// Run the test suite
grunt
// Running the test suite with every file change
TEST_BROWSERS=(Chrome|Firefox|IE) grunt auto-testPara próximo dia pretendo rodar exemplos mais simples para começar a entender como cada projeto e modulo se relacionam entre si.
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.
Assinar:
Postagens (Atom)