Main Menu

Tab widget

Started by gupas, 02 August 2013, 09:12:18

gupas

Hello,

I don't understand how Tabs are working. How can I add sub-widgets to each tab? Do you have an example please?
Fullexample only use empty Tab...

Thanks

texus

The Tab widget on itself only displayes those tabs, you will also need panels for what you want.

Here is an example:
#include <TGUI/TGUI.hpp>

void onTabSelected(const tgui::Callback& callback)
{
    // Get the tab that sent the callback
    /// WARNING: This might soon be changed to using tgui::Tab::Pẗr
    tgui::Tab* tab = (tgui::Tab*)callback.widget;

    // Access the gui.
    tgui::Container* gui = tab->getParent();

    // Show the correct panel
    if (tab->getSelected() == "First")
    {
        gui->get("FirstPanel")->show();
        gui->get("SecondPanel")->hide();
    }
    else if (tab->getSelected() == "Second")
    {
        gui->get("FirstPanel")->hide();
        gui->get("SecondPanel")->show();
    }
}

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI.Net Tabs Example");

    sf::Texture background1, background2;
    background1.loadFromFile("xubuntu_bg_aluminium.jpg");
    background2.loadFromFile("Linux.jpg");

    tgui::Gui gui = tgui::Gui(window);
    gui.setGlobalFont("TGUI/fonts/DejaVuSans.ttf");

    // Create the tabs
    tgui::Tab::Ptr tabs(gui);
    tabs->load("TGUI/widgets/Black.conf");
    tabs->add("First");
    tabs->add("Second");
    tabs->setPosition(20, 20);

    // Create the first panel
    tgui::Panel::Ptr panel1(gui, "FirstPanel");
    panel1->setSize(400, 300);
    panel1->setPosition(tabs->getPosition().x, tabs->getPosition().y + tabs->getTabHeight());
    panel1->setBackgroundTexture(&background1);

    // Create the second panel (copy of first one, but with different image)
    tgui::Panel::Ptr panel2 = gui.copy(panel1, "SecondPanel");
    panel2->setBackgroundTexture(&background2);

    // Enable callback when another tab is selected
    tabs->bindCallbackEx(onTabSelected, tgui::Tab::TabChanged);

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

    return 0;
}

gupas

Ok, thanks, now I see. (You should put your example in a small tutorial. It may help some users.)

Quote from: texus on 02 August 2013, 11:35:39
The Tab widget on itself only displayes those tabs, you will also need panels for what you want.
Is it something that you wanted, or have you any plan to change that in the future?

texus

QuoteIs it something that you wanted, or have you any plan to change that in the future?
It was the easiest way to do it I guess.
I'm not sure what problems I faced, but I eventually decided that it would be better to split the widgets.
It was also to avoid having too many functions in Tab, I tried to keep it simple.

And of course by keeping Tab and Panel separate, you can have just the tabs without being forced to have a panel right beneath it. And it gives you more liberty (think of an internet brower where there could be bookmark bar right below the tabs).

gupas

Ok, that's right, thanks for your answer.