Starting javascript in HTML


I´m currently trying to show a HTML Page in my Vaadin Application.
I extended the Application class and overwrote the init method like this:

public void init() {
Window mainWindow = new Window(“Webtest Application”);

            Panel panel = new Panel("Test");
            CustomLayout custom;
            try {
                WebApplicationContext context = (WebApplicationContext)getContext();
                File webinfFolder = new File ( context.getHttpSession().getServletContext().getRealPath("/WEB-INF") );

                File f = new File(webinfFolder + "/glyphsmallmultiple/index.html");
                custom = new CustomLayout(new FileInputStream(f));
            } catch (IOException ex) { }


The index.html File looks like this:

D3 Test

Test Area


When I start the Appliction I can see the Button and the Text “Test Area”, but the javascript won´t load.
The data.js File is in the same Folder as the index.html File.

If I copy the index.html and all the js Files directly into my Tomcat Server and load the index.html with Crome it actually shows the Javascript, so it should work.

Can someome tell me where my mistake is?

Probably it cannot resolve the relative URLs of the Javascript-files. Check with Firebug’s network-view if you are getting a 404 for those files. Other way to check it would be to define the scripts inline by placing the actual code inside a script-tag instead of loading separate files for it.


The J2EE spec prevents web-app containers (such as Tomcat) from serving resources directly from beneath the WEB-INF directory.
Try placing your HTML & JS files in the root of the webapp (i.e. move glyphsmallmultiple “up” a directory).

I’d also suggest that contenating a file object and a string might not be the best way to build the path to the file : try using File(File, String) constructor - e.g.

WebApplicationContext context = (WebApplicationContext)getContext();
String webRoot = request.getSession().getServletContext().getRealPath("/");
File f = new File(webRoot, "/glyphsmallmultiple/index.html");

custom = new CustomLayout(new FileInputStream(f));




Thank you for your answers.
I moved all the files of glyphsmallmultiple one directory up (“WebTest/Web Pages/glyphsmallmultiple”) and also changed the way to make the path like this (I have no “request” variable so I changed it a little):

WebApplicationContext context = (WebApplicationContext)getContext();
String webRoot = context.getHttpSession().getServletContext().getRealPath("/");
File f = new File(webRoot + "\\glyphsmallmultiple\\index.html");
custom = new CustomLayout(new FileInputStream(f));

Sadly it still does not show the Javascript content (only the button and the text of the index.html file) -.-

I also installed FireBug but I was not able to find the path that´s used for the data.js.
Searching for “java.js” or “index.html” in FireBug actually doesn´t find anything at all.

I also tried to insert a fix path to the data.js file into the index.html (“C:\Users\…\build\web\glysmallmultiple\data.js”) but it didn´t work either.
Are there any other ideas where the problem could be?

I also have anther Question: The javascript contains a Method which is called by userinput.
Whenever this Method is started I have to start another Method in my Serverside Java App and I also have to give back an integer from the js to the application.
Is this possible if I include the javascript with a customLayout like I try to do?


See this topic for injecting javascript: