Channels ▼
RSS

Web Development

Wt: A Web Toolkit


Client-Side Event Handling

More Insights

White Papers

More >>

Reports

More >>

Webcasts

More >>

While server-side event handling can in principle do any kind of event handling, there are limitations because of the latency involved with the client-server roundtrip. When JavaScript is available in the browser, this roundtrip would not be necessary provided that the event handling is specified in JavaScript code. Even ignoring the extra complexity of specifying part of the functionality in JavaScript, and the bad reputation of that language (and its implementations), there are more fundamental problems with specifying part of the functionality in JavaScript. First, an alternative must be provided when JavaScript is not available. Second, the server-side application state is no longer synchronized with the browser-side state. Furthermore, with custom JavaScript, Wt cannot guarantee robustness against XSS attacks and cross-browser compatibility.

Wt provides an attractive alternative, which is a dynamic C++-to-JavaScript translation mechanism for so-called stateless slots in Wt. A stateless slot is any slot that adheres to the contract to always have the same visual effect regardless of application state. For example, to unconditionally disable the button as soon as it is clicked, as it is in MyWidget::doFumble(), no application state or event details are required and therefore the stateless slot learning in Wt may be used to implement this event handling in client-side code.

Consider the code changes in Listing Two. The effect of this code is that the JavaScript code for the MyWidget::disableFumbleButton() slot is learned on the first invocation of the event, and cached in the browser. Thus, the first invocation will require a server roundtrip before rendering the visual update, but subsequent invocations will simply execute the JavaScript again. Obviously, this kind of solution is not sufficient if the fumbling is not something that we expect the user to do repeatedly.

Listing Two

class MyWidget : public WCompositeWidget
{
public:
  MyWidget(WContainerWidget *parent = 0)
    : WcompositeWidget(parent),
      ...
   {
      ...
      implementStateless(&MyWidget::disableFumbleButton);

      fumbleButton_ = new WPushButton("Fumble");
      fumbleButton_
        ->clicked.connect(SLOT(this, MyWidget::disableFumbleButton));
      fumbleButton_->clicked.connect(SLOT(this, MyWidget::doFumble));
      ...
   }
private:
   WpushButton *fumbleButton_;
   void disableFumbleButton()
   {
      fumbleButton_->disable();
   }
   void doFumble()
   {
      fumbleSome(...);
   }
};


With some extra effort, we may also eliminate the roundtrip for the visual update at the very first invocation. By letting the library invoke a stateless slot internally even before it is actually triggered by client-side code, the library may learn the visual changes that are implied by it. To undo the effect of this spontaneous internal invocation, an undo function must be provided.

Applied to the same example, you would change the call to:


implementStateless
  (&MyWidget::disableFumbleButton,
   &MyWidget::undoDisableFumbleButton);

and implement this undo method:


void undoDisableFumbleButton()
{
  fumbleButton_->enable();
}

The library provides stateless implementation for many of its built-in widget methods, such as WWidget::hide() and WWidget::show(), but incidentally also for WFormWidget::enable() and WFormWidget::disable(). Because it is convenient to connect these little methods directly to signals, the client-side optimization is automatically provided with the construct in Listing Three.

Listing Three

class MyWidget : public WCompositeWidget
{
public:
  MyWidget(WContainerWidget *parent = 0)
    : WcompositeWidget(parent),
      ...
   {
      ...
      fumbleButton_ = new WPushButton("Fumble");
      fumbleButton_
        ->clicked.connect(SLOT(fumbleButton_, WPushButton::disable));
      fumbleButton_->clicked.connect(SLOT(this, MyWidget::doFumble));
      ...
   }
private:
   WpushButton *fumbleButton_;
   void doFumble()
   {
      fumbleSome(...);
   }
};


Wim leads Sobicom nv, a software engineering consultancy company specialized in embedded systems design and bioinformatics. Koen is completing a Ph.D. in Medical Sciences. They can be contacted at wdumon@gmail.com and koen.deforche@ gmail.com, respectively.


Related Reading






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV