Examples

Explore some live examples of Wt below.

The source code of these (and many more) examples is included in the Wt source distribution. You may also browse through the source code of each example using the source code viewer, following the link below each example.

Cross-linked source code for these examples is also in doxygen documentation (in a new window).

Wt homepage

We eat our own dog food: this website itself is a Wt example.

Not really the interactive application Wt was designed for, the homepage illustrates how Wt also makes excellent content-driven websites. To that extent, Wt supports pretty URLs all the same for both Ajax and plain HTML sessions (leveraging HTML5 History support if possible), useful for browser history navigation, bookmarks, and search engine optimization.

Navigation is provided by a WMenu and WTabWidget. These widgets share the same feature set. For Ajax sessions, they support pre-loading and lazy loading of the contents associated with each item. Pre-loaded contents does not increase the load time because the Wt rendering engine always optimizes the response time by only transmitting visual widgets or changes first. Everything invisible (such as the contents for other pre-loaded menu items) is transmitted in the background, after rendering the visible contents.

Menu navigation is implemented using C++ stateless slots, and therefore results in client-side event handling code. Optionally, CSS3 animations can be used to animate the transition of contents managed by a WStackedWidget.

URLs are associated with each menu/tab entry, and in this way participate in browser navigation history and bookmarking. When the user browses through the history, the menu reacts to navigation events. Similarly, when a user bookmarks a URL to revisit it later, or follows an external link to your application, the menu reacts to the initial internal path. All-together this generates a decentralized "routing framework" for pretty URLs that works equally well for Ajax as plain HTML sessions.

The chat widget sitting at the bottom is actually part of the chat example.

Browse the source code