Loading a Client-Side Application

You can load the JavaScript code of a client-side application in an HTML host page by including it with a <script> tag, for example as follows:

HTML

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.   <head>
  3.     <meta http-equiv="Content-Type"
  4.           content="text/html; charset=UTF-8" />
  6.     <title>Embedding a Vaadin Application in HTML Page</title>
  8.     <!-- Load the Vaadin style sheet -->
  9.     <link rel="stylesheet"
  10.           type="text/css"
  11.           href="/myproject/VAADIN/themes/reindeer/legacy-styles.css"/>
  12.   </head>
  14.   <body>
  15.     <h1>A Pure Client-Side Application</h1>
  17.     <script type="text/javascript" language="javascript"
  18.             src="clientside/com.example.myapp.MyModule/
  19.                  com.example.myapp.MyModule.nocache.js">
  20.     </script>
  21.   </body>
  22. </html>

The JavaScript module is loaded in a <script> element. The src parameter should be a relative link from the host page to the compiled JavaScript module.

If the application uses any supplementary Vaadin widgets, and not just core GWT widgets, you need to include the Vaadin theme as was done in the example. The exact path to the style file depends on your project structure - the example is given for a regular Vaadin application where themes are contained in the VAADIN folder in the WAR.

In addition to CSS and scripts, you can load any other resources needed by the client-side application in the host page.