Architecture & DesignWt: C++ Web Toolkit Library Lets You Write Scripting-Independent Web Apps

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

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.

49
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 }
56
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.

<body onload="setTimeout(Wt.private.load,0);"
      onmousemove="return Wt.private.dragDrag(event);"
      onmouseup="return Wt.private.dragEnd(event);"
      ondragstart="return false;">
<div id="o3e03"><div id="o3e04"></div>
<div id="o3e05"><span id="o3e10">Your name, please? </span>
<input id="o3e11"
       name="o3e11"
       size="10"
       type="text"
       onkeydown="var s='';if((event.keyCode &&
          event.keyCode == 13)){s='sa28';}if(s.length!=0)
          {Wt.private.update(this, s, event, true);}" value="">
</input>

<button id="o3e12"
        type="button"
        onclick="Wt.private.update(this, 'sa27', event, true);"
        style="margin-top:0.0px;margin-right:0.0px;
               margin-bottom:0.0px;margin-left:5.0px;">Greet me.
</button>

<br id="o3e13" /><span id="o3e14"></span></div>
<iframe id="o3e06"
        class="Wt-resource" name="o3e06"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
           amp;resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e07"
          class="Wt-resource" name="o3e07"
          src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
               resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e08"
        class="Wt-resource" name="o3e08"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e09"
        class="Wt-resource" name="o3e09"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e0a"
        class="Wt-resource"
        name="o3e0a"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e0b"
        class="Wt-resource"
        name="o3e0b"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e0c"
        class="Wt-resource"
        name="o3e0c"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e0d"
        class="Wt-resource"
        name="o3e0d"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e0e"
        class="Wt-resource"
        name="o3e0e"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&rand=627318544">
</iframe>
<iframe id="o3e0f"
        class="Wt-resource"
        name="o3e0f"
        src="?wtd=pm5i5XOtcGx7paaYMTZgbRd7Pae3xORU&
             resource=o3e06&amp;rand=627318544">
</iframe>
</div>

<script type="text/javascript">
   /*<![CDATA[*/

   /* ]]> */
</script>

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 an email to [email protected]

Latest Posts

Related Stories