Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Vaadin 7 and ChemDoodle Web Components
Dear Vaadin Community,
I'm currently working on a Web Application with Vaadin 7.5.10 having the 2D Sketcher of ChemDoodle Web Components as a Client-side widget.
https://web.chemdoodle.com/demos/sketcher/
For this, I chose to employ the new way of integrating JavaScript Components as described by this blog post:
https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components
and this wiki entry:
https://vaadin.com/wiki/-/wiki/Main/Integrating+a+JavaScript+component
This means I have to create at least four source files, which currently look as follows:
UI:
package de.mosgrid.chemdoodlejs;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@SuppressWarnings("serial")
//@Theme("chemdoodlejs")
public class ChemdoodlejsUI extends UI {
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.addComponent(new Sketcher("Hello World"));
this.setContent(layout);
}
}
Server-side Component (ChemDoodle Resources are hot-linked):
package de.mosgrid.chemdoodlejs;
import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
@SuppressWarnings("serial")
@JavaScript({ "http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.js",
"http://hub.chemdoodle.com/cwc/latest/uis/ChemDoodleWeb-uis.js",
"sketcher.js"})
@StyleSheet({"http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.css",
"http://hub.chemdoodle.com/cwc/latest/uis/jquery-ui-1.10.3.custom.css"})
public class Sketcher extends com.vaadin.ui.AbstractJavaScriptComponent {
public Sketcher(final String xhtml) {
getState().xhtml = xhtml;
}
@Override
protected SketcherState getState() {
return (SketcherState) super.getState();
}
}
Shared State (Does not have any meaning yet)
package de.mosgrid.chemdoodlejs;
import com.vaadin.shared.ui.JavaScriptComponentState;
@SuppressWarnings("serial")
public class SketcherState extends JavaScriptComponentState {
// This is just for test purpose
public String xhtml;
}
Client and Connector:
de_mosgrid_chemdoodlejs_Sketcher = function() {
var e = this.getElement();
// This should create a valid Chemdoodle Sketcher
var sketcher = new ChemDoodle.SketcherCanvas("foobar", 400, 400, {useServices:false, oneMolecule:false});
sketcher.repaint();
this.onStateChange = function() {
//e.innerHTML = this.getState().xhtml;
sketcher.repaint();
}
}
If I run this application, I can see that Sketcher Canvas partially loaded, but apparently, the initialization
failed because the widget does not work as expected. The buttons do not fire an event and when I try to
draw a molecule on the Canvas, I get the JavaScript Error from ChemDoodle:
hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.js:52 Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'enable'
I also tried using the classical way of creating widgets with a widgetset, but this also results in
the same errors.
If I just include the widget within a HTML file like this ...
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="ChemDoodleWeb.css" type="text/css">
<link rel="stylesheet" href="uis/jquery-ui-1.10.3.custom.css" type="text/css">
<script type="text/javascript" src="ChemDoodleWeb.js"></script>
<script type="text/javascript" src="uis/ChemDoodleWeb-uis.js"></script>
</head>
<body>
<script type="text/javascript">
var sketcher = new ChemDoodle.SketcherCanvas("foo", 400, 400, {useServices:false, oneMolecule:true});
sketcher.repaint();
</script>
</body>
... everything works as expected.
Does anyone have an idea what might be the problem here? Perhaps the vaadinBootstrap.js interferes somehow.
ChemDoodle Web Components currently relies on the following libraries:
jQuery
jQuery mousewheel
glMatrix
jQuery UI
jQuery Simple Color
Please find the war file with sources of the corresponding Eclipse project attached.
Any help is highly appreciated.
Best wishes
Lukas
Try to look at browser console during application loading. There could be some failures.
Thanks for the reply. I inspected the error console of Chrome and Firefox (Firebug), but I have not noticed anything
peculiar. There are just errors when I try to interact with the canvas. I also tried Tomcat 6 and Tomcat 7, one
with Servlet 2.5 and the other one with version 3.0, but this did not make any difference.