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

ChemDoodleJS.war (11.4 MB)

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Vaadin 7 and ChemDoodle Web Components

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.