GtkToggleButton Glade GTK C Program Tutorial

This GtkToggleButton Glade GTK C program tutorial shows how to use a toggle button and read its state using C code. The user interface is laid out using the Glade user interface designer. GTK+ 3 and the C programming language is used in the project example.

A toggle button differs from a plain button in that when it is clicked it remembers its state. When the button is clicked for the first time, it changes from an inactive state to and active state. When the button is clicked again, it changes from active, back to inactive. In other words, it toggles state whenever it is clicked.

The image below shows the simple application built in this tutorial. On the left of the image is the application window with toggle button inactive and active. On the right is the toggle button widget as it appears in Glade.

GtkToggleButton Glade GTK C Program
GtkToggleButton Glade GTK C Program

How the GtkToggleButton Application is Constructed

This tutorial is based on the following previous tutorials.

See the GTK Glade C Programming index for a series of tutorials that show how to get started with Glade GTK+ 3 C programming.

In the tutorial steps that follow, the toggle button application is created from the template files. Glade is used to lay out the GUI. C code is then written to create the functionality of the application. In the complete application, if the user clicks the toggle button, the text label at the top of the application displays the state of the button as active. When the user clicks the toggle button again, the state of the button is shown as inactive.

GtkToggleButton Glade GTK C Program Tutorial Steps

Before starting, create a set of template files to use as a starting point. This will give you a make file, a C source file and a Glade file.

1. Name the Project

Open the make file and name the project toggle_button at the top of the file as shown below.

The complete make file looks as follows.

makefile:

 

2. Build the User Interface in Glade

Open the window_main.glade file found in the glade subdirectory of the project with Glade user interface designer for editing. The steps that follow show how to place the three widgets used in the project in Glade. They can be seen in the image below as they appear in the right pane of Glade.

Widgets Place in Glade for the Toggle Button Application
Widgets Place in Glade for the Toggle Button Application

2.1 Place a Box

Place a box container of type GtkBox in the main window (box1 in the above image. When placing the box, change the number of items from to 2 (rather than the default 3). Leave the default orientation of the box widget, which is Vertical.

Spacing for the box widget can be changed to 4 in the Spacing field under the General tab in Glade. Under the Common tab, all four margins can be changed to 3 (top, bottom, left and right margins under the Margins heading). Adding this spacing gives the widgets a better appearance in the application window.

2.2 Place a Label

Place a label widget in the top open slot of the box widget that was placed in the previous step. Change the ID of the box in Glade to lbl_button_state under the General tab. Change the Label field of the label to Button State: Inactive also under the General tab in Glade.

2.3 Place a Toggle Button

Place a toggle button in the open slot of the box widget. The toggle button is found under Control and Display in the left pane in Glade and is shown in the image at the top of this tutorial.

Change the ID of the button to togglebuttonState and the label of the button to Click to Change Button State under the General tab in Glade.

Under the Signals tab in Glade, add a handler name of on_togglebuttonState_toggled next to toggled. Click next to toggled under User data and select lbl_button_state in the dialog box that pops up. This passes a pointer to the label widget to the toggle button callback function in the C code. This is explained in the tutorial on getting a pointer to a widget in a callback function.

After making the above changes, they should appear as follows in Glade.

Adding a Toggle Button Handler in Glade
Adding a Toggle Button Handler in Glade

The complete listing of the Glade file from the glade subdirectory is shown below.

window_main.glade:

 

3. Write the Application Code in C

Edit main.c found in the src subdirectory as follows.

main.c:

 

4. Build and Run the Toggle Button Application

After following the above tutorial steps to create the application, open the project directory in a command line terminal window and enter make to build the project. If the build was a success, the application can be run by entering ./toggle_button at the command prompt.

If the project was constructed correctly, clicking the toggle button in the application will show the state of this button in the text label as shown in the image at the top of this page.

How the GtkToggleButton Application Works

When the toggle button is clicked, on_togglebuttonState_toggled() is called. This is the callback or handler function for the button that was edited in Glade. Because the user data that is passed to this function was set to be a pointer to the label in glade, the text of this label can be changed in this function.

In the toggle button handler, gtk_toggle_button_get_active() is used to read the state of the toggle button and change the text of the top label accordingly.

See the documentation for the GtkToggleButton widget for more information on this widget.

 

Leave a Reply

Your email address will not be published. Required fields are marked *