These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.

All the code for this sample goes in the RadioButtonExample class. The above code creates a Gtk.Application for our widgets and window to go in.

The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new Gtk.ApplicationWindow to put all our widgets into.

We use a Gtk.Label to set each group of RadioButtons apart. Nothing will stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know which ones go together you need to organize things accordingly.

Here are three different ways to create RadioButtons. The first is the usual way, where we create a new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the RadioButton's label at the same time.

The first RadioButton in a group is the one that's selected by default. Try uncommenting the last line in this sample code to see how you can set a different one to be the default selection.

Here we create the label for the second group of buttons, and then create them all the same way.

This code creates a Gtk.Button and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.

To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's stock button types.

We use a separate Gtk.Grid to organize each group of radio buttons. This way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually separate the two sets of choices.

After we've organized them, we put them into a third, master Grid, along with the OK button. Then we attach that to the window.

Finally, we tell the window and everything inside it to become visible when the application is run.

When you click OK, a Gtk.MessageDialog appears. This function creates and displays the popup window, then binds its OK button to a function that closes it. What text appears in the popup depends on the _messageText() function, which returns a different value depending on which set of options you chose.

The get_active() method is how we can tell which RadioButton's pressed in. This function returns a different silly message depending on which set of buttons was pressed. Its return value is used as the MessageDialog's text property.

This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.

Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.