Wt Widget Gallery

Layout — building blocks for organizing your application as a tree of widgets

Text

Text provides a primary means for displaying information in the user interface. The WText class provides a simple way to add plain or markup text to the user interface.

The WText widget displays text using an HTML <span> or <div> element (depending on whether it is inline or not). It can display either XHTML formatted text or plain text.

The text contents is contained in a WString. This string class provides at the same time support for localization and internationalization:

It is a unicode string (internally store as UTF-8) with an API to interact with plain C++ strings.
It supports localization, when created using WString::tr(). The actual value corresponding to a key is retrieved from a WLocalizedStrings instance, taking into account the current locale. The default implementation of this interface class uses XML files, which are convenient for specifying XHTML snippets.

In its most simple form, the WText widget displays plain text (escaping special characters as needed).

Example This is an example of plain text. Any contained special XHTML characters, such as "<" and ">", are automatically escaped.

source

#include <Wt/WText.h>

auto text
  = Wt::cpp14::make_unique<Wt::WText>("This is an example of plain text. "
		  "Any contained special XHTML characters, "
		  "such as \"<\" and \">\", "
                  "are automatically escaped.", Wt::TextFormat::Plain);

Of course, a WText widget may also display XHTML formatted text.

Example This is XHTML markup text. It supports a safe subset of XHTML tags and attributes, which have only decorative functions.

source

#include <Wt/WText.h>

auto text
    = Wt::cpp14::make_unique<Wt::WText>("This is <b>XHTML</b> markup text. "
		    "It supports a safe subset of XHTML tags and "
		    "attributes, which have only decorative "
		    "functions.");

XHTML text that is not read from a localized strings interface (which is considered inherently safe), is protected against unwanted side effects from Cross-Site Scripting (XSS) attacks. The text of an XHTML-formatted WText is filtered using an XML parser and all malicious tags are removed (unless this feature is explicitly by-passed by using the XHTMLUnsafeText text format).

Example

This XHTML text contains JavaScript, wich is filtered by the XSS filter.

A warning is printed in the logs.

source

#include <Wt/WText.h>

auto text
    = Wt::cpp14::make_unique<Wt::WText>("<p>This XHTML text contains JavaScript, "
		    "wich is filtered by the XSS filter.</p>"
		    "<script>alert(\"XSS Attack!\");</script>"
		    "<p>A warning is printed in the logs.</p>");

If you want to display a text label associated with a form field then a WLabel is more suitable as it can be linked to the input field, relaying focus to it when clicked.

If you want to display an HTML fragment which contains widgets or other bound contents, then a WTemplate widget is probably what you are looking for.

Top

Events

The functionality of WText is very basic. As this widget derives - like many widgets - from WInteractWidget it may respond to to mouse events and also keyboard events if it can be given keyboard focus. A few mouse events are demonstrated below.

Example

This text reacts to clicked()This text reacts to doubleClicked()This text reacts to mouseWentOver()This text reacts to mouseWentOut()

source

#include <Wt/WContainerWidget.h>
#include <Wt/WText.h>

auto container = Wt::cpp14::make_unique<Wt::WContainerWidget>();

// Create four text widgets.
Wt::WText *text1 =
    container->addWidget(Wt::cpp14::make_unique<Wt::WText>(
                           "This text reacts to <tt>clicked()</tt>"));
text1->setStyleClass("reactive");

Wt::WText *text2 =
    container->addWidget(Wt::cpp14::make_unique<Wt::WText>(
                           "This text reacts to <tt>doubleClicked()</tt>"));
text2->setStyleClass("reactive");

Wt::WText *text3 =
    container->addWidget(Wt::cpp14::make_unique<Wt::WText>(
                           "This text reacts to <tt>mouseWentOver()</tt>"));
text3->setStyleClass("reactive");

Wt::WText *text4 =
    container->addWidget(Wt::cpp14::make_unique<Wt::WText>(
                           "This text reacts to <tt>mouseWentOut()</tt>"));
text4->setStyleClass("reactive");

// Create an additional text control to show status messages.
Wt::WText *out = container->addWidget(Wt::cpp14::make_unique<Wt::WText>());

// Assign a signal/slot mechanism to the text controls.
text1->clicked().connect([=] {
    out->setText("<p>Text was clicked.</p>");
});

text2->doubleClicked().connect([=] {
    out->setText("<p>Text was double clicked.</p>");
});

text3->mouseWentOver().connect([=] {
    out->setText("<p>Mouse went over text.</p>");
});

text4->mouseWentOut().connect([=] {
    out->setText("<p>Mouse went out text.</p>");
});

ToolTip

You may add a tooltip or deferred tooltip to WText

Tooltip example Some text

source

#include <Wt/WText.h>

auto text
  = Wt::cpp14::make_unique<Wt::WText>("Some text", Wt::TextFormat::Plain);

text->setToolTip("ToolTip",  Wt::TextFormat::XHTML);

Deferred tooltip example Text

source

#include <Wt/WText.h>
#include <Wt/WString.h>
#include <Wt/WContainerWidget.h>

class Text : public Wt::WText
{
public:
  Text() : WText(){}

  Wt::WString calculateToolTip() const
  {
    return "Deferred tooltip";
  }

  virtual Wt::WString toolTip() const
  {
    return calculateToolTip();
  }
};


auto text = Wt::cpp14::make_unique<Text>();
text->setText("Text");
text->setDeferredToolTip(true);

Top