Topics

I don't found a way create modal (blocking) dialog in TGUI now, but it's something that might be using often (e.g. input password or confirmation).

Trying to build lib, but getting CMake errors:

Code Select Expand

CMake Warning at cmake/Dependencies.cmake:54 (find_package):
  Could not find a configuration file for package "SFML" that is compatible
  with requested version "2".

  The following configuration files were considered but not accepted:

    T:/libraries/C++/SFML/build/SFMLConfig.cmake, version: 3.0.0

Call Stack (most recent call first):
  cmake/Dependencies.cmake:86 (tgui_find_dependency_sfml)
  src/Backend/CMakeLists.txt:153 (tgui_add_dependency_sfml)
  src/CMakeLists.txt:300 (include)


Requested SFML configuration (Static) was not found
CMake Warning at cmake/Dependencies.cmake:57 (find_package):
  Found package configuration file:

    T:/libraries/C++/SFML/build/SFMLConfig.cmake

  but it set SFML_FOUND to FALSE so package "SFML" is considered to be NOT
  FOUND.
Call Stack (most recent call first):
  cmake/Dependencies.cmake:86 (tgui_find_dependency_sfml)
  src/Backend/CMakeLists.txt:153 (tgui_add_dependency_sfml)
  src/CMakeLists.txt:300 (include)


CMake Error at cmake/Dependencies.cmake:73 (message):
  CMake couldn't find SFML.

  Set SFML_DIR to the directory containing SFMLConfig.cmake (usually
  something like SFML_ROOT/lib/cmake/SFML)

Call Stack (most recent call first):
  cmake/Dependencies.cmake:86 (tgui_find_dependency_sfml)
  src/Backend/CMakeLists.txt:153 (tgui_add_dependency_sfml)
  src/CMakeLists.txt:300 (include)
TGUI and SFML - current master branch. I didn't request "2" version anywhere.


P.S. CMake seems to me like a real disaster 

When both (padding and text size) are setting not to default value hovering on EditBox works incorrectly.

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>

class MyFrame : public sf::RenderWindow
{
public:
    MyFrame(sf::RenderWindow& w, tgui::Gui& g);
    void main();

private:
    sf::RenderWindow& window;
    tgui::Gui& gui;

    const std::size_t nRows = 2;
    const std::size_t nCols = 3;

    std::vector<tgui::EditBox::Ptr> m_widgets;
    tgui::Grid::Ptr m_grid;
};

MyFrame::MyFrame(sf::RenderWindow& w, tgui::Gui& g) : window(w), gui(g)
{
    auto panel = tgui::Panel::create();
    m_grid = tgui::Grid::create();

    m_grid->setPosition({ 0,25 });
    m_grid->setSize({ "100%","20%" });

    std::vector<tgui::String> labels = { L"1",L"2",L"3" };

    tgui::Padding padding = { 0,25,0,0 };

    for (std::size_t i = 0; i < nRows; i++)
    {
        if (i > 0)
        {
            for (std::size_t j = 0; j < nCols; j++)
            {
                auto widget = tgui::EditBox::create();
                widget->setText(labels[j]);
                widget->getRenderer()->setBackgroundColorHover(tgui::Color::Cyan);
                m_grid->addWidget(widget, i, j, tgui::Grid::Alignment::Center, padding);
                m_widgets.push_back(widget);
            }
        }
        else
        {
            for (std::size_t j = 0; j < nCols; j++)
            {
                auto widget = tgui::Label::create(labels[j]);
                m_grid->addWidget(widget, i, j, tgui::Grid::Alignment::Center, padding);
            }
        }
    }

    panel->add(m_grid);
    gui.add(panel);
}

void MyFrame::main()
{
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();

            gui.handleEvent(event);
        }
        window.clear();
        gui.draw();
        window.display();
    }
}

int main()
{
    // Create the window
    sf::RenderWindow window(sf::VideoMode(800, 400), "MCVE");
    window.setFramerateLimit(60);
    tgui::Gui gui(window);
    gui.setTextSize(20);
    MyFrame(window, gui).main();

    return EXIT_SUCCESS;
}

I have some widgets in grid and not all of them fit inside usual panel. I want to use scrollbar to provide access to widgets so put grid into ScrollablePanel panel. But even with scrollbar policy Always it can't change grid appearance. Does it bug or am I missing something?

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>

class MyFrame
{
public:
    MyFrame(sf::RenderWindow& w, tgui::Gui& g);
    void main();

protected:
    tgui::Grid::Ptr m_grid;
    tgui::TextArea::Ptr m_log;

private:
    void updateLayout();

    sf::RenderWindow& window;
    tgui::Gui& gui;
};

MyFrame::MyFrame(sf::RenderWindow& w, tgui::Gui& g) : window(w), gui(g)
{
    auto panel = tgui::ScrollablePanel::create();
    panel->getRenderer()->setBackgroundColor(sf::Color(200, 200, 200, 255));

    m_grid = tgui::Grid::create();

    for (std::size_t i = 0; i < 20; i++)
    {
        m_grid->addWidget(tgui::Label::create(tgui::String(i)), i, 0, tgui::Grid::Alignment::Center, { 0,10,0,0 });

        auto widget = tgui::EditBox::create();
        widget->setText(tgui::String(i));
        m_grid->addWidget(widget, i, 1, tgui::Grid::Alignment::Center, { 0,10,0,0 });
    }

    panel->add(m_grid);

    m_log = tgui::TextArea::create();
    panel->add(m_log);
    gui.add(panel);
   
    updateLayout();
    panel->setVerticalScrollbarPolicy(tgui::Scrollbar::Policy::Always);
}

void MyFrame::updateLayout()
{
    m_grid->setSize({ "50%","100%" });
    m_log->setSize({ "50%","100%" });

    auto size = window.getSize();
    m_grid->setPosition(0, 0);
    m_log->setPosition(size.x - 0.5 * size.x, 0);
}

void MyFrame::main()
{
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();

            if (event.type == sf::Event::Resized)
            {
                updateLayout();
            }
            gui.handleEvent(event);
        }

        window.clear();
        gui.draw();
        window.display();
    }
}

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "MCVE");
    window.setFramerateLimit(60);
    tgui::Gui gui(window);
    MyFrame(window, gui).main();

    return EXIT_SUCCESS;
}

Listbox part renderer properties of Combobox are not working after selection changes.

Gif:

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>

class MyFrame
{
public:
    MyFrame(sf::RenderWindow& w, tgui::Gui& g);
    void main();

protected:
    tgui::ComboBox::Ptr m_choice;
    tgui::ListBoxRenderer m_listBoxRenderer;
    sf::RenderWindow& window;
    tgui::Gui& gui;

};

MyFrame::MyFrame(sf::RenderWindow& w, tgui::Gui& g) : window(w), gui(g)
{
    m_listBoxRenderer.setBackgroundColor(tgui::Color(190, 190, 190));
    m_listBoxRenderer.setBackgroundColorHover(tgui::Color::Yellow);

    auto m_Panel = tgui::Panel::create();
    m_choice = tgui::ComboBox::create();
    m_choice->getRenderer()->setListBox(m_listBoxRenderer.getData());
    m_choice->addItem(L"1");
    m_choice->addItem(L"2");
    m_choice->addItem(L"3");
    m_choice->setSelectedItemByIndex(0);
    m_Panel->add(m_choice);
    m_choice->setSize({ window.getSize().x / 2, window.getSize().y / 15 });
    gui.add(m_Panel);
}

void MyFrame::main()
{
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();

            if (event.type == sf::Event::Resized)
            {
                m_choice->setSize({ window.getSize().x / 2, window.getSize().y / 15 });
            }
            gui.handleEvent(event);
        }

        window.clear();
        gui.draw();
        window.display();
    }
}

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "MCVE");
    window.setFramerateLimit(60);

    tgui::Gui gui(window);
    MyFrame(window, gui).main();

    return EXIT_SUCCESS;
}

While building TGUI got such error:

SFML found but some of its dependencies are missing ( FreeType)
CMake Warning at src/Backends/SFML/CMakeLists.txt:13 (find_package):
  Found package configuration file:

    */libraries/C++/SFML-2.5.1/SFMLConfig.cmake

  but it set SFML_FOUND to FALSE so package "SFML" is considered to be NOT
  FOUND.
Call Stack (most recent call first):
  src/Backends/CMakeLists.txt:44 (include)
  src/CMakeLists.txt:162 (include)


CMake Error at src/Backends/SFML/CMakeLists.txt:25 (message):
  CMake couldn't find SFML.

  Set SFML_DIR to the directory containing SFMLConfig.cmake (usually
  something like SFML_ROOT/lib/cmake/SFML), or change TGUI_BACKEND to not use
  SFML.
Call Stack (most recent call first):
  src/Backends/CMakeLists.txt:44 (include)
  src/CMakeLists.txt:162 (include)

I suppose that's because this part was removed from CMakeLists.txt:

if(NOT TGUI_SHARED_LIBS)   
    if(SFML_ROOT)   
        if(TGUI_OS_WINDOWS)   
            set(CMAKE_INCLUDE_PATH ${CMAKE_INCLUDE_PATH} "${SFML_ROOT}/extlibs/headers")   
            if(ARCH_32BITS)   
                if(TGUI_COMPILER_MSVC AND MSVC_VERSION LESS 1900) # older than VC++14   
                    set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-msvc/x86")   
                elseif(TGUI_COMPILER_MSVC) # VC++14 or newer   
                    set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-msvc-universal/x86")   
                else() # gcc   
                    set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-mingw/x86")   
                endif()   
            elseif(ARCH_64BITS)   
                if(TGUI_COMPILER_MSVC AND MSVC_VERSION LESS 1900) # older than VC++14   
                    set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-msvc/x64")   
                elseif(TGUI_COMPILER_MSVC) # VC++14 or newer   
                    set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-msvc-universal/x64")   
                else() # gcc   
                    set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-mingw/x64")   
                endif()   
            endif()   
        elseif(TGUI_OS_MACOSX)   
            set(CMAKE_INCLUDE_PATH ${CMAKE_INCLUDE_PATH} "${SFML_ROOT}/extlibs/headers")   
            set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-osx/lib/")   
        elseif(TGUI_OS_ANDROID)   
            set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${CMAKE_ANDROID_NDK}/sources/third_party/sfml/extlibs/lib/${CMAKE_ANDROID_ARCH_ABI}/")   
        elseif(TGUI_OS_IOS)   
            set(CMAKE_LIBRARY_PATH ${CMAKE_LIBRARY_PATH} "${SFML_ROOT}/extlibs/libs-ios/")   
        endif()   
    endif()   
endif()   

together with SFML_ROOT. When I return it back and define SFML_ROOT all build as expected.

Panel holder is a control, which manages multiple windows with associated tabs. This control also known either as Tab container or Notebook widget. It's popular widget so it would be good to have such control in TGUI.

I've made such simple implementation that I current use in own project:

Code Select Expand

class tgPanelHolder : public tgui::SubwidgetContainer
{
public:

    typedef std::shared_ptr<tgPanelHolder> Ptr; //!< Shared widget pointer
    typedef std::shared_ptr<const tgPanelHolder> ConstPtr; //!< Shared constant widget pointer

    tgPanelHolder(const tgui::Layout2d& size = { "100%", "100%" }) : m_index(-1)
    {
        m_type = "PanelHolder";
        setSize(size);
        m_tabs = tgui::Tabs::create();
        m_tabs->setSize({ size.x, m_tabs->getSize().y * 2 });
        m_tabs->onTabSelect([this]()
            {
                auto cur = m_tabs->getSelectedIndex();
                Select(cur);
                if (m_tabs->getSelectedIndex() != m_index)
                {
                    m_tabs->select(m_index);
                }
            });

        m_container->add(m_tabs, "Tabs");
    }

    static tgPanelHolder::Ptr create(const tgui::Layout2d& size = { "100%", "100%" })
    {
        return std::make_shared<tgPanelHolder>(size);
    }

    static tgPanelHolder::Ptr copy(tgPanelHolder::ConstPtr pholder)
    {
        if (pholder)
            return std::static_pointer_cast<tgPanelHolder>(pholder->clone());
        else
            return nullptr;
    }

    Widget::Ptr clone() const override
    {
        return std::make_shared<tgPanelHolder>(*this);
    }

    void addPanel(tgui::Panel::Ptr ptr, const tgui::String& name, bool select = true)
    {
        auto size = getSizeLayout();
        ptr->setSize({ size.x , size.y - m_tabs->getSize().y });
        ptr->setPosition({ tgui::bindLeft(m_tabs), tgui::bindBottom(m_tabs) });
        m_panels.push_back(ptr);
        m_tabs->add(name, select);
        if (select)
        {
            Select(m_panels.size() - 1, false);
        }
    }

    bool addPanelAt(tgui::Panel::Ptr ptr, const tgui::String& name, std::size_t index, bool select = true)
    {
        if (index > m_panels.size())
        {
            return false;
        }

        addPanel(ptr, name, select);
        auto size = m_panels.size();
        if (index != size)
        {
            std::swap(m_panels[index], m_panels[size - 1]);
        }
    }

    void RemovePanel(tgui::Panel::Ptr ptr)
    {
        if (ptr != nullptr)
        {
            auto idx = getIndex(ptr);
            if (idx != -1)
            {
                m_tabs->remove(idx);
                m_container->remove(m_panels[idx]);
                m_panels.erase(m_panels.begin() + idx);
                if (idx == 0)
                {
                    Select(m_panels.size() - 1);
                }
                else
                {
                    Select(idx - 1);
                }
            }
        }
    }

    void Select(std::size_t index, bool genEvents = true)
    {
        if (index >= m_panels.size() || index == static_cast<std::size_t>(m_index))
        {
            return;
        }
        if (genEvents)
        {
            bool isVetoed = false;
            onSelectionChanging.emit(this, index, &isVetoed);
            if (isVetoed)
            {
                return;
            }
        }

        if (m_container->getWidgets().size() == 2)
        {
            m_container->remove(m_panels[m_index]);
        }
        m_container->add(m_panels[index]);
        m_tabs->select(index);
        m_index = index;
        if (genEvents)
        {
            onSelectionChanged.emit(this, m_index);
        }
    }

    std::size_t Count() const
    {
        return m_panels.size();
    }

    int getIndex(tgui::Panel::Ptr ptr)
    {
        for (std::size_t i = 0; i < m_panels.size(); i++)
        {
            if (m_panels[i] == ptr)
            {
                return static_cast<int>(i);
            }
        }
        return -1;
    }

    tgui::Panel::Ptr getSelected()
    {
        return getPanel(m_index);
    }

    int getSelectedIndex() const
    {
        return m_index;
    }

    tgui::Panel::Ptr getPanel(int index)
    {
        if (index < 0 || index >= static_cast<int>(m_panels.size()))
        {
            return nullptr;
        }
        return m_panels[index];
    }

    tgui::Tabs::Ptr getTabs()
    {
        return m_tabs;
    }

    tgui::String getTabText(std::size_t index) const
    {
        return m_tabs->getText(index);
    }

    bool changeTabText(std::size_t index, const tgui::String& text)
    {
        return m_tabs->changeText(index, text);
    }

public:
    tgui::SignalInt onSelectionChanged = { "SelectionChanged" };
    tgui::SignalTyped2<int, bool*> onSelectionChanging = { "SelectionChanging" }; //can be vetoed

private:
    std::vector<tgui::Panel::Ptr> m_panels;
    int m_index;

    tgui::Tabs::Ptr m_tabs;
};


If it's OK - I'm going to open PR with proper changes (code style, tests, ...)

I want to create listview that will place full width of window but without scrollbar when it's redundant.

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>

class MyFrame
{
public:
    MyFrame()
    {
        window.create(sf::VideoMode(800, 600), "MCVE");
        gui.setTarget(window);

        auto listView = tgui::ListView::create();
        listView->setSize(window.getSize().x, window.getSize().y);

        listView->addColumn(L"Key");
        listView->addColumn(L"Value");

        listView->setColumnWidth(0, window.getSize().x * 0.2f);
        listView->setColumnWidth(1, window.getSize().x * 0.8f);

        gui.add(listView);
    }
    void main()
    {
        while (window.isOpen())
        {
            sf::Event event;
            while (window.pollEvent(event))
            {
                if (event.type == sf::Event::Closed)
                    window.close();
                gui.handleEvent(event);
            }
            window.clear();
            gui.draw();
            window.display();
        }
    }
    sf::RenderWindow window;
    tgui::Gui gui;
};

int main()
{
    MyFrame().main();
}

Is it possible?

It's a bit strange that multiline input widget hasn't support setting placeholder because some users really need a hint what they should input even for big textboxes. So it would be great to have such feature.

I have to retrieve some information from ChildWindow when it closing, but without calling destroy/0 the window doesn't disappear.

Here is MCVE:

Code Select Expand


#include <TGUI/TGUI.hpp>
#include <iostream>

class MyFrame
{
public:
    MyFrame()
    {
        window.create(sf::VideoMode(800, 600), "TGUI window");
        gui.setTarget(window);
        panel = tgui::Panel::create();
       
        auto b = tgui::Button::create();
        b->setText("Click");
        b->connect("pressed", [this]()
            {
                auto ptr = tgui::ChildWindow::create("Test");
                ptr->connect("Closed", [this, ptr]()
                    {
                        std::cout << ptr->getTitle().toAnsiString() << '\n';
                        //ptr->destroy();  // all works if uncomment
                    });
                panel->add(ptr);
            });
        panel->add(b);
        gui.add(panel);
    }
    void main()
    {
        while (window.isOpen())
        {
            sf::Event event;
            while (window.pollEvent(event))
            {
                if (event.type == sf::Event::Closed)
                    window.close();
                gui.handleEvent(event);
            }
            window.clear();
            gui.draw();
            window.display();
        }
    }

private:
    sf::RenderWindow window;
    tgui::Gui gui;

    tgui::Panel::Ptr panel;
};

int main()
{
    MyFrame().main();
}

Is it correct behaviour or I am doing something wrong and there is the right way for such situation?

In GUI application often need provide some report for user and supporting HTML or at least md format so to have such widget would be really great. 

In some cases there is important to have opportunity select several items from the list (for example if its file picker dialog).

I noticed that all examples use only "all in main" style. Is there any reason why it don't write in OOP-style?
Minimal example(it took for me a while before I realize how create Gui inside class):

Code Select Expand

#include <TGUI/TGUI.hpp>

class MyFrame
{
public:
    MyFrame(int argc, char* argv[]);
    void main();

protected:
    tgui::Button::Ptr m_Button;

private:
    sf::RenderWindow window;
    tgui::Gui gui;
};

MyFrame::MyFrame(int argc, char* argv[])
{
    window.create(sf::VideoMode(800, 600), "TGUI window");
    gui.setTarget(window);
    auto panel = tgui::ScrollablePanel::create();
    m_Button = tgui::Button::create("Press");
    panel->add(m_Button);
    gui.add(panel);
}

void MyFrame::main()
{
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();

            else if (event.type == sf::Event::Resized)
            {
                window.setView(sf::View(sf::FloatRect(0.f, 0.f, static_cast<float>(event.size.width), static_cast<float>(event.size.height))));
                gui.setView(window.getView());
            }
            gui.handleEvent(event);
        }

        window.clear();
        gui.draw();
        window.display();
    }
}

int main(int argc, char* argv[])
{
    MyFrame f(argc, argv);
    f.main();
}

ListView is very good control but it doesn't provide opportunity to change anything but text for cells or even rows.

So it would be great to have control where every cell (or at least rows) can change color(of text/background/borders). It's very common situation where one should separate data in table (like top 5 of something). 

SpinCtrl is a popular control that combine SpinButton and one line TextBox. It's not so hard do it in user code but it would be much better to have it out of the box from library.

It would be great to have opportunity handle click on header cells. For example for sorting some data. 

A control{s} to select a file{directory} path. Sometimes it's called as File{Dir}Picker but more popular name is OpenFile{Folder}Dialog.

Is it possible to set position for widgets inside grid to keep it straight(i.e. on one row/column)?
When there is only one column better don't use grid at all, but it should be possible for multiple columns.

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>
#include <random>
#include <string>

std::string random_str()
{
std::string str("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");

std::random_device rd;
std::mt19937 gen(rd());
std::uniform_int_distribution<> dis(0, 32);
std::shuffle(str.begin(), str.end(), gen);
return str.substr(0, dis(gen));
}

int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI window");
tgui::Gui gui(window);
auto panel = tgui::ScrollablePanel::create();
auto grid = tgui::Grid::create();

for (std::size_t i = 0; i < 20; i++)
{
auto cbox = tgui::Label::create(random_str());
//panel->add(cbox, std::to_string(i));
grid->addWidget(cbox, i, 0);
if (i != 0)
{
auto prev = grid->getWidget(i - 1, 0);
//auto prev = panel->get(std::to_string(i - 1));//works without grid
if (prev != nullptr)
{
cbox->setPosition({ tgui::bindLeft(prev), tgui::bindBottom(prev) });
}
}
}

panel->add(grid);
gui.add(panel);
while (window.isOpen())
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();

gui.handleEvent(event); // Pass the event to the widgets
}

window.clear();
gui.draw(); // Draw all widgets
window.display();
}
}

P.S. I read this topic but it's didn't help 

I want to create a MessageBox on menu click and close it via Cancel button. But calling close in ButtonPressed handler cause a crash. How it to do correctly?

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>
#include <iostream>

static auto Edit = L"Edit";

int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI window");
tgui::Gui gui(window);
tgui::MenuBar::Ptr menuBar = tgui::MenuBar::create();

menuBar->addMenu(Edit);
menuBar->addMenuItem(Edit, L"Apply");
menuBar->connectMenuItem({ Edit, L"Apply" }, [&gui]
{
auto ptr = tgui::MessageBox::create("Title", "Some warning", { "OK", "Cancel" });
gui.add(ptr);
ptr->connect("ButtonPressed", [&](const std::string& button)
{
if (button == "OK")
{
std::cout << "OK\n";
}
else if (button == "Cancel")
{
ptr->close();
}
});
});

gui.add(menuBar);

menuBar->moveToFront();
while (window.isOpen())
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();

gui.handleEvent(event); // Pass the event to the widgets
}

window.clear();
gui.draw(); // Draw all widgets
window.display();
}
}

I can't found a way to insert space between menu bar and panel with other widgets because without it they overlapped. How to do it correctly?

MCVE:

Code Select Expand

#include <TGUI/TGUI.hpp>

static auto File = "File";

int main()
{
sf::RenderWindow window(sf::VideoMode(400, 300), "TGUI window");
tgui::Gui gui(window);
auto topLayout = tgui::VerticalLayout::create();
auto panel = tgui::ScrollablePanel::create();
auto grid = tgui::Grid::create();

tgui::MenuBar::Ptr menuBar = tgui::MenuBar::create();
menuBar->addMenu(File);
menuBar->addMenuItem(File, L"New");
menuBar->addMenuItem(File, L"Open");
gui.add(menuBar);
auto box = tgui::CheckBox::create("0");
grid->addWidget(box, 0, 0);
auto box2 = tgui::CheckBox::create("1");
grid->addWidget(box2, 1, 0);
panel->add(grid);
gui.add(grid);
topLayout->add(panel);
gui.add(topLayout);
menuBar->moveToFront();
// Main loop
while (window.isOpen())
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();

gui.handleEvent(event); // Pass the event to the widgets
}
window.clear();
gui.draw(); // Draw all widgets
window.display();
}
}