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


The primary method for combining a number of widgets in a composite widget is a WContainerWidget. This widget corresponds to an HTML <span> or <div> element (depending on whether it is inline or not). It can contain any number of children, and these children may be added or removed dynamically.

A first widget

Text 0

Text 1

Text 2

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

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

container->addWidget(Wt::cpp14::make_unique<Wt::WText>("A first widget"));

for (unsigned int i = 0; i < 3; ++i) {
    // A widget can be added to a container by using addWidget()
    container->addWidget(Wt::cpp14::make_unique<Wt::WText>(Wt::WString("<p>Text {1}</p>").arg(i)));

Alternatives to consider are a WTemplate, which puts widgets inside an HTML fragment using placeholder substitution, or a WTable for organizing children in a table (without using a layout manager).

The container takes ownership of its children: when the parent is deleted, the children will be deleted as well. This does not stop you from deleting a child widget, as this also automatically removes it from the parent.

As a fundamental building block of Wt, a container widget itself usually does not have any visual aspect (although it can very well be styled to give it for example margin and borders). The widgets that are contained can be positioned using Cascading StyleSheets (CSS) or a Layout Manager. CSS, which to most C++ developers will be a new technology, is worthwile learning as it will allow you to push many layout and style aspects of your application into a declarative text file. It also works irrespective of JavaScript, which is a clear benefit over layout managers. The latter are however the superior (and only) choice in case vertical fitting or stretching of children to the height of the container is needed.

There are several specialized container classes that have additional markup or behaviour: