Skip to main content

Writing GUI application

In this section​

This tutorial describes the basic steps that you must complete to create and run a GUI application from the command line.

Create GUI​

The following procedures describe the basic steps that you must complete to create and run a GUI application from the command line.

To create the form​

  1. Create form1.cpp file in your project folder and type the following include file and using statements:
#include <xtd/xtd>

using namespace xtd;
using namespace xtd::forms;
  1. Declare a class named form1 that inherits from the form class.
class form1 : public form
  1. Create a default constructor for form1.

You will add more code to the constructor in a subsequent procedure.

  public:
    form1() {}
  1. Add a main method.

Create an instance of the form1 and run it.

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

To create the CMakeLists.txt​

  1. Create CMakeLists.txt file in your project folder and add the cmake minimum version required.
cmake_minimum_required(VERSION 3.20)
  1. Set the project name and add xtd package.
Project(form1)
find_package(xtd REQUIRED)
  1. Add build rules for the project.
add_sources(form1.cpp)
target_type(GUI_APPLICATION)

To compile and run the application​

  1. At the Terminal, navigate to the directory you created the form1.cpp class and CMakeLists.txt file.

  2. Compile the form.

xtdc build
  1. At the command prompt, type:
xtdc run

Adding a Control and Handling an Event​

The previous procedure steps demonstrated how to just create a basic GUI that compiles and runs. The next procedure will show you how to create and add a control to the form, and handle an event for the control.

In addition to understanding how to create GUI applications, you should understand event-based programming and how to handle user input.

To declare a button control and handle its click event​

  1. Declare a button control named button1.
  2. In the constructor, create the button and set its size, location and text properties.
  3. Add the button to the form.

The following code example demonstrates how to declare the button control.

  private:
    button button1;

  public:
    Form1() {
      button1.size(drawing::size {40, 40});
      button1.location(drawing::point {30, 30});
      button1.text("Click\nme");
      controls().push_back(button1);
      button1.click += event_handler {*this, &form1::button1_click};
    }
  1. Create a method to handle the click event for the button.
  2. In the click event handler, display a message_box with the message, "Hello World".

The following code example demonstrates how to handle the button control's click event.

  private:
    void button1_click(object& sender, const event_args& e) {
      message_box::show("Hello World");
    }
  1. Associate the click event with the method you created.

The following code example demonstrates how to associate the event with the method.

button1.click += event_handler {*this, &form1::button1_click};
  1. Compile and run the application.
xtdc run

Example​

Following code example is the complete example from the previous tutorial.

form1.cpp:

#include <xtd/xtd.forms>

using namespace xtd;
using namespace xtd::forms;

class form1 : public form {  
public:
  form1() {
    button1.size(drawing::size {40, 40});
    button1.location(drawing::point {30, 30});
    button1.text("Click\nme");
    controls().push_back(button1);
    button1.click += event_handler {*this, &form1::button1_click};
  }

private:
  button button1;

  void button1_click(object& sender, const event_args& e) {
    message_box::show("Hello World");
  }
};

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

CMakeLists.txt:

cmake_minimum_required(VERSION 3.20)

project(form1)
find_package(xtd REQUIRED)
add_sources(form1.cpp)
target_type(GUI_APPLICATION)

See also​