Adding Widgets

Widgets can be added to all the containers available in the library, with a few differences between them:

Adding a widget to a page

To add a widget directly to a page we simply pass the reference to the page as a parameter to the widget's builder:

auto& home = _page_man.add("home");
auto& label = widgets::label::add(home);

Adding a widget to a pane

To add a widget to a pane we need to pass a reference to the pane as a parameter to the widget's constructor:

// add a pane to the "home page"
auto& pane = containers::pane::add(home);
pane.rect().width(300.f).height(300.f);

// add label to the pane
auto& label = widgets::label::add(pane);
label
    .text("This is a simple label and it's in a pane")
    .rect()
    .width(pane.size().get_width())
    .height(20.f);

Things to note:

• We add the label to the pane the same way we add it to a form page and any other container
• When adding widgets to a container the coordinates we use are relative to that container (not the parent page, and certainly not the form). Therefore, (0, 0) refers to the top-left corner of the pane's usable area NOT the top left of the page that the pane is in, and not the top left corner of the form. This is very important to understand.
• The pane has a content margin that is set to 10 pixels by default, and can be changed through the content_margin parameter in the pane constructor. Here 0.f is used for both the x and y coordinates for the label but as can be seen the label has a margin separating it from the edges of the pane because of the default content margin.

Let's place the full code here and show how the result looks:

#include <liblec/lecui/containers/page.h>
#include <liblec/lecui/containers/pane.h>
#include <liblec/lecui/widgets/label.h>
using namespace liblec::lecui;

class sample_form : public form {
    page_manager _page_man{ *this };

public:
    sample_form() :
        form("Sample Form") {
        events().layout = [this](std::string& error) {
            auto& home = _page_man.add("home");

            // add a pane to the "home page"
            auto& pane = containers::pane::add(home);
            pane.rect().width(300.f).height(300.f);

            // add label to the pane
            auto& label = widgets::label::add(pane);
            label
                .text("This is a simple label and it's in a pane")
                .rect()
                .width(pane.size().get_width())
                .height(20.f);

            _page_man.show("home");
            return true;
        };
    }
};

int main() {
    sample_form form;
    std::string error;
    if (!form.create(error))
        form.message(error);
    return 0;
}

The result:

Things to note:

• The label is truncated because it's width was set to be the same as the pane. So what happens if we choose to make it overlap the pane? Well, let's find out:

// add label to the pane
auto& label = widgets::label::add(pane);
label
    .text("This is a simple label and it's in a pane and we're going to make it long deliberately")
    .rect()
    .width(500.f)
    .height(20.f);

The result:

And there we have it: a scroll bar automatically kicks in at pane-level. Magic!

Adding a widget to a tab pane

Widgets can be added to a tab in much the same way they are added to regular panes. In fact, a widget cannot distinguish between containers:

#include <liblec/lecui/containers/page.h>
#include <liblec/lecui/containers/tab_pane.h>
#include <liblec/lecui/widgets/label.h>
using namespace liblec::lecui;

class sample_form : public form {
    page_manager _page_man{ *this };

public:
    sample_form() :
        form("Sample Form") {
        events().layout = [this](std::string& error) {
            auto& home = _page_man.add("home");

            // add a tab pane to the "home page"
            auto& tab_pane = containers::tab_pane::add(home);
            tab_pane.rect().width(300.f).height(300.f);

            // add tabs to "tab_pane" here
            auto& tab_one = containers::tab::add(tab_pane, "First");

            // add label to "tab_one"
            auto& label = widgets::label::add(tab_one, "my_label");
            label
                .text("This is a simple label. We've placed it in a tab and it is long, deliberately")
                .rect()
                .width(500.f)
                .height(20.f);

            auto& tab_two = containers::tab::add(tab_pane, "Second");
            auto& tab_three = containers::tab::add(tab_pane, "Third");

            // select the default tab
            tab_pane.selected("First");
            _page_man.show("home");
            return true;
        };
    }
};

int main() {
    sample_form form;
    std::string error;
    if (!form.create(error))
        form.message(error);
    return 0;
}

The result:

The line of interest here is this one:

auto& label = widgets::label::add(tab_one, "my_label");

This is where we add the label to the first tab. It's important to understand that we don't add widgets to a tab pane but to a tab.