Working with objects

In this tutorial, you will learn how to make a login screen like in the screenshot below.

TGUI Login Screen Example

You should always create a widget by passing its parent widget as a first parameter to the contructor.
The second parameter is optional, but when you do pass a name then you will be able to retreive the widget from the window later. Like this, you don’t have to store the widget yourself. 

tgui::Picture::Ptr picture(gui, "BackgroundImage");

Now that the widget (in this case a picture) is created, you can set it up.

picture->load("myBackgroundImage.png");
picture->setSize(800, 600);

We are also going to create an edit box. The code is similar to creating the picture.

tgui::EditBox::Ptr editBoxUsername(gui, "Username");
editBoxUsername->load("TGUI/widgets/Black.conf");
editBoxUsername->setSize(400, 40);
editBoxUsername->setPosition(200, 140);

We could load the second edit box in exactly the same way, but I want to show you how to copy widgets.
As because this is an edit box that contains a password, we will set a password character. 

tgui::EditBox::Ptr editBoxPassword = gui.copy(editBoxUsername, "Password");
editBoxPassword->setPosition(200, 290);
editBoxPassword->setPasswordCharacter('*');

The rest of the widgets are created in a similar way and I am not going to explain every line.
Below you can find the code to create all the widgets inside the login screen.
Take a moment to read through it to make sure you understand everything. 

void loadWidgets( tgui::Gui& gui )
{
    // Create the background image
    tgui::Picture::Ptr picture(gui);
    picture->load("myBackgroundImage.png");
    picture->setSize(800, 600);

    // Create the username label
    tgui::Label::Ptr labelUsername(gui);
    labelUsername->setText("Username:");
    labelUsername->setPosition(200, 100);

    // Create the password label
    tgui::Label::Ptr labelPassword(gui);
    labelPassword->setText("Password:");
    labelPassword->setPosition(200, 250);

    // Create the username edit box
    tgui::EditBox::Ptr editBoxUsername(gui, "Username");
    editBoxUsername->load("TGUI/widgets/Black.conf");
    editBoxUsername->setSize(400, 40);
    editBoxUsername->setPosition(200, 140);

    // Create the password edit box (we will copy the previously created edit box)
    tgui::EditBox::Ptr editBoxPassword = gui.copy(editBoxUsername, "Password");
    editBoxPassword->setPosition(200, 290);
    editBoxPassword->setPasswordCharacter('*');

    // Create the login button
    tgui::Button::Ptr button(gui);
    button->load("TGUI/widgets/Black.conf");
    button->setSize(260, 60);
    button->setPosition(270, 440);
    button->setText("Login");
}

Previous: Starting with TGUI
Next: Handling callbacks