Creating a simple form with a button (🟢 Beginner)

How to create a GUI application as simply as possible.

Introduction

This code creates a window that contains a button. When you press the button, a message box appears with the text: Hello, World!.

The code has been reduced to its simplest expression for each framework.

Qt

#include <QApplication>
#include <QFrame>
#include <QMainWindow>
#include <QMessageBox>
#include <QPushButton>

auto main(int argc, char* argv[]) -> int {
  auto application = QApplication {argc, argv};
  
  auto frame = new QFrame {};
  
  auto messageButton = new QPushButton {frame};
  messageButton->move(10, 10);
  messageButton->setText("Click me");
  messageButton->connect(messageButton, &QPushButton::clicked, [&] {
    QMessageBox {QMessageBox::Icon::NoIcon, "", "Hello, World!"}.exec();
  });

  auto mainWindow = new QMainWindow {};
  mainWindow->resize(300, 300);
  mainWindow->setWindowTitle("Hello world (message box)");
  mainWindow->setCentralWidget(frame);
  mainWindow->show();
  
  application.exec();
}

New allocations for the QFrame, the QPushButton and the QMainWindow.
Manual layout management if you want a minimum of control.
The connection of signals/slots that requires either connect with modern syntax or QObject::connect with old macros.

wxWidgets

#include <wx/wx.h>

class Application : public wxApp {
  bool OnInit() override {
    auto mainFrame = new wxFrame {nullptr, wxID_ANY, "Hello World (message box)", wxDefaultPosition, {300, 300}};
    auto panel = new wxPanel {mainFrame, wxID_ANY};
    auto messageButton = new wxButton {panel, wxID_ANY, "Click me", {10, 10}};
    messageButton->Bind(wxEVT_BUTTON, [](wxCommandEvent&) {wxMessageDialog {nullptr, "Hello, World!"}.ShowModal();});
    
    return mainFrame->Show();
  }
};

wxIMPLEMENT_APP(Application);

New allocations for the wxPanel, the wxButton and the wxFrame.
Intermediate panel necessary to be able to position the controls manually.
Verbose syntax to bind the event.

xtd

#include <xtd/xtd>

auto main() -> int {
  auto main_form = form::create("Hello world (message box)");
  auto message_button = button::create(main_form, "&Click me", {10, 10});
  message_button.click += [] {message_box::show("Hello, World!");};
  application::run(main_form);
}

Stack-friendly.
No boilerplate.
With xtd a GUI application is almost written as pseudo-code.

Conclusion

With xtd, even a small GUI program remains simple and modern, while with wxWidgets or Qt, you have to fight with the heap and parenting.
xtd allows you to focus on what you want to do, not on memory management, intermediate panels or initialization macros.
With xtd you write ~7 lines of clean, stack-friendly code, while with wxWidgets it’s double, and with Qt it’s almost triple

Did you know?

xtd does not care about how you create your control or object, whether on the stack, smart pointer or raw pointer, xtd only manages references.

If you accidentally destroy a control contained in a form, a container or simply a control, there will be no crash, the control will simply be removed from the parent control.

To go further

The code presented above (ultra-minimalist) is deliberately simplified to show the contrast of the different frameworks but in practice xtd remains also concise with the RAII model. The following example shows how to write an xtd GUI application based on the RAII programming idiom:

#include <xtd/xtd>

class main_form : public form {
public:
  main_form() {
    text("Hello world (message box)");
    
    message_button.click += [] {
      message_box::show("Hello, World!");
    };
  }
  
private:
  button message_button = button::create(*this, "&Click me", {10, 10});
};

auto main() -> int {
  application::run(main_form {});
}