Thursday, May 14, 2020

Python GUI tutorial using GTK and Glade


You will need four pieces of software installed:
  • Python 3.8
  • GTK 3
  • Glade 3.22.2
  • Text editor or IDE for editing Python code; I will be using Visual Studio 2019.

Python is the interpreter for running Python code.  GTK is one of several libraries that are available for making GUI apps in Python.  Glade is the editor for visually designing the GUIs for use in GTK.

Download the executable from here and install it.
Run the console from the Start Menu, MSYS2->MSYS2 MinGW 64-bit.
Type: pacman -S mingw-w64-x86_64-gtk3
Type: pacman -S mingw-w64-x86_64-glade
Type: pacman -S mingw-w64-x86_64-python3-gobject



We will build a simple GUI application that has 3 things:
  1. A text entry control to accept input from the user.
  2. A label.
  3. A button that will change the label text to that from the text entry control when clicked.
Launch the MSYS2 MinGW 64-bit console and type glade to start the visual designer application for GTK.
Click the icon circled in red to start a new project in Glade.
Click TopLevels->GtkWindow.  This will create a normal application window.
Click Containers->GtkBox, then click inside the gray GtkWindow that was created in the last step.  This container by default has three items so no changes are necessary.
Click Control->GtkEntry, then click inside the top row of the GtkBox that was created in the last step.  Change the ID of the control to txtUserInput.
Click Control->GtkButton, then click inside the middle row of the GtkBox that was created in step 4.  Change the ID of the control to btnChangeLabelText.
Click Display-GtkLabel, then click inside the bottom row of the GtkBox that was created in step 4.  Change the ID of the control to lblDisplayEntryText.
The last step is connecting a handler to the clicked signal of the GtkButton control.  The handler is the name of the function that is called when that signal is executed, in this case it is when the button is clicked.  Click on the button in the designer or in the far left column, then click Signals in the top-right, then double click in the handler column for the clicked signal.  Type change_label then press enter.
Click the GtkWindow in the column at the far left.  Change the ID of the window to main_form.
Now save the .glade file by clicking Save in the top-right, then save it in a new folder for your project where you will also put the Python script that you will be creating soon.
NOTE:  You can use whatever IDE or text editor you desire for writing the Python code.  You just have to make sure you execute your Python script using the Python exe inside the MinGW\Bin folder otherwise it will fail to locate the GTK files.
I will be using Visual Studio 2019.

This is a basic script.
The first three lines of code imports the GTK 3.0 module.  Skipping over the class declaration to the point of execution now.  We create a variable named builder to hold the Gtk Builder class.  We then call the add_from_file function and supply the name of the glade file as the only parameter.  The next line of code tells GTK which class contains the signal functions, our class is named Handler so that is the parameter that is supplied to the connect_signals method of the builder object.  The next line of code creates a variable named window to obtain our GtkWindow object.  The next line of code executes the show_all function to make the window visible.  The last line starts the main GTK loop until the main_quit function is called.

The Handler class contains our only signal function, change_label, that is executed when the user clicks the GtkButton we created.  Functions for signals must contain at least two parameters, the first being self which represents the instance of the class, and the second being the control object which triggered the signal.  We create a variable named the_label to hold the GtkLabel control of the window which we obtain with the get_object function passing in the ID of the control as the sole parameter.  We also do the same with the GtkEntry control.  We create a variable named its_text to store a string representing the text from the GtkEntry control.  Then we call the set_text function of the GtkLabel control and pass in the string we stores as the sole parameter.

No comments:

Post a Comment