Javascript component not working?

Hello,

I am looking for a way to intergrate a bpmn workflow tool with Vaadin 8.

Usecase:
My usecase is to create a workflow module that converts status-to-status data to a .bpmn file and show this file in a diagram on a webpage that runs on Vaadin 8. For visualization I’ve attached a example .bpmn file. At the moment I am able to convert the status-to-status data to a .bpmn file and save it to my local machine using [Camunda bpmn model API]
(https://docs.camunda.org/manual/7.7/user-guide/model-api/bpmn-model-api/).

For the rendering part I am using [bpmn.io]
(https://bpmn.io/). bpmn.io is simple javascript library for rendering and modeling .bpmn files. So now I want to use Javascript with Vaadin 8 to render my own .bpmn file using this library. As start I’ve tried to use a part of the javascript from [bpmn-js-examples]
(https://github.com/bpmn-io/bpmn-js-examples/blob/master/starter/viewer.html) that bpmn.io is revering to:

var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn'; //this will be my own .bpmn file
var bpmnViewer = new BpmnJS({
  container: '#canvas'
});

function openDiagram(bpmnXML) {
  bpmnViewer.importXML(bpmnXML, function (err) {

    if (err) {
      return console.error('could not import BPMN 2.0 diagram', err);
    }
    var canvas = bpmnViewer.get('canvas');
    canvas.zoom('fit-viewport');
  });
}

$.get(diagramUrl, openDiagram, 'text');

For rendering in Vaadin 8 I am calling the ‘raw’ javascript using JavaScript.getCurrent().execute("the above code"); that I found on this [page]
(https://vaadin.com/docs/v8/framework/advanced/advanced-javascript.html). This works like a charm. But I find it a little messy, because now the script is one big string. Also I like to change the variable diagramUrl to my own everytime I’ve created a new .bpmn file.

So I looked futher in the Vaadin docs and found [javascript components]
(https://vaadin.com/docs/v8/framework/gwt/gwt-javascript.html#gwt.javascript.rpc). And I tried to implement this with a example given in a [other discussion]
(https://vaadin.com/forum/thread/10556663/how-to-include-simple-javascript-in-vaadin). But I think that I am missing something. Because it not working.

My code:

I have a javascript file named bpmn.js in a VAADIN\themes\mytheme\js directory that contains the following code.

window.com_vaadin_BPMNComponent = function() {
  alert("I am in the function!");
  var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn'; //this will be my own .bpmn file
  var bpmnViewer = new BpmnJS({
    container: '#canvas'
  });

  this.getDiagram = function() {
    function openDiagram(bpmnXML) {
      bpmnViewer.importXML(bpmnXML, function (err) {

        if (err) {
          return console.error('could not import BPMN 2.0 diagram', err);
        }
        var canvas = bpmnViewer.get('canvas');
        canvas.zoom('fit-viewport');
      });
    }

    $.get(diagramUrl, openDiagram, 'text');
  }
};

Next I have my javascript component with the goal to call the getDiagram function from bpmn.js

package com.vaadin;

import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({"vaadin://js/bpmn.js"})
public class BPMNComponent extends AbstractJavaScriptComponent {
    public void getDiagram() {
        callFunction("getDiagram");
    }
}

Lastly I initialize the class BPMNComponent in the default MyUI class

@Theme("mytheme")
@JavaScript({"https://unpkg.com/bpmn-js@6.3.1/dist/bpmn-navigated-viewer.development.js", "https://unpkg.com/jquery@3.3.1/dist/jquery.js"}) //required libraries for bpmn.io
public class MyUI extends UI {
...
BPMNComponent bpmnComponent = new BPMNComponent();
bpmnComponent.getDiagram(); //call javascript function here plz
...
}

Now when I run this nothing happens, I don’t get any errors in the chrome console or in my IDE. Also I am not sure if I am understanding the Javascript components correctly.

By the way if there is any better solution to solve this problem in a different way than stated above. Feel free to advice me.

18132486.bpmn (4.67 KB)

Hi, two things

To show it you need a container with id equal to “canvas” it could be verticalLayout.setId (“canvas”)

Possibly the file load may fail, use XMLHttpRequest instead of Ajax to load the file.
I think the context of the $ operator for vaadin is not the same as a simple js application, but can work is a theory

Johny Ortega:
Hi, two things

To show it you need a container with id equal to “canvas” it could be verticalLayout.setId (“canvas”)

Possibly the file load may fail, use XMLHttpRequest instead of Ajax to load the file.
I think the context of the $ operator for vaadin is not the same as a simple js application, but can work is a theory

@johny Ortega Thank you for your reply I will check it out. Just to be sure is this the way using the AbstractJavaScriptComponent in Vaadin? If there is a better way please advice me. A code example would be great.

That’s fine for things that are intrinsically interactive, like a custom form element (), but it’s not fine for your nav bar. Or consider a simple element that encapsulates all the logic for constructing a Twitter web intent URL [mcdvoice.com]
(https://www.mcdvoice.cool)