Embedding Vaadin 7 on a Web Page

Vaadin 6 / 7 / 8
1

Hi all,

I’m attempting to embed the Addressbook example: https://vaadin.com/tutorial for Vaadin 7 onto another page (addressbook.html) which is served up by the same servlet.

All I’ve done is create a new HTML page called addressbook.html

<!DOCTYPE html>
<!-- See https://vaadin.com/book/-/page/advanced.embedding.html -->
<html>
    <head>
        <title>Vaadin Addressbook Embed (Same Origin)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9;chrome=1" />
        
        <!-- Set up the favicon from the Vaadin theme -->
        <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/VAADIN/themes/reindeer/favicon.ico" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="/VAADIN/themes/reindeer/favicon.ico" />
    </head>
    
    <body>
        <!-- Bootstrap Vaadin -->
        <script type="text/javascript" src="VAADIN/vaadinBootstrap.js"></script>
        <!-- Invisible GWT History Frame -->
        <iframe tabindex="-1" id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0; overflow: hidden" src="javascript:false"></iframe>
        <h1>Vaadin Addressbook Embed (Same Origin)</h1>
        <p>Example of embedding a UI in a webpage.</p>
        
        <!--The embedding -->
        <div style="width: 300px; border: 2px solid green;" id="addressbook" class="v-app">
            <div class="v-app-loading"></div>
            <noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript>
        </div>
        
        <script type="text/javascript">//<![CDATA[
            
            if (!window.vaadin) {
                alert("Failed to load the bootstrap JavaScript: VAADIN/vaadinBootstrap.js");
            }
            
            /* The UI Configuration */
            vaadin.initApplication("addressbook", {
                "browserDetailsUrl": "addressbook/",
                "serviceUrl": "addressbook/",
                "widgetset": "com.vaadin.DefaultWidgetSet",
                "theme": "reindeer",
                "versionInfo": {"vaadinVersion": "7.0.0"},
                "vaadinDir": "VAADIN/",
                "heartbeatInterval": 300,
                "debug": true,
                "standalone": false,
                "authErrMsg": {
                    "message": "Take note of any unsaved data and <u>click here<\/u> to continue.",
                    "caption": "Authentication problem"
                },
                "comErrMsg": {
                    "message": "Take note of any unsaved data and <u>click here<\/u> to continue.",
                    "caption": "Communication problem"
                },
                "sessExpMsg": {
                    "message": "Take note of any unsaved data and <u>click here<\/u> to continue.",
                    "caption": "Session Expired"
                }
            }); //]] >
        </script>
    </body>
</html>

And I’ve placed this within the src/main/webapp directory of the project.

I built the project (
mvn clean package
) and then ran it using jetty (
mvn jetty:run
). However when I navigate to http://localhost:8080/addressbook.html it appears not to show the addressbook.html page, but rather the one generated by Vaadin.

Can anyone explain how to get the application to show my own html page please?

2

They say the effort taken to explain a problem is often all it needs to solve it. For others…

  1. I had to update the web.xml file to have this section
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>/static/*</url-pattern>
    </servlet-mapping>

The idea being that current servlet mapping

    <servlet-mapping>
        <servlet-name>Vaadin</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>

was taking every request and mapping it to the Vaadin Servlet!

  1. Note that the default servlet mapping (above) mapped to url pattern “static/*”. Therefore I had to move the “addressbook.html” page into src/main/webapp/static.

  2. I had to update the addressbook.html page to reflect the new, relative, location of the service.

<!DOCTYPE html>
<!-- See https://vaadin.com/book/-/page/advanced.embedding.html -->
<html>
    <head>
        <title>Vaadin Addressbook Embed (Same Origin)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9;chrome=1" />
        
        <!-- Set up the favicon from the Vaadin theme -->
        <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../VAADIN/themes/reindeer/favicon.ico" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="../VAADIN/themes/reindeer/favicon.ico" />
    </head>
    
    <body>
        <!-- Bootstrap Vaadin -->
        <script type="text/javascript" src="../VAADIN/vaadinBootstrap.js"></script>
        <!-- Invisible GWT History Frame -->
        <iframe tabindex="-1" id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0; overflow: hidden" src="javascript:false"></iframe>
        <h1>Vaadin Addressbook Embed (Same Origin)</h1>
        <p>Example of embedding a UI in a webpage.</p>
        
        <!--The embedding -->
        <div style="height: 1050px; width: 1680px; border: 2px solid green;" id="addressbook" class=" v-app">
            <div class=" v-app-loading"></div>
            <noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript>
        </div>
        
        <script type="text/javascript">//<![CDATA[
            
            if (!window.vaadin) {
                alert("Failed to load the bootstrap JavaScript: VAADIN/vaadinBootstrap.js");
            }
            
            /* The UI Configuration */
            vaadin.initApplication("addressbook", {
                "browserDetailsUrl": "http://localhost:8080/addressbook/",
                "serviceUrl": "http://localhost:8080/addressbook/",
                "widgetset": "com.vaadin.DefaultWidgetSet",
                "theme": "reindeer",
                "versionInfo": {"vaadinVersion": "7.0.0"},
                "vaadinDir": "../VAADIN/",
                "heartbeatInterval": 300,
                "debug": true,
                "standalone": false,
                "authErrMsg": {
                    "message": "Take note of any unsaved data and <u>click here<\/u> to continue.",
                    "caption": "Authentication problem"
                },
                "comErrMsg": {
                    "message": "Take note of any unsaved data and <u>click here<\/u> to continue.",
                    "caption": "Communication problem"
                },
                "sessExpMsg": {
                    "message": "Take note of any unsaved data and <u>click here<\/u> to continue.",
                    "caption": "Session Expired"
                }
            });//]]>
        </script>
    </body>
</html>

  1. The div in which the application was embedded (see div with class “v-app” in the addressbook.html page) had to have both a height and width set.

  2. Most important of all, the
    serviceUrl
    and
    browserDetailsUrl
     of the
    vaadin.initApplication
     call (see above html page) had to be set to the full URL of the application! That is http://localhost:8080/addressbook and not …/addressbook

I hope this helps someone else. I’ve been working on and off this for weeks.

Now just to get XS embedding working…