Create your first GUI in Python with Glade and GTK+

Python is an accessible language that is perfect for data analysis and web development. But it's also a great choice for GUI application development. And GTK+ and Glade help simplify the process of creating cross-platform apps even more.

GTK+ and Glade Interface Designer for Python developers

GTK+ (GIMP Toolkit) and Glade Interface Designer are a great combination for Python developers who want to create beautiful and intuitive graphical interfaces for users.

GTK+ is a cross-platform toolkit that you can use for GUI development. It is compatible with many operating systems, including Linux, Windows, and macOS.

Glade Interface Designer, a companion tool to GTK+, allows you to design GUIs without having to write layout code. You can use it to create GUIs in a WYSIWYG environment in just a few clicks with simple drag and drop functions.

Set up Python environment for GTK+ and Glade development

Setting up your environment is an important first step to ensuring a smooth and efficient workflow.

1. Install Python

Start by making sure you have Python installed on your system. You will see Python 3 code in the examples you read because it provides better support and integration for GTK+ and Glade. For Linux and macOS, Python is usually pre-installed.

Windows users can download Python from the official Python website.

2. Install GTK+

You can install GTK+ using the package manager.

For Ubuntu and Debian-based Linux systems, use:

sudo apt-get install libgtk-3-dev

 For Fedora and similar distributions:

sudo dnf install gtk3-devel

On macOS, use Homebrew:

brew install gtk+3

Windows users can download GTK+ from the official GTK download page. But if you have MSYS2 installed, you can open the MSYS2 command line and use this command:

pacman -S mingw-w64-x86_64-python-gobject

3. Install Glade

You can use the command line to install Glade.

For Ubuntu and Debian-based Linux distributions:

sudo apt-get install glade

On Fedora:

sudo dnf install glade

macOS users can use Homebrew:

brew install glade

Windows users can use the following command with MSYS2:

pacman -S mingw-w64-x86_64-glade

4. Python bindings for GTK+

Install PyGObject to integrate GTK+ with Python. The command you will use for this is:

pip install PyGObject

If an error like "Building wheel for pycairo (pyproject.toml) did not run" occurs during the installation of PyGObject, you will also need to install the cairo package.

For Ubuntu and Debian-based Linux distributions:

sudo apt-get install libcairo2-dev

With Fedora:

sudo yum install cairo-devel

On macOS:

brew install pygobject3

5. Set up virtual environment (optional)

You should use a virtual environment for your Python projects. This isolates your project dependencies. Create and activate a virtual environment on Linux using the following terminal commands:

python -m venv myenv source myenv/bin/activate

On Windows use:

python -m venv myenv myenvScriptsactivate

On macOS, to ensure that the virtual environment can access the installation packages, use:

python -m venv --system-site-packages myenv source myenv/bin/activate

6. Verify installation

To verify that GTK+ and Glade are installed, create a simple Python script to import GTK:

import gi gi.require_version("Gtk", "3.0") from gi.repository import Gtk print("GTK+ version:", Gtk.get_major_version(), Gtk.get_minor_version())

When you run this script, it will output the installed version of GTK+. If all goes well, you have your development environment set up.

 

Create a simple GUI application with Glade Interface Designer and Python

You can design your GUI application in Glade Interface Designer and export the layout as a project file. You can then access that project file from your Python code.

Design GUIs with Glade

Glade's drag-and-drop interface makes it easy to focus on design without getting bogged down in basic code. Start Glade from the application menu or system command line with this command:

glade

You will see the Glade interface where you can start creating your GUI layout.

The Create New Project button at the top left provides a blank canvas for your GUI design. Glade offers a variety of widgets in the top bar, including buttons, text inputs, and labels. Drag these widgets onto the canvas to start styling your GUI. You can resize and position the widgets according to your design needs.

First, select the GtkWindow widget from the Toplevels menu:

On the General page on the right sidebar of Glade, you will see an ID option. This ID is the unique name of the widget you added. In this example, assign the ID myMainWindow to the GtkWindow you added.

Now you can add widgets to the main window you created. Go to Containers in the top bar, select the GtkBox widget and drag it to your workspace. Then give it an ID, myMainBox.

 After adding a GtkBox widget, you will see various options on the right side of the workspace dedicated to that widget. You can edit your entire design here without writing any code.

Next, add the Control widget to your design. To do so, go to Control in the top bar, select GtkButton for example, and drag it anywhere in the GtkBox. Give it an ID, myButton. If you want, you can also change the button text using the General tab in the right panel.

GtkButton is a clickable widget, so you can define a Python handler for it and write appropriate code later. Go to the Signals tab in the right menu and assign a handler to the clicked signal. For this example, let's call it on_button_clicked.

Now, you can save your GUI design as a project file. Save the file as myDesign.glade.

Use Glade design file from Python code

Create the app.py file in the same directory as your myDesign.glade file. Paste the following code into this file:

import gi gi.require_version("Gtk", "3.0") from gi.repository import Gtk from gi.repository import Gdk class MyApp: def __init__(self): # Load the Glade file to construct the GUI self.builder = Gtk. Builder() self.builder.add_from_file("myDesign.glade") # Retrieve the main window from Glade and set up the close event self.window = self.builder.get_object("myMainWindow") self.window.connect("destroy ", Gtk.main_quit) # Retrieve the button from Glade and connect the click event self.button = self.builder.get_object("myButton") self.button.connect("clicked", self.on_button_clicked) # Variable to toggle the background color self.color_toggle = False def on_button_clicked(self, widget): # Click the button and the background color will change color = "#FF0000" if self.color_toggle else "#00FF00" self.window.modify_bg(Gtk.StateType. NORMAL, Gdk.color_parse(color)) self.color_toggle = not self.color_toggle def run(self): self.window.show_all() Gtk.main() if __name__ == "__main__": app = MyApp() app. run()

 This code will change the background color every time you click the button. Notice the calls to self.builder.get_object() pass the IDs of the widgets you defined in the Glade.

Run your Python script with this command to see the results:

python3 app.py