Hello World

This Hello World example covers the very basics of using SFGUI. Some important things are shown that you should be aware of.

Initializing SFGUI

Generally SFGUI pays a lot of attention to RAII (Resource Acquisition Is Initialization), however SFML's internals require you to create one sfg::SFGUI object in your program. Therefore you should begin your programs with something like this:

int main() {
  sfg::SFGUI sfgui;
}

It doesn't really matter where you create the object, however it's important that you do it before using SFGUI and that the object stays alive until you don't use SFGUI anymore.

The sfg::SFGUI class basically initializes SFGUI when it's being constructed and does some clean-up work when it's being destroyed. Do not create the object globally!

Creating a button

For this simple example we're going to create a button with caption "Hello" that will change to "World" when the button is clicked.

auto button = sfg::Button::Create( "Hello" );

Registering a callback

At first the callback is created that will change the button's caption. Then we'll connect the click signal of the button that will call the callback whenever the user clicks the button.

void OnButtonClick() {
button->SetLabel( "World" );
}

Connecting the signal:

button->GetSignal( sfg::Button::OnLeftClick ).Connect(
std::bind( &OnButtonClick )
);

Don't know what std::bind does? Read up on it!

Creating a desktop and window

To finally render the button, we will add it to a window, and the window to a desktop (which is like a workspace).

At first the window:

auto window = sfg::Window::Create();
window->SetTitle( "Hello World example" );
window->Add( button );

Add the window to a new desktop:

sfg::Desktop desktop;
desktop.Add( window );

Rendering and event delegation

The last step is telling SFGUI to render the GUI and delegating SFML events to SFGUI. We will simply create a new SFML window and write a little main loop that gives SFML events to SFGUI.

sf::VideoMode video_mode( 800, 600 );
sf::RenderWindow render_window( video_mode, "Hello World example" );
sf::Event event;

while( render_window.isOpen() ) {
  while( render_window.pollEvent( event ) ) {
    desktop.HandleEvent( event );

    if( event.type == sf::Event::Closed ) {
      render_window.close();
    }
  }

  desktop.Update( 1.0f );

  render_window.clear();
  sfgui.Display( render_window );
  render_window.display();
}

Two things are important to understand here: The desktop.Update( 1.0f ) call updates the GUI for a specific timeslice (in this case: 1 second). You'd normally use a timer to count how many time passed since the last call. The second thing is the sfgui.Display( render_window ) call: sfgui is simply the sfg::SFGUI object we have created before. It's used to finally render all the widgets to SFML's window.

Full source code

The example on this page is not complete. We decided to start with something simple that shows the very basics instead of a full example that'd need a lot more of boilerplate code.

If you're interested in a full example that you can also compile, take a look at the Hello World example in the Git repository; it's very similar to this example.