Best way to integrate 3rd party HTML5/JS applications?

General
1

HI,

For evaluation purposes I put my eye on the graph library GoJS from Go Diagram.

Its a JavaScript/HTML5/Canvas library.

What would be the best way to integrate the functionalities with Vaadin?

Thanks!

2

Check out
this blog post
 by Tapio Aali. It goes through how to integrate JavaScript components inside Vaadin applications and control them from the server side code. There is also a example project linked in the post.

Unfortunatelly the up and running example doesn’t seem to work currently.

3

Thanks for the quick reply. That tutorial helped a lot.

My issue now is that GoDiagram requires a div id handed over. In the tutorial a domid is handed over and as a result a Canvas is created with that id:

<canvas id="foo"></canvas>

In the JavaScript connector when I hand the domId in it points to a Canvas.

	var diagram = new go.Diagram(domId);

Any idea how I could create a div and hand over that id?

Thanks!

4

ignore my last comment … figured out the issue

5

I changed the tutorial code i the JS to following:


var canvasElement = document.createElement('div');
	canvasElement.setAttribute('id', domId);
	this.getElement().appendChild(canvasElement);

	
	var diagram = new go.Diagram(domId);
	diagram.add(go.GraphObject.make(go.Node, go.GraphObject.make(go.Shape, {
		figure : "Triangle",
		fill : "green"
	})));

The issue now is that godiagram needs a div element which is generated at the beginning. However, the div element is only available (according to the JS debugger) once I add the component to the parent component:


	GoDiagram godia = new GoDiagram("test");
	godia.setWidth("100%");
	godia.setHeight("100%");
	addComponent(godia);

GoDiagram gives me following error message:


message: "Invalid DIV id; could not get element with id: test"

What options do I have to generate the div element before ?