GtkComboBoxText Glade GTK C Program

GtkComboBoxText Glade GTK C program shows how to use a GtkComboBoxText widget as a drop-down text selection box. Get the selected text and selected item number from a user in this GTK+  3 text combo box tutorial. The GtkComboBoxText widget contains a list of text items that are selectable as a drop-down list.

The image below shows the application built in this tutorial. Glade is used to lay out the application GUI. When the button is clicked by a user the selected text item number and selected text is read from the GtkComboBoxText widget and displayed in two labels in the application.

GtkComboBoxText Glade GTK C Program
GtkComboBoxText Glade GTK C Program

In addition to showing how to use the GtkComboBoxText widget, the application also demonstrates how to create dynamic strings in C using the GString object from the GLib library.

How to Get Text from a Drop-Down Box in GTK

In GTK there are two main drop-down box widgets, namely GtkComboBox and GtkComboBoxText. GtkComboBoxText is easier to use and is actually derived from GtkComboBox. In the widget hierarchy of GTK, GtkComboBox is the parent of GtkComboBoxText. Tutorial steps follow that show how to create an application with a GtkComboBoxText widget that allows a user to select text items from a drop-down list.

GtkComboBoxText Glade GTK C Program Tutorial

Follow the Glade GTK+ 3 programming tutorials to get up to speed with GTK+ 3 Glade C programming.

This tutorial is based on the following previous tutorials:

Follow these tutorial steps to create the GtkComboBoxText application shown in the above image.

1. Create a New GTK Glade C Project

Create a new GTK+ 3 application by using the GTK+ 3 Glade C programming template files. Using the template files, you will have a make file, a C source code directory and a glade file directory. Save the template files and sub-directories to a directory called combo_box_text.

Open the make file and change the name of the project to combo_box_text as follows.

The complete make file looks as follows.

makefile:

 

2. Build the User Interface in Glade

Open the windows_main.glade file in the Glade user interface designer. This file is in the glade directory of the project if you have used the template files to create the project.

The application consists of the following widgets placed using the Glade user interface designer.

Widgets Placed in the GtkComboBoxText User Interface
Widgets Placed in the GtkComboBoxText User Interface

Lay out the application window in Glade as follows.

GtkComboBoxText Application Layout in Glade
GtkComboBoxText Application Layout in Glade

Create the above layout using the following steps.

2.1 Place a Box

In Glade, place a Box widget in the main windows (box1 of type GtkBox in the top image above). Leave the default settings of the box at 3 items and vertical orientation. Change the box spacing to 7 under the General tab in Glade. Change all four margins (top, bottom, left, right) to 3 under the Common tab in Glade.

2.2 Place a Combo Box Text

In the top slot of box1, place a Combo Box Text in Glade. This widget is found in the left pane of Glade under Control and Display as shown below.

Place a Combo Box Text Widget in Glade
Place a Combo Box Text Widget in Glade

Change the ID of the box to comboboxtext_options under the General tab. Add the following text to the combo box using the list of items under the general tab as shown below.

Select option …
Option 1
Option 2
Option 3

To add the text, click the text <Type Here> under the List of items: box in Glade. The final result should look as follows.

Adding Text to a GtkComboBoxText Widget in Glade
Adding Text to a GtkComboBoxText Widget in Glade

Under the General tab, change Active item from -1 to 0. This makes sure that the first item in the list is selected by default.

2.3 Place a Second Box

In the next open slot of the first Box widget, place a second box widget (box2 in the top image above). Change the number of items property of the box to 2. Change the orientation under the General tab to Horizontal.

2.4 Place Two Labels

Two text labels go into the second box that was placed in the previous step. Place one Label in the left slot of box two. Place a second Label in the right slot of box2.

Change the ID of the left label to lbl_sel_num. Change the Label of the left label to Selection Number.

Change the ID of the right label to lbl_sel_text. Change the Label of the right label to Selection Text.

2.5 Place a Button

Place a Button in the bottom slot of box1. Change the ID of the button to btn_show_option. Change the label of the button to Show Option.

With the button selected in Glade, click the Signals tab. Click next to the clicked signal under Handler and add a handler called on_btn_show_option_clicked. This looks as follows in Glade.

Text Combo Box Application Button Handler in Glade
Text Combo Box Application Button Handler in Glade

Below is the listing of the complete Glade window for the application.

window_main.glade:

 

3. Write the Application Code in C

Finally edit main.c in the src directory by adding the following code.

main.c:

4. Build and Run the Application

Open a command line terminal window in the project’s directory. Enter make at the command prompt to build the project.

Run the project from the command prompt by typing ./combo_box_text and then hitting the Enter key.

Select one of the text items in the drop-down combo box text widget and then click the button at the bottom of the application window. If the project was created correctly, the item number and item text will be displayed in the two label widgets of the application.

How the GtkComboBoxText C Code Works

In main(), pointers to the two label widgets and the combo box text widget are saved in the app_widgets structure called widgets. By passing widgets as the second parameter to gtk_builder_connect_signals(), a pointer to this structure is made available to the button click handler on_btn_show_option_clicked(). This handler is called whenever the application user clicks the button widget.

Getting the Selected Item Number from a GtkComboBoxText Widget

In the button clicked handler, gtk_combo_box_get_active() is used to get the number of the selected item from the GtkComboBoxText widget. If the number that is returned is -1, this means that no item is selected. Because we changed the active item number to 0 in Glade, the first item in the list will be selected by default and will return 0 if the user does not select a different option in the drop down list.

In summary, the currently selected item can be read by the application programmatically using gtk_combo_box_get_active(). If no item is selected, the number returned will be -1. Otherwise the currently selected item number will be returned, starting at 0 for the first item in the list.

A GString object from the GLib Strings library is used in the application to create a dynamically sizing string. The g_string_printf() function is used to place the number of the currently selected drop down list item into the dynamic GString. This string is then placed in the left label of the application using gtk_label_set_text(). Dynamic memory allocated to the GString object is then freed by calling g_string_free().

Getting the Selected Text from a GtkComboBoxText Widget

Text of the currently selected item in the GtkComboBoxText widget is obtained by calling gtk_combo_box_text_get_active_text() which returns a pointer to the text from the widget. If no text was selected in the drop down list, NULL will be returned. If text was selected, a pointer to dynamically allocated memory containing the text will be returned.

In the application, the selected text from the combo box text widget is copied to the right text label using gtk_label_set_text(). Because the text from the combo box text widget is placed in dynamically allocated memory, the memory must be freed by calling g_free().

Conclusion

This tutorial has showed how to get both the selected item number and the text from a GtkComboBoxText widget. You may need only one or the other in your own application, so modify the code as needed.

 

Leave a Reply

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