Widget Gallery

HTML Templates

A WTemplate can be used to format a number of widgets within an XHTML fragment. This is especially useful as an alternative to a container widget if you want to use CSS for style and layout, and when the contents are relatively static: for each placeholder you must bind a widget or a string (which can be empty).

In a template text, a ${var} indicates a placeholder named var which is substituted with a widget or string that is bound to that variable. Other syntactical constructs are:

arguments

${var arg1 arg2}

conditions

${<condition>} ... ${</condition>}

functions

${fun:arg1 arg2}

The template text can be provided by a WString and is thus easily localized and internationalized using a message resource bundle.

Below is an example of a template text, illustrating the use of placeholders for a line edit and two buttons.

<div class="form">
  <p>
    <label>Please enter your name: ${name-edit}</label>
  </p>
  <p>
    ${save-button} ${cancel-button}
  </p>
</div>

This template text, made available as a string in a resource bundle with the id "WTemplate-example", is used by the following example:

#include <Wt/WLineEdit.h>
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>

auto t = std::make_unique<Wt::WTemplate>(Wt::WString::tr("WTemplate-example"));

t->bindWidget("name-edit", std::make_unique<Wt::WLineEdit>());
t->bindWidget("save-button", std::make_unique<Wt::WPushButton>("Save"));
t->bindWidget("cancel-button", std::make_unique<Wt::WPushButton>("Cancel"));

If you want to simply display an HTML fragment without binding any widgets within it, then the WText widget is probably what you are looking for.

Top