# Widgets in GTK+

For a list of all widgets in GTK+ go hereopen in new window;

# Signals

Remember from 1.3, GTK+ is event-driven. When input is received by any GTK+ widget an action may be performed. Signals allow us to create custom actions. GTK+ widgets communicate input by sending out a signal which contains data about that input. You can listen for these signals and perform custom actions.

A standard example of listening to a signal would be:

button.connect('clicked', () => {
    log('The button was clicked');
});
1
2
3

In this example we call the connect() function on an already created button (we'll learn how to create buttons later). connect() takes two arguments the signal name - in this case 'clicked' - and a callback. We're using an arrow functionopen in new window to provide the callback. Every time this button is clicked a message will appear in the log saying 'The button was clicked'.

*Concepts utilized in this example: Logging in GJS.

# Widget Properties

In GTK+ every widget has properties. A Gtk.Button has a label property representing the text inside the button, a Gtk.Image has a iconName property representing the icon it is showing. You can find a list of the properties of any widget in the Properties section of the widget's page on DevDocsopen in new window.

# Getting Properties

To access a property of a widget retrieve the value at the the property name in lowerCamelCase in the widget object.

A few simple examples:

let iconName = image.iconName;
let buttonText = button.text;
1
2

image and button are instances of Gtk.Image and Gtk.Button respectively

# Setting Properties

To set the property of a widget use the provided setter function if available and, if not, set the value on the widget object.

A few simple examples:

button.set_label('Hello!');

/* or */

widget.someProp = 10;
1
2
3
4
5

button is an instance of Gtk.Button. widget represents some widget with the property someProp which does not have a set_some_prop() function.

Last Updated: 4/11/2021, 5:57:22 AM