Wt (pronounced 'witty') is a C++ library and application server for developing and deploying web applications. Although Wt supplies a GUI, it is not your typical "framework", which locks you into someone's preconceived idea of how applications should be structured. Rather, Wt is widget-centric, and although inspired by existing C++ GUIs, it offers complete abstraction of any web-specific implementation details, all the way down to event handling and graphics support. It's probably not a coincidence that Wt is named similarly to the ever-popular Qt application development system!

In fact, none of today's so-called "page-based frameworks" (built on PHP or JSP/JSF derivatives) for developing web applications make abstraction of the peculiarities of the underlying implementation technologies. As a consequence, a developer must gain familiarity with a panoply of ever-changing technologies, including HTML/XHTML, JavaScript, CSS, AJAX, CGI, DHTML, SVG/VML/Canvas—just to name a few. Moreover, as soon as you drive a stick into the ground and choose a technology such as AJAX or JavaScript, you must take responsibility for graceful degradation when these pieces are missing in action due to or disabled for local security reasons. Little has changed in the structure of applications that follow the primarily page-centric paradigm of 1990s HTML. This means that you will need to design and maintain manually your client-server communication when using advanced AJAX techniques.

Generating HTML code or filling HTML templates is prone to security problems such as Cross-Site-Scripting (XSS), by unwillingly allowing JavaScript to be inserted in the page. Ironically, template frameworks cannot avoid this because as a developer you need to be able to insert self-written JavaScript to improve your web application.

In contrast, a web application developed with Wt is written in only one compiled language (C++), from which the library generates the necessary HTML/XHTML, JavaScript, CGI, or AJAX code. The responsibility of writing secure and browser-portable web applications is handled by Wt. For example, if available, Wt will maximally use JavaScript and AJAX, but applications developed using Wt will also function correctly when AJAX is not available, or when JavaScript is disabled, reverting to a plain HTML/CGI mechanism for communication between browser and server.

Typical use scenarios:

Web-based GUIs for embedded systems

Web-based GUIs that require integration with (existing) C++ libraries

Creating a port of existing C++ desktop applications to the web

Some benefits of using Wt:

Develop web applications like you develop C++ desktop applications.

Provides plain widgets, which work regardless of JavaScript availability.

Enables more polished or advanced functionality when JavaScript is available (without re-coding)

Built-in HTTPD and FastCGI for easy development and deployment.

A single specification for both client- and server-side validation and event handling (when using stateless slot implementations).

Generates standards compliant HTML or XHTML code.

Portable, anti-aliased graphics with VML, SVG, or HTML 5.

No exposure of business logic, which stays at the server.

Page load time is limited only by screen complexity, not application size.

Installation

Installing Wt for Windows is a bit harder than implementing it on a Linux host, primarily because there isn't anything as simple as Linux package management on Windows. So, it becomes a bit of a scavenger hunt, although there is a nice how-to document. Basically, you are responsible for locating the suggested versions of BoostPro Boost library (currently, 1.34.1). BoostPro requires asio, the asynchronous I/O model for C++. This is theoretically included in BoostPro 1.35 although I didn't test it out. These components in turn require cmake, a freeware "make" type utility.

Hello Wt!

You'll start off with a "hello world" type app that provides a simple CGI type form and see how this design can be realized by a C++ app. Unlike most apps that I write about, you can actually run it for yourself right now on the web! What you'll see first is a classic web form presentation shown in Figure 1. After you enter your name and click the Submit button ("Greet me."), it rewrites the page and more-or-less you are back to the initial state, as shown in Figue 2.

Figure 1: Hello world forms (entering text)

[Wt2.jpg

Figure 2: Hello world forms (after clicking Submit)

So, take a walkthrough of this program and see how it was done. First, keep in mind that most GUI "hello world" apps often run 50 to 100 lines of code.

You start off deriving your application from WApplication and you must implement a constructor, called in your case HelloApp(), which will be called with information about the new session and the initial request.

The HelloApp::HelloApp() constructor initializes the web page and sets up event handlers. In Lines #25-36, you are simply adding all the elements to your form dynamically. The WText widget supplies static text, the WLineEdit widget turns into an INPUT tag, and WPushButton will handle the Submit action later. In Lines #40-41, you link in the event handlers for your app that will do the real work. Specifically, you want to run the greet() method when either the button is clicked OR someone is in the INPUT area and hits the "Enter" key.

So now, the greet() method is what happens when you want some action to occur after the button is clicked or the equivalent action of pressing Enter inside the INPUT area. If you recall, back on Line #36, you created the greeting object as a new static text (WText) widget but left it empty. Because the HTML on the page is essentially rendered in the order that objects are created, the greeting is the last thing on your page. Intially, it is invisible because it has no value and then after the button is clicked, you're copying the data from the WLineInput widget and calling WText.setText() and so it displays "Hello there so-and-so" on the page.

Code Generation

So, how is this different than just coding up a bunch of stuff in an HTML FORM tag area? Plenty! In the HEAD area of the document, there are 800+ lines of JavaScript code planted to handle the responses to various events as they happen. A good bit of this, perhaps 20%, is related to handling drag-and-drop events in JavaScript. If you want to see the nitty gritty, go run the app and then right-click on a blank area in the page and choose "View Source."

Eventually, you get to the BODY that was generated. You can see that it is setting up several global event handlers for the entire page in the BODY tag. Then, you get a spanned area with the "Your name, please?" text, followed by the INPUT area, and the BUTTON. Both the INPUT and BUTTON are loaded with JavaScript event handlers. Last, but not least, there is a load of Inline Frames (IFRAME) with data pertaining to your Widgets.

Conclusion

Well, you could say that you haven't really pushed the envelope with your Hello World app, but I thought it would be more useful to take a really close look at a simple app rather than just seeing a small bit of a sophisticated app. In reality, there's lots of Wt example programs to look at which show off things like drag-and-drop, chat, calendar, file tree explorer, email composer, and bar graphs. There is some fascinating stuff such as the Composer widget that encapsulates the whole set of Gmail type message composing, including managing uploaded attachments and letting them transfer asynchronously. Any one of these would probably need as thorough a treatment as you had here to explain them, but again the point is that you can simply instantiate them, connect signals to slots, and begin coding immediately.

Also, and it should be apparent, I hope that your C++ app on the back end of this web-fronted GUI has all the capabilities it would normally have with respect to connecting with databases, reading and writing files, and all the real work that apps have to do to fulfill their business logic. Wt has been a bit of a latecomer to all the web application frameworks, but it comes at a time when the freight of many of these is simply overwhelming and being able to work in a familiar C++ framework is perhaps just what the doctor ordered.

About the Author

Victor Volkman has been writing for C/C++ Users Journal and other programming journals since the late 1980s. He is a graduate of Michigan Tech and a faculty advisor board member for the Washtenaw Community College CIS department. Volkman is the editor of numerous books including, C/C++ Treasure Chest and is the owner of Loving Healing Press. He can help you in your quest for open source tools and libraries; just drop send an email to sysop@HAL9K.com

About the Author

Victor Volkman

Victor Volkman has been writing for C/C++ Users Journal and other programming journals since the late 1980s. He is a graduate of Michigan Tech and a faculty advisor board member for Washtenaw Community College CIS department. Volkman is the editor of numerous books, including C/C++ Treasure Chest and is the owner of Loving Healing Press. He can help you in your quest for open source tools and libraries, just drop an e-mail to sysop@HAL9K.com.

Comments

There are no comments yet. Be the first to comment!

You must have javascript enabled in order to post comments.

Leave a Comment

Your email address will not be published. All fields are required.

Name

Email

Title

Comment

Top White Papers and Webcasts

Live Event Date: March 19, 2015 @ 1:00 p.m. ET / 10:00 a.m. PT
The 2015 Enterprise Mobile Application Survey asked 250 mobility professionals what their biggest mobile challenges are, how many employees they are equipping with mobile apps, and their methods for driving value with mobility.
Join Dan Woods, Editor and CTO of CITO Research, and Alan Murray, SVP of Products at Apperian, as they break down the results of this survey and discuss how enterprises are using mobile application management and private …

On-demand Event
Event Date: February 12, 2015
The evolution of systems engineering with the SysML modeling language has resulted in improved requirements specification, better architectural definition, and better hand-off to downstream engineering. Agile methods have proven successful in the software domain, but how can these methods be applied to systems engineering? Check out this webcast and join Bruce Powel Douglass, author of Real-Time Agility, as he discusses how agile methods have had a tremendous …