Создание собственных компонентов на базе класса Component

Класс Component сам по себе предоставляет возможности для создания сложных компонентов, но если этот компонент начинает содержать другие, то становится неудобно копировать целые куски кода с компонентами. Здесь приходит создание собственных компонентов на базе класса Component. Вкратце, создавая собственный класс, скрывается часть логики, по которой строиться компонент.

Пример

Создадим папку Button рядом с папкой MyWindow и добавим Button.h.

Для создания собственных компонентов подключим заголовочный файл класса Component. Создадим класс и унаследуем его от Component, перегрузим конструктор и добавим метод setup, который вызовем в конструкторе.

В конструктор сразу добавим поле для текста кнопки и запишем его в поле text.

#pragma once
#include "component/component.h"

using namespace Kit;

class Button : public Component
{
private:
    string text;

public:
    Button(string id, string classes, string text)
    	: Component(id, classes)
    {
        this->text = text;
        setup();
    }
	
public:
    void setup()
    {

    }
};

Метод setup используется для настройки компонента, в нем можно вызывать все методы класса Component. В предыдущем примере мы использовали метод setText для установки текста компоненту. Вызовем этот метод в setup.

void setup()
{
    setText(this->text);
}

На этом настройка закончена, перейдем к добавлению в окно.

Подключим данный компонент в окно и добавим его:

#pragma once

#include "window/window.h"
using namespace Kit;

class MyWindow : public Window
{
public:
    MyWindow(string title, SimpleRect size, bool noBorder = false)
        : Window(title, size, noBorder) 
    {
        setup();
    };

public:
    void setup()
    {
        style("../test/css/style.css");

        add(new Button("#button", ".button", "Text"));
    }

};

Здесь для добавления, как раз, используется третий прототип метода add.

Таким образом логика установки текста скрыта от внешнего наблюдателя, и создание компонента с текстом стала намного проще.

Некоторые требования к наследуемому компоненту

Выше был рассмотрен простейший пример наследования, но в дальнейшем необходимо добавить еще один статический метод create, для удобства. Данный метод должен полностью повторять конструктор и, по необходимости, другие возможные варианты создания компонента.

Тогда добавление можно будет переписать как:

add(Button::create("#button", ".button", "Text"));

Подключение стилей в компоненте

Еще одной важной частью наследования являются стили.

До этого все стили подключались глобально для всего окна, но каждый компонент может также содержать в себе необходимые стили, тем самым, быть полностью обособленным от окна.

Для добавления стилей для компонента используется функция style:

void style(const string& path);

Таким образом, созданные компоненты могут не зависеть от окна в которое они добавлены.