Using CORS

Information about development with Vaadin UI.

Using CORS

Postby Development@SIB » Wed Jun 03, 2015 10:58 am

CORS

All details about Cross-origin resource sharing.

Use-case

Embedding a vaadin application in your CMS (e.g. Joomla, Typo3). The CMS runs in an hosted environment without Java application server (standard and cheap web hosting).

Howto

There's an excellent blog post from vaadin. We've a ready-to-use solution added to our vaadin UI.

It's really simple to use. Add following parameter to your web.xml:
Syntax: [ Download ] [ Hide ]
<init-param>
  <param-name>cors.origin</param-name>
  <param-value>http://www.hosteddomain.com</param-value>
</init-param>
   
<init-param>
  <param-name>pushmode</param-name>
  <param-value>automatic</param-value>
</init-param>
   
<async-supported>true</async-supported>
(be sure that async-support was enabled for all vaadin servlets/filters)

The cors.origin parameter can be a comma separated list.

Here's an example html file:
Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
    <link rel="shortcut icon" type="image/vnd.microsoft.icon"
           href="./VAADIN/themes/jvx/favicon.ico" />
    <link rel="icon" type="image/vnd.microsoft.icon"
           href="./VAADIN/themes/jvx/favicon.ico" />

    <title>Embedded Vaadin application</title>

    <script type="text/javascript"
              src="./VAADIN/widgetsets/com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset/
                   com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset.nocache.js?05202015200542"></script>
  </head>
 
  <body scroll="auto">
 
    <div id="content">
      <script type="text/javascript" src="./VAADIN/vaadinPush.js?v=7.4.5"></script>
      <script type="text/javascript" src="./VAADIN/vaadinBootstrap.js?v=7.4.5"></script>

      <div id="MyEmbeddedUI" 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">

      if (!window.vaadin)
      {
        alert("Failed to load the bootstrap javascript&#058;
               ./VAADIN/vaadinBootstrap.js?v=7.4.5"
);
      }
   
      vaadin.initApplication("MyEmbeddedUI",
                             {"browserDetailsUrl": "ui/" + appname + params,
                              "serviceUrl": "ui/",
                              "theme":"jvx",
                              "versionInfo":{"vaadinVersion":"7.4.5",
                                             "atmosphereVersion":"2.2.4.vaadin5"},
                              "widgetset":"com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset",
                              "comErrMsg":{"caption":"Communication problem",
                                           "message":"Take note of any unsaved data,
                                                      and <u>click here</u> or press ESC to
                                                      continue."
,
                                           "url":null},
                              "authErrMsg":{"caption":"Authentication problem",
                                            "message":"Take note of any unsaved data,
                                                      and <u>click here</u> or press ESC to
                                                      continue."
,
                                            "url":null},
                              "sessExpMsg":{"caption":"Session Expired",
                                            "message":"Take note of any unsaved data,
                                                      and <u>click here</u> or press ESC key
                                                      to continue."
,
                                            "url":null},
                              "vaadinDir":"./VAADIN/",
                              "standalone":false,
                              "debug":false,
                              "heartbeatInterval":300,
                              "comErrMsgDetails":true,
                              "authErrMsgDetails":true,
                              "sessExpMsgDetails":true});
      </script>
    </div>
  </body>
</html>

And the rest of our web.xml:
Syntax: [ Download ] [ Hide ]
<servlet>
  <servlet-name>EmbeddedUI</servlet-name>
  <servlet-class>com.sibvisions.rad.ui.vaadin.server.VaadinServlet</servlet-class>
  <init-param>
    <param-name>UI</param-name>
    <param-value>com.sibvisions.rad.ui.vaadin.impl.VaadinUI</param-value>
  </init-param>
  <init-param>
    <param-name>widgetset</param-name>
    <param-value>com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset</param-value>
  </init-param>
  <init-param>
    <param-name>main</param-name>
    <param-value>com.sibvisions.apps.MyEmbeddedApplication</param-value>
  </init-param>
  <init-param>
    <param-name>Launcher.uifactory</param-name>
    <param-value>com.sibvisions.rad.ui.vaadin.impl.VaadinFactory</param-value>
  </init-param>
  <init-param>
    <param-name>pushmode</param-name>
    <param-value>automatic</param-value>
  </init-param>

  <async-supported>true</async-supported>  </servlet>
</servlet>

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

The application was configured for ROOT context of Tomcat(8).

If you have a different context, simply change the URLs: browserDetailsUrl, serviceUrl and vaadinDir (see above html page).
User avatar
Development@SIB
 
Posts: 311
Joined: Mon Sep 28, 2009 1:54 pm

Re: Using CORS

Postby Development@SIB » Wed Jun 03, 2015 11:26 am

There's a problem in vaadin, with push mechanism: https://dev.vaadin.com/ticket/14477

A workaround for Tomcat8, via web.xml:
Syntax: [ Download ] [ Hide ]
<init-param>
  <param-name>org.atmosphere.container.JSR356AsyncSupport.mappingPath</param-name>
  <param-value>/app/web/ui</param-value>
</init-param>

Set the parameter for the servlet which is used multiple times, e.g.:
Syntax: [ Download ] [ Hide ]
<servlet-mapping>
  <servlet-name>VaadinUI</servlet-name>
  <url-pattern>/VAADIN/*</url-pattern>
</servlet-mapping>
 
<servlet-mapping>
  <servlet-name>VaadinUI</servlet-name>
  <url-pattern>/app/web/ui/*</url-pattern>
</servlet-mapping>
User avatar
Development@SIB
 
Posts: 311
Joined: Mon Sep 28, 2009 1:54 pm


Return to Documentation