Custom layout and the correct link href path

I am using the CustomLayout and have added an index.html to the vaadin/themes/mytheme/layouts directory.

Inside the index.html I want to access a javascript file that is also in the same directory.

I have tried the code below in index.html file but the javascript file is not found I try to execute javascript code;


Can anybody let me know what the correct href path should be?

Based on the path for images (in my website) I suggest:

[u] [i] TO UPDATE [/i] [/u]

my image path in html:

hope this helps.

You could check with a Developer Tool where the Http GET Request get send to (in the Network Tab).
I’m not sure exactly where it will point to but as the Url where the CustomLayout is might be something like:
someurl:port/YourApp it might look at someurl:port/vaadin/themes/mytheme… because of the …/
or because the html is inside your layout folder it might also look at someurl:port/YourApp/vaadin/themes/mytheme/vaadin/themes/mytheme/layout… or something similar.
Simon’s solution to hardcode the Url and Port should worktoo but it’s less flexible when switching e.g. from a local Test server to a production server.

I have successfully accessed an image using;

The images directory exists in;


However I am not able use the CSS and Javascript files that are used by the HTML page I have been provided by the web designer.

The website is a company website and I am trying to use Vaadin to create a form for accepting input and storing the information in a database.

Did you already try something like src=“tm.js”?
The current directory seems to be the layout folder if images/page_header.png worked.
Also why did you reference the .js as stylesheet type=“text/css” and not Javascript?

Cut and paste error, the following are the correct lines in the html file;

I have just tried a simple example with the javascript inside the html file it does not work either;


Click Date to display current day, date, and time.



Images seem to be ok but using CSS and javascript in the html does not.

Oh i’m sorry i just rembered something:
Customlayout’s html doesn’t support having css and Javascript imported or in it. You should use writeAjaxPageHeader (maybe it changed in Vaadin 7) to add it to the page header. More information:!/thread/980619/1008077

Depending on how big your library javascript is it might be good to also mention:

Looks like you are right Marius CustomLayout is limited it does not support CSS and Javascript in HTML.

I followed the link you gave me and they were having the same issue. The link writeAjaxPageHeader reference in the thread does not work.

Probably does not work with version 7.

This is not very good, need a solution to work with our corporate designed web pages.

It’s a bit different now in Vaadin 7 though i managed to get your simple test html to work in Vaadin 7.2.3.
I just added the script tag using a custom servlet:

public class V7TestServletServlet extends VaadinServlet {
    protected void servletInitialized() throws ServletException {     
        getService().addSessionInitListener(new SessionInitListener() {
            public void sessionInit(SessionInitEvent event) throws ServiceException {
                event.getSession().addBootstrapListener(new BootstrapListener() {
                    public void modifyBootstrapPage(BootstrapPageResponse response) {
                        response.getDocument().head().prepend("<script>function myFunction() {    document.getElementById(\"demo\").innerHTML = Date();}</script>");
                    public void modifyBootstrapFragment(BootstrapFragmentResponse response) {

I also did that once when i was trying to integrate a html containing flash and Javascript (It was a Tagcloud) but then i ended up creating a Javascript component as it was easier this way to add the Tagcloud in a more flexible way. Maybe this is also an option for your case.

Or you host the html as a seperate website and use a Browser Component to embed it in your Vaadin embed (that’s a bit dirty though and this way it can’t interact at all with your vaadin app)