Skip to content

Widget Properties

Alec Musasa edited this page Mar 21, 2022 · 3 revisions

All widget properties are set to default values when the widget is added using the respective widget's add() method. The properties can then be changed immediately after adding the widget by using the reference returned by the add() method. The widget properties can also be changed later in a different place in the application. Below we look at both scenarios.

Soon After Creation

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

class sample_form : public form {
    page_manager _page_man{ *this };
    controls _ctrls{ *this };
    dimensions _dim{ *this };

public:
    sample_form() :
        form("Sample Form") {
        events().initialize = [this](std::string& error) {
            // prevent form resizing
            _ctrls.allow_resize(false);

            // set the form's dimensions
            _dim.set_size(size().width(300.f).height(250.f));
            return true;
        };

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

            // rectangle of same size as the home page
            const auto& page_rect = rect().size(home.size());

            // add button to the page
            auto& button = widgets::button::add(home, "sample_button");

            // set the button's text and center the button to the page using the .place() method
            button
                .text("Button")
                .rect().place(page_rect, 50.f, 50.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:

screenshot

The code of interest here are these two lines:

// set the button's text and center the button to the page using the .place() method
button
    .text("Button")
    .rect().place(page_rect, 50.f, 50.f);

Here we modify the button's properties soon after adding it by using the reference returned by the .add() method.

Later, in a Different Place

To demonstrate how we can change the button's properties later let us add an action handler to the button and change its properties within that handler.

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

class sample_form : public form {
    page_manager _page_man{ *this };
    controls _ctrls{ *this };
    dimensions _dim{ *this };

    void sample_handler() {
        try {
            // get a reference to the button using its path
            auto& button = get_button("home/sample_button");

            // toggle the button's text
            button.text(button.text() == "Button" ? "BUTTON" : "Button");

            // update the form
            update();
        }
        catch (const std::exception& e) {
            message(e.what());
        }
    }

public:
    sample_form() :
        form("Sample Form") {
        events().initialize = [this](std::string& error) {
            // prevent form resizing
            _ctrls.allow_resize(false);

            // set the form's dimensions
            _dim.set_size(size().width(350.f).height(200.f));
            return true;
        };

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

            // rectangle of same size as the home page
            const auto& page_rect = rect().size(home.size());

            // add button to the page
            auto& button = widgets::button::add(home, "sample_button");

            // set the button's text and center the button to the page using the .place() method
            button
                .text("Button")
                .rect().place(page_rect, 50.f, 50.f);

            // add an action handler
            button.events().action = [&]() {
                sample_handler();
            };
        
            _page_man.show("home");
            return true;
        };
    }
};

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

We get the exact same layout as above except that this time when we click the button repeatedly the button's text changes between PascalCase and Uppercase. Now let's quickly discuss the code of interest.

First, we add an action handler to the button (note that the handler calls a method within the sample_form class called sample_handler()):

// add an action handler
button.events().action = [&]() {
    sample_handler();
};

Secondly, we get a reference to the button using its path:

// get a reference to the button using its path
auto& button = get_button("home/sample_button");

Note that here we make use of the get_button helper macro. For more information about the helper macros refer to the html documentation or the in-code XML documentation. It is important to observe that we need to make this attempt within a try-catch block.

Thirdly, we modify the button's properties by using the reference, just like before.

// toggle the button's text
button.text(button.text() == "Button" ? "BUTTON" : "Button");

Lastly, we update the form.

// update the form
update();

For more information about the update() method refer to the html documentation or the in-code XML documentation for forms.