If there is a single feature of Wt that is not well known, simple to use, and potentially very useful, then it must be its WidgetSet deployment option.
This allows a Wt application to integrate as a guest inside a host page (or application). A popular example of this concept is Google Maps, which you can easily integrate in another page. Using the WidgetSet deployment mode, you can turn any Wt application (or widget) in such a web widget with minimal effort.
Since we’ve just implemented support for native Cross Origin requests in capable browsers, we decided it was a good opportunity to show case this by hosting a chat widget (the simplechat example) inside the homepage (it should be sitting on the bottom right of your window!).
By default, a Wt application manages the entire contents of the browser window (which corresponds to the root() object). In contrast, when deployed as a WidgetSet application, you integrate the Wt application in another page and allow it to manage the contents and interactive of one or more <div>'s.
No <iframe> is used for the integration, and thus there are no restrictions in positioning and/or styling the guest application widgets. The guest application functionality intermixes completely with the host page. For the homepage hosting the chat application, both the host and guest application are Wt applications that live in the same namespace, and so the library needed some updates to make sure that they do not interfere.
Because the Wt application may be hosted on another server (and on another domain), the application needs to use Cross-Origin requests. By default, a browser can only issue requests to its Origin server (the server that is shown in the URL bar). While this used to be a delicate story, modern browsers now provide first class safe support for this (including IE8!). Also new protocols like WebSocket (which is used by the chat widget if available) provide support for Cross-Origin communication.
Integrating the chat widget in a host page could not be much easier. For example, the following is a minimal complete HTML file which loads the chat popup widget.
<html> <head> <style> #chat, #chat table { font-family: arial,sans-serif; font-size: 10pt; } #chat .chat-bar { background-color: #11c; } </style> </head> <body> <div id="chat"></div> <script src="http://www.webtoolkit.eu/wt/examples/simplechat/chat.js?div=chat"> </script> </body> </html>
As you can see, you can easily customize the widget since it’s style is influenced by the CSS declarations of the host page.
A guest widget can also provide a JavaScript API, by using JSignal<> to allow the invocation of C++ functions from JavaScript. Usually, you will want to wrap this in a nice JavaScript API to shield the user from the raw Wt API, which looks in this case like this for a login JSignal<WString> attached to the application :
chat.emit(chat, 'login', 'koen');
This API is used by the homepage itself to couple the login to the blog to the login in the chat.
The source code of the modified chat example can be browsed here (and is available from git).