Developing a Simple Graphical User Interface Program in C

In modern application development, users require an intuitive and friendly graphical interface to better interact with programs. Although C is typically used for system-level programming, we can also create simple graphical user interface (GUI) programs with the help of certain libraries. In this article, we will use the GTK+ library to implement a basic window application.

Environment Setup

Before we begin, ensure that you have installed the following tools and libraries:

C Language Compiler: such as GCC
GTK+ Development Package: On Linux systems, you can install it via the package manager, for example, sudo apt-get install libgtk-3-dev.
Text Editor or IDE: Choose your preferred code editing tool, such as Vim, Emacs, Code::Blocks, etc.

Creating Project Structure

Create a new folder to serve as our project directory:

mkdir simple_gui
cd simple_gui

Then, create a file named main.c in that directory, where we will write our code.

Writing Code

Enter the following code in the main.c file:

#include <gtk/gtk.h>
// Callback function that executes when the button is clicked
void on_button_clicked(GtkWidget *widget, gpointer data) {
    g_print("Button clicked!\n");
}
// Main function
int main(int argc, char *argv[]) {
    GtkWidget *window; // Main window widget
    GtkWidget *button; // Button widget

    // Initialize GTK+
    gtk_init(&argc, &argv);

    // Create main window and set properties
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Simple GUI");
    gtk_window_set_default_size(GTK_WINDOW(window), 300, 200);

    // Signal connection: exit application when window is closed
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    // Create button and connect signal handler
    button = gtk_button_new_with_label("Click me!");
    // Add button to main window
    gtk_container_add(GTK_CONTAINER(window), button);
    // Connect button click event to our callback function
    g_signal_connect(button, "clicked", G_CALLBACK(on_button_clicked), NULL);

    // Show all widgets
    gtk_widget_show_all(window);
    // Start GTK+ main loop
    gtk_main();
    return 0;
}

Code Explanation

Including Header Files: We include gtk/gtk.h, which is the core header file for GTK+.
Callback Function: Defines a callback function that handles the button click event, printing a message to the console.
Initializing GTK+: Calls gtk_init() to initialize the GTK library, a necessary step to start any GTK application.
Creating the Main Window:

We use the gtk_window_new() function to create a new top-level window and set its title and default size.
When the window is closed, we connect to the exit program callback method through the signal-slot mechanism.

Creating and Adding the Button:

We create a new button with the label “Click me!” and add it to the main window.
We connect the button click event to our earlier callback function, so that each time the button is clicked, it triggers the output message.

Showing All Widgets and Starting the Main Loop:

We use gtk_widget_show_all() to display all controls added to the window, then call gtk_main() to start the GTK event loop, keeping the application running.

Compiling and Running the Program

Open a terminal, navigate to your project directory, and use the following command to compile your code:

gcc main.c -o simple_gui $(pkg-config --cflags --libs gtk+-3.0)

If there are no errors, you should see an executable file named simple_gui. Next, you can run this program with the following command:

./simple_gui

Now, a new window with a “Click me!” button will appear. Try clicking it to see the feedback message in the console.

Conclusion

In this article, we learned how to develop a simple graphical user interface program using C and the GTK+ library. We covered everything from environment setup, coding implementation, to the final running effect. This is just a small adventure in the world of GUIs, and I hope it inspires readers to further explore more complex features, such as various controls, layout management, or data persistence!

Make sure to familiarize yourself with the relevant documentation to delve deeper into more features, making your future GUI applications richer and more colorful.