Vaadin XS Add-on for cross-site embedding

Flow
1

The new
Vaadin XS Add-on
 provides basic support for embedding a Vaadin application in a domain different from where the application is running.

Read the
Vaadin Blog article
 for a detailed explanation.

Normally, the security model in browsers would prevent this by following the same origin policy, even if the server is running in the same domain but different port. Vaadin XS works around this limitation by using JSONP-style communication instead of standard XmlHttpRequests.

Vaadin XS Add-on is provided as a Zip package. Download and extract the installation package to a local folder. Instructions for installation is given in the README.html file in the package.

You can also get it with Maven by using the dependency declaration given in the download page.

The add-on is currently in beta phase, so feedback and bug reports are really welcome.

2

Added proposal to make creating javascript callbacks easier:
http://dev.vaadin.com/ticket/6730
.

By combining XS add-on with the above proposal, it would be easy to create small Vaadin applications that could be used to make any web site richer.

3

Hi,

what a nice add-on, we finally got IE 8 to work with embedded application without server side configuration!

Any ideas, how to configure vaadinXS to work alongside standard application servlet? Our application is available as normal web application, but we have some parts that are connected to clients web sites, and those parts require embedding (and vaadinXS).

we couldn’t figure out how to configure web.xml so that web application is using normal application servet and certain URL’s would use vaadinXS. Problem was classcastexception, which seemed to occur because both methods use the same /VAADIN/ directory, and therefor you can only assign either method and either widgetset to handle those requests.

We even tried to to created /VAADINXS/ directory, modified the writeajax- methods in XSApplicationServlet to send request to that directory and made the required web.xml servlet settings but that ended up with failed to load widgetset - error.

When looked into abstractapplicationserlet source code, it seems that there are some hard-coded parts to expect static resources to be located at /VAADIN/. We couldn’t find a method to change that setting.

Another, propably easier way would be to use vaadinXS the standard communication method for both embedded parts and the whole application, but i am not sure if this is the recommended way? Atleast now that it’s in beta.

What we did was that we created another application with separated web.xml which works as you would expect, but the problem is that we have certain code that we have to maintain in two applications. But that ofcourse, is not the way it should be.

Any thoughts or ideas?

4

Hi,

I would just add two servlets from different URLs. One for XS embedding and one standard. You just need to compile widgetsets for both XS and std application. You should be able to do this from a same war file. Your web.xml should look something like this (disclaimer: not tested):


    <servlet>
        <servlet-name>XS-servlet</servlet-name>
        <servlet-class>com.vaadin.addons.xs.server.XSApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.example.MyApp</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.example.ApplicationXSWidgetSet</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>XS-servlet</servlet-name>
        <url-pattern>/myapp-xs</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>StdVaadinServlet</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.example.MyApp</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.example.ApplicationWidgetSet</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>StdVaadinServlet</servlet-name>
        <url-pattern>/myapp</url-pattern>
    </servlet-mapping>

cheers,
matti

5

I run into same problem, but I’m little bit confused about compiling two widgetsets in the same war file. How can I compile two widgetset in the same war file? This is how I did this:
I added two servlets in web.xml file, one for XS embedding and one for standard application (as You Matti suggested) but with diff URLs. When I start the server and invoke URL for standard application, the browser hangs and needs to be restarted.
This is a part of my web.xml file :



<listener>
    	<listener-class>org.jboss.seam.servlet.SeamListener</listener-class>
	</listener>
	
	<listener>
    	<listener-class>com.www.common.session.SessionListener</listener-class>
	</listener>
	
	<filter>
   		 <filter-name>Seam Filter</filter-name>
   		 <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>
	</filter>

	<filter-mapping>
	    <filter-name>Seam Filter</filter-name>
	    <url-pattern>/*</url-pattern>
	</filter-mapping>
	
	<servlet>
		<servlet-name>Form Application</servlet-name>
		<servlet-class>com.www.application.JQueryServlet</servlet-class>
		<init-param>
			<description>
			Vaadin application class to start</description>
			<param-name>application</param-name>
			<param-value>com.www.application.FormApplication</param-value>
		</init-param>
		<init-param>
			<description>
			Application widgetset</description>
			<param-name>widgetset</param-name>
			<param-value>com.www.widgetset.FormWidgetset</param-value>
		</init-param>
	</servlet>

	
	<servlet>
		<servlet-name>UserApplication</servlet-name>
		<servlet-class>com.vaadin.addons.xs.server.XSApplicationServlet</servlet-class>
		<init-param>
			<description>
			Vaadin application class to start</description>
			<param-name>application</param-name>
			<param-value>com.www.application.UserApplication</param-value>
		</init-param>
		<init-param>
			<description>
			Application widgetset</description>
			<param-name>widgetset</param-name>
			<param-value>com.www.widgetset.FormWidgetset</param-value>
		</init-param>
		

	</servlet>
	
	<servlet-mapping>
		<servlet-name>Form Application</servlet-name>
		<url-pattern>/admin/*</url-pattern>
	</servlet-mapping>
	
	<servlet-mapping>
		<servlet-name>UserApplication</servlet-name>
		<url-pattern>/user/*</url-pattern>
	</servlet-mapping>
	
	 <servlet-mapping>
         <servlet-name>Form Application</servlet-name>
         <url-pattern>/VAADIN/*</url-pattern>
     </servlet-mapping>
     
      <servlet-mapping>
         <servlet-name>UserApplication</servlet-name>
         <url-pattern>/VAADIN/*</url-pattern>
     </servlet-mapping>

Do I miss something?

Tnx in advance.

mb

6

Mladen, did you solve your problem? How? I’m stuck with the same problem.