JavaScript binding always fails

Vaadin 6 / 7 / 8
1

I have been following the instructions for JS integration at:

  2. https://vaadin.com/wiki/-/wiki/Main/Integrating+a+JavaScript+component+
  3. https://vaadin.com/book/vaadin7/-/page/gwt.javascript.html

And have come up against 2 major issues.


JavaScript script inclusion is buggy

These seems to be logged with Vaadin with no resolution? http://dev.vaadin.com/ticket/11743
That’s a year old, surprised it’s still broken?!

Current workaround is to use cdnjs for public libs.


Connector never gets found

Probably a related one. I have the connector set up in a dedicated .js file with the correct name:

com_example_js_Wrapper =
    function () {
        // stuff
    }

No matter where I put this file - next to the AbstractJavaScriptComponent file, various places within resources - it never gets picked up and I get the famailiar:

Could not initialize JavaScriptConnector because no JavaScript init function was found. Make sure one of these functions are defined:com_example_js_Wrapper
com_vaadin_ui_AbstractJavaScriptComponent
com_vaadin_ui_AbstractComponent
com_vaadin_server_AbstractClientConnector

I’m using 7.2.5 with mvn inside intellij. I wonder if there has to be some special mvn goal to put the js in the right place?

Any tips on how to get this to work? I’m not doing anything special, it’s all pretty vanilla.

2

So here’s the solution in case anyone is interested. I think the docs need to be a bit clearer, really.

  2. Inside the resources folder, you should have your .js libs (in the correct package tree)
  3. Create a dummy XXXWidgetSet.gwt.xml next to the files with nothing in it, except:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.4.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.4.0/distro-source/core/src/gwt-module.dtd">
<module />

Then in the main gwt.xml file put in an “inherits” tag

<module>
    <inherits name="com.vaadin.DefaultWidgetSet" />
    <inherits name="com.example.js.JSWidgetSet"/>
    ...

Right so now in your AbstractJavaScriptComponent file you should be able to put these in as described in the docs.

What is oddly missing from the docs is that you have to specify the js in the AbstractJavaScriptComponent annotion too. I don’t actually know if this is the right way, but it doesn’t work for me otherwise.

@JavaScript({"jquery-1.11.1.min.js",
        "arbor.js",
        "arbor-tween.js",
        "com_example_js_Wrapper.js"})

Anyway that all seems to do the trick!