January 19, 2021
Hot Topics:

Wt: C++ Web Toolkit Library Lets You Write Scripting-Independent Web Apps

  • By Victor Volkman
  • Send Email »
  • More Articles »

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.

 1 #include <WApplication>
 2 #include <WBreak>
 3 #include <WContainerWidget>
 4 #include <WLineEdit>
 5 #include <WPushButton>
 6 #include <WText>
 8 using namespace Wt;
10 class HelloApp : public WApplication
11 {
12 public:
13    HelloApp(const WEnvironment& env);
15 private:
16    WLineEdit *nameEdit_;
17    WText *greeting_;
19    void greet();
20 };

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.

22 HelloApp::HelloApp(const WEnvironment& env)
23    : WApplication(env)
24 {
25   setTitle("Hello world");               // application title
27    root()->addWidget(new WText("Your name, please ? "));
      // show some text
28    nameEdit_ = new WLineEdit(root());    // allow text input
29    nameEdit_->setFocus();                // give focus
31    WPushButton *b = new WPushButton("Greet me.", root());
      // create a button
32    b->setMargin(5, WWidget::Left);       // add 5 pixels margin
34    root()->addWidget(new WBreak());      // insert a line break
36    greeting_ = new WText(root());        // empty text
38    // Connect signals with slots
40    b->clicked.connect(SLOT(this, HelloApp::greet));
41    nameEdit_->enterPressed.connect(SLOT(this, HelloApp::greet));
42 }

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.

44 void HelloApp::greet()
45 {
46    // Update the text, using text input into the nameEdit_ field.
47    greeting_->setText("Hello there, " + nameEdit_->text());
48 }

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.

50 WApplication *createApplication(const WEnvironment& env)
51 {
52    // You could read information from the environment to decide
53    // whether the user has permission to start a new application
54    return new HelloApp(env);
55 }
57 int main(int argc, char **argv)
58 {
59    return WRun(argc, argv, &createApplication);
60 }

The remaining code in Lines #50–60 constitutes more of the frame initialization and application creation, which is bookkeeping stuff as far as you are concerned in this article.

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.

Page 2 of 3

This article was originally published on June 6, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date