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:
[code]
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);
}
}
[/code]Server-side Component (ChemDoodle Resources are hot-linked):
[code]
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();
}
}
[/code]Shared State (Does not have any meaning yet)
[code]
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;
}
[/code]Client and Connector:
[code]
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();
}
}
[/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:
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 …
[code]
[/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
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
22530.war (10.9 MB)