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

Group box

A WGroupBox corresponds to an HTML <fieldset> element, and provides a frame and title around a group of widgets.

Example
A group box

Some contents.

More contents.

source
#include <Wt/WGroupBox.h>
#include <Wt/WText.h>

auto groupBox = Wt::cpp14::make_unique<Wt::WGroupBox>("A group box");
groupBox->addStyleClass("centered-example");
groupBox->addWidget(Wt::cpp14::make_unique<Wt::WText>("<p>Some contents.</p>"));
groupBox->addWidget(Wt::cpp14::make_unique<Wt::WText>("<p>More contents.</p>"));

It is usually styled using the CSS stylesheet which provides many options for layout of the legend (title) and the box contents.

Panel

A WPanel is similar to a group box, but provides optional functionality to collapse or expand its contents, and a theme-based style.

Example
This is a default panel.
source
#include <Wt/WPanel.h>
#include <Wt/WText.h>

auto panel = Wt::cpp14::make_unique<Wt::WPanel>();
panel->addStyleClass("centered-example");
panel->setCentralWidget(Wt::cpp14::make_unique<Wt::WText>("This is a default panel."));
Example
Terrific panel
This is a panel with a title.
source
#include <Wt/WPanel.h>
#include <Wt/WText.h>

auto panel = Wt::cpp14::make_unique<Wt::WPanel>();
panel->addStyleClass("centered-example");
panel->setTitle("Terrific panel");
panel->setCentralWidget(Wt::cpp14::make_unique<Wt::WText>("This is a panel with a title."));
Example
Collapsible panel
This panel can be collapsed.
source
#include <Wt/WAnimation.h>
#include <Wt/WPanel.h>
#include <Wt/WText.h>

auto panel = Wt::cpp14::make_unique<Wt::WPanel>();
panel->setTitle("Collapsible panel");
panel->addStyleClass("centered-example");
panel->setCollapsible(true);

Wt::WAnimation animation(Wt::AnimationEffect::SlideInFromTop,
                         Wt::TimingFunction::EaseOut,
			 100);

panel->setAnimation(animation);
panel->setCentralWidget(Wt::cpp14::make_unique<Wt::WText>("This panel can be collapsed."));

Top