Skip to content
Alec Musasa edited this page Mar 20, 2022 · 14 revisions
#include <liblec/lecui/containers/pane.h>

The pane is a simple container that makes it easy to make layouts on a page. In the code below we shall add a pane to the page called "home" and we shall set the size of the pane to 300x300 pixels.

#include <liblec/lecui/containers/page.h>
#include <liblec/lecui/containers/pane.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 widgets to "pane" here

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

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

Things to note:

  1. The pane can be added to other containers, including other panes
  2. The pane's properties can be changed using the pane's reference; in this case we set the pane to a size of 300x300 pixels.
pane.rect().width(300.f).height(300.f);

The code above displays the following form:

screenshot

Here are important facts about panes:

  • panes, by default, have a feint background and light border. These can be manipulated as desired.
  • unlike pages, the default usable area in a pane is less than the size of the pane itself (less by 10pixels all-round), as specified in the default value set for the content_margin pane constructor. This is by design for aesthetic reasons and also ensures that when pane scroll bars kick in none of the pane's contents are masked with default settings. To change the usable area set the content_margin to what you desire. For example, to make use all the space just set the parameter to 0.
auto& pane = containers::pane::add(home, "", 0.f);

The screenshot below shows the actual usable area of a pane (red line) when using the defaults:

screenshot

Adding widgets to containers is discussed here.

Changing a pane's appearance

Changing a pane's appearance is as simple as editing its properties. For example, to change the background color of the pane to white we can do this:

pane.color_fill(color()
    .red(255)
    .green(255)
    .blue(255));

or, alternatively

pane.color_fill()
    .red(255)
    .green(255)
    .blue(255)
    .alpha(255);

Note that we do not need to specify the alpha value in the former as we're creating a new color object and all color objects are initialized with an opaque alpha channel (set to 255).

Adding that single line of code results in this form:

screenshot

To see all the properties that can be modified refer to the lecui html documentation or the in-code XML documentation for panes.