You have always been able to embed Vaadin applications in static or dynamic web pages in two basic ways: in a <div> element and in an <iframe>.
The iframe is the more permissive of the two, allowing embedding anything in anywhere, the frame being almost like a small browser window. Unfortunately, it has many disadvantanges. The frame must have a fixed size, inheritance of CSS from the embedding page is not possible, and neither is interaction with JavaScript, which makes mashups impossible, and so on. Even bookmarking with URI fragments won't work. It's simply no good and many agree - just Google for "iframes are evil".
The nicer way to embed an application is in a <div> element, but it does not work between different domains. The security model in browsers prevents cross-site embedding of AJAX applications by enforcing the same origin policy for XmlHttpRequest calls, even if the server is running in the same domain but different port.
The new Vaadin XS (Cross-Site) add-on works around this limitation by using JSONP-style communication instead of standard XmlHttpRequests. The method was initially developed by Janne Lautamäki as part of his research in cloud computing at Tampere University of Technology. He also made a prototype for Vaadin. Matti Tahvonen from the Vaadin development team used his superhacker powers to turn the idea into a full-featured add-on, drawing on his experiences with advanced client-server communications in the DontPush add-on.
Enough for talk, let us see how it does the walk. This is not an image, go ahead and touch it!
The application is running in http://demo.vaadin.com/xsembed (you can run it directly there as well), but embedded here in vaadin.com, a different domain.
The embedding is done simply with:
<div style="height: 500px;">
<script src="http://demo.vaadin.com/xsembed/getEmbedJs"
type="text/javascript"></script>
</div>
The Sampler application shown above must be enclosed within a <div> element with a defined height, because its root layout is set to setSizeFull();. If the height of the root layout is undefined, which is the default, the div element is not needed.
You should actually be able to embed the application anywhere using the above HTML code. Here's the same app embedded at Blogspot.
It is possible to restrict where the application can be embedded by using a whitelist. The add-on also encrypts the client-server communication, which is more important for embedded applications than usual.
You can get the Vaadin XS add-on from Vaadin Directory. It is provided as a Zip package. Download and extract the installation package to a local folder. Instructions for installation and further information is given in the README.html file in the package.
Some restrictions apply. You can have only one embedded application in one page (we won't have another blog post doing it anytime soon, as they would show up in the same page). Also, some third-party libraries may interfere with the communication. Other notes are given in the README.
You will also need to update your Vaadin to the latest version 6.5.4, which has a special fix to get the add-on working.
Now, go ahead and post that small Vaadin game that you made last night in your own blog.