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.

For this, I chose to employ the new way of integrating JavaScript Components as described by this blog post:

and this wiki entry:

This means I have to create at least four source files, which currently look as follows:


package de.mosgrid.chemdoodlejs;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class ChemdoodlejsUI extends UI {

protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.addComponent(new Sketcher("Hello World"));

[/code]Server-side Component (ChemDoodle Resources are hot-linked):

package de.mosgrid.chemdoodlejs;

import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;

@JavaScript({ “”,”,
public class Sketcher extends com.vaadin.ui.AbstractJavaScriptComponent {

public Sketcher(final String xhtml) {
    getState().xhtml = xhtml;

protected SketcherState getState() {
    return (SketcherState) super.getState();

[/code]Shared State (Does not have any meaning yet)

package de.mosgrid.chemdoodlejs;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class SketcherState extends JavaScriptComponentState {

// This is just for test purpose
public String xhtml;

[/code]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});

this.onStateChange = function() {
    //e.innerHTML = this.getState().xhtml;

[/code]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: 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 …


[/code]... 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 mousewheel
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

22530.war (10.9 MB)

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.