Buttons within tabs

[Bryan9311]

I'm in a semi-beginner programming class and our group project for the end of the semester is to create some sort of game. I'm in charge of creating the GUI and I'm wondering if there's a way to add buttons within the tabs I created. My vision is to make tabs for "Attacks" "Spells" and "Skills" with each tab having buttons corresponding to different abilities.

tgui::Tab::Ptr abilities = std::make_shared<tgui::Tab>();
abilities->setPosition(300,300);
abilities->add("Attacks");
abilities->add("Spells");
abilities->add("Skills");
gui.add(abilities);

For example in the "Attacks" tab, I would like to add a button for "Heavy Attack" and a button for "Quick Attack"

[texus]

In TGUI the Tab class only defines the tabs itself on which you click, not different views that you might show when you click on them. So although it is not possible for the tabs to contain buttons, I don't think that is what you want. If I understood correctly you want to show a set of buttons when the "Attack" tab is selected while showing different widgets when one of the other tabs is selected?

The following example code might help:

Code (cpp) Select Expand

#include <TGUI/TGUI.hpp>

void onTabSelected(tgui::Gui& gui, std::string selectedTab)
{
    // Show the correct panel
    if (selectedTab == "First")
    {
        gui.get("FirstPanel")->show();
        gui.get("SecondPanel")->hide();
    }
    else if (selectedTab == "Second")
    {
        gui.get("FirstPanel")->hide();
        gui.get("SecondPanel")->show();
    }
}

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI Tabs Example");
    tgui::Gui gui{window};

    // The panels will have a different background
    tgui::Picture::Ptr background1 = std::make_shared<tgui::Picture>("xubuntu_bg_aluminium.jpg");
    tgui::Picture::Ptr background2 = std::make_shared<tgui::Picture>("Linux.jpg");

    tgui::Tab::Ptr tabs = std::make_shared<tgui::Tab>();
    tabs->add("First");
    tabs->add("Second");
    tabs->setPosition(20, 20);
    gui.add(tabs);

    // Create the first panel
    tgui::Panel::Ptr panel1 = std::make_shared<tgui::Panel>();
    panel1->setSize(400, 300);
    panel1->setPosition(tabs->getPosition().x, tabs->getPosition().y + tabs->getTabHeight());
    gui.add(panel1, "FirstPanel");

    // Create the second panel (by copying of first one)
    tgui::Panel::Ptr panel2 = tgui::Panel::copy(panel1);
    gui.add(panel2, "SecondPanel");

    // Add the widgets to the panels
    panel1->add(background1);
    panel2->add(background2);

    // Enable callback when another tab is selected (pass reference to the gui as first parameter)
    tabs->connect("TabSelected", onTabSelected, std::ref(gui));

    // Select the first tab and only show the first panel
    tabs->select("First");
    panel1->show();
    panel2->hide();

    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();
    }
}

In the above code 2 panels are created and a Tab widget which has two tabs. Depending on which tab is selected, one panel will be shown. This panel contains whatever you want to show when that tab is selected (in this case just an image, but in your case that would be the buttons).

The callback with onTabSelected is just an example of how it can be done. If the code is better designed then the callback function might be part of a class and might not need access to the gui. But you should check the tutorials about signals to fully understand how to call such functions. The "tabs->connect" call in the example will not even compile in Visual Studio unless you have the very recently released VS2015 Update 2.

[Bryan9311]

Awesome, thank you very much and thank you for the extremely quick response!