Web Components isn’t yet supported in all major browsers, but by leveraging the polymer project you can start using this emerging technology already today. Polymer is a "polyfill" to make Web Components work today, even if the browser doesn’t have full support available. It can't make them 100% compatible, e.g. some CSS might still leak from the host page, but for a selected audience, the technology is available already today.
Creating Vaadin wrappers for Web Components is pretty analogous to creating wrappers for JS components: easy. There are two approaches: with a GWT wrapper for the client side counterpart or with the "JS wrapper". Both approaches give you the same clean and efficient server side Java API. With the GWT wrapper you'll have a more fine grained control and can re-use the client side Java API in full client side apps or in offline mode for Vaadin TouchKit.
For simpler integrations you can choose the JS wrapper approach. Getting started with this approach is a bit faster as well. To demonstrate this I created a server side Java API for a Web Component presenting a chess board.
The JS integration has the following steps:
- Inject Polymer and the possibly needed EC6 polyfill to your host page
- Create a JS file that includes the client side integration
- Implement the API you wish to use from the server side
There are multiple ways the Polymer injection can be done, and the best method probably depends on your deployment, but I decided to inject it by creating a BootstrapListener to modify the default host page. There we can just find the head element and inject the required scripts into the host page.
The full server side class for the ChessBoard looks like this:
The relevant parts are the
setBoardState. They just forward the parameters to the client side counterpart with similarly named functions. In case you wonder what is the cryptic string in the void constructor, that is the starting position expressed using Forsyth–Edwards Notation.
vaadinintegration.js the actual
chess-board custom html tag aka Web Component is introduced. This is done with the
link element like this:
var el = document.createElement("link"); el.rel = "import"; el.href="VAADIN/chessstuff/chess-board/dist/chess-board.html"; document.getElementsByTagName("head").item(0).appendChild(el);
import of the Web Component could just as well be done in the BootstrapListener, like we did for polyfills above, but this way the element is injected lazily and only if the component is actually used in your server side code.
The rest of the integration JS is just standard Vaadin integration stuff. In the
setBoardState the content is reset with the
chess-board html tag and given state and in the
Pretty simple I'd say - in case you master both JS and Java. In case you don't want to touch JS code, I just suggest to follow the updates in our Directory. I bet there will be several Web Component based Vaadin add-ons published in the future, and you can use Web Components in plain Java!