Vaadin 7 - include Javascript Library

Hello,

im trying to include a Javascript Library to my Vaadin 7 Project. Can anyone please tell me how to actually do it? I found some examples for previous Vaadin Versions but they don’t seem to work for Vaadin 7.

I also tried it by using Root.ExecuteJavaScript() but its not working too:

public class MyApplicationRoot extends Root {


    protected void init(WrappedRequest request) {
    	String script = "try{var fileref=document.createElement('script');";
        script += "fileref.setAttribute(\"type\",\"text/javascript\");";
        script += "fileref.setAttribute(\"src\", \"" + "jsplump.js" + "\");";
        script += "document.getElementsByTagName(\"head\")[0]
.appendChild(fileref);}catch(e){alert(e);}";
        executeJavaScript(script);
                 
        
    }
}

any help is greatly appreciated

New API for loading external javascript files is planned for an upcoming alpha release of Vaadin 7, but it has not yet been properly implemented. And as you have observed, the old hack for adding additional script tags to the HTML page does not work any more.

Though I haven’t tested your example code using executeJavascript, I’d guess that it in theory works but the problem is that the javascript is loaded to late.

Vaadin 7 alpha3 that should be released in a couple of days adds a temporary way of including script tags in the generated html page, thus ensuring they are loaded before any client-side Vaadin code is loaded. This is done by adding a @LoadScripts annotation to your Root class. The feature is available in recent nightly builds of Vaadin 7. Please note that @LoadScripts is just a workaround that we have added to be able to test various new javascript features, it is planned to be replaced with something more robust before the final version of Vaadin 7.0.0 is released.

What I’ve found to work is :

I created a simple method which just creates the script tag in the header.


    private void addJavascripts(boolean async, String... locations) {
        if (locations.length > 0) {
            for (String location : locations) {
                StringBuilder scriptString = new StringBuilder();
                scriptString.append("var script = document.createElement('script');");
                scriptString.append("script.type = 'text/javascript';");
                scriptString.append(String.format("script.src='%s';", location));
                scriptString.append(String.format("%s;", async ? "script.setAttribute('async', '');" : ""));
                scriptString.append("document.getElementsByTagName('head')[0]
.appendChild(script);");
                synchronized (scriptString) {
                    executeJavaScript(scriptString.toString());
                }
                scriptString = null;
            }
        }
    }

In your Layout in the createComponents method :
I call the mehod


        WebApplicationContext webApplicationContext = (WebApplicationContext) MainNavigator.getCurrent().getContext();
        String contextPath = webApplicationContext.getHttpSession().getServletContext().getContextPath();
        addJavascripts(false, String.format("%s/VAADIN/facebookAnalytics.js", contextPath));
        addJavascripts(true, "//code.jquery.com/jquery-1.6.4.min.js");

As you can see I put the js in a js folder in the WEB-INF/VAADIN folder as this folder MUST be visible to include any styles.

Using executeJavascript for dynamically injecting scripts has the drawback that the external JavaScript file will not be loaded and evaluated until after all the components have been rendered. This means that any client-side code that depends on the library must defer doing anything until the library is eventually loaded.

Vaadin 7.0.0 alpha3 that was released last Friday does contain newly implemented @JavaScript and @StyleSheet annotations that ensures the external files are loaded before the corresponding client-side component is initialized. The annotations also make it easier to package the files together with a server-side component, e.g. for inclusion in an add-on package. This is the upcoming feature that I wrote about in my previous post - we realized it was so easy to implement that we chose to implement it for alpha3 even though it was originally planned for a later release.

See
this mini tutorial
for more information.

how can I use it with JavaScript?

my problem is: i have to call a function of JS library from Vaadin application.

how could it be possible ?
thanks


vaadin 7
hi, i’m actually doing a vaadin+javascript(jquery) integration, and using the “Using JavaScript” I got it easily !

thanks…

The first thing that is wrong is that you’re using lots of deprecated API (LegacyWindow and executeJavaScript), though I don’t see anything that should break from that usage.

I’m too lazy to try to run your code, but I suspect you’ll get at least one step closer to finding the cause of the problem by investigating the stack trace of the RuntimeException to see what part of your code it is that causes the exception.

thank you very mutch…
the problem is solved, THE problem :slight_smile:

have anybody tried to write something with Vaadin 7 for Touchkit,
I try to create the project, but now I see that Vaadin 6.8 uses Application class and Vaadin 7 Root…

could anybody give me an idea how could it possibly to get it around

thanks…

TouchKit has not yet been ported to work with Vaadin 7, though work on that front is currently underway.

You can still use Application with Vaadin 7 if you want to, though it’s generally not the recommended approach and it won’t help you with getting current versions of TouchKit to work with Vaadin 7.

You have to add the Jquery script to the same folder of your class and then add this line on top:
@JavaScript ({ “jquery-1.10.2.js”, “jquery-ui.js”})
public class myUI extends UI{

}

This works for example on your UI class. This will addthe jquery scripts to all your pages you will create in vaadin.

If you mean the JQuery UI css stylesheet i did it like this:

  1. rename to jquery-ui.scss
  2. put into your theme folder where the vaadin scss files are
  3. in jquery-ui.scss wrap this around the original css content: @mixin jqueryui{ original content }
  4. in styles.scss add @import “jquery-ui.scss”; to the top and then @include jqueryui; in the .themename{} brackets
  5. compile your themes/widgetsets and it should be there.

That might be the long way but it works.

Thank you it works for me!!!