RadioButtons are named after old-style car radios, which had buttons for switching between channel presets. Because the radio could only be tuned to one station at a time, only one button could be pressed in at a time; if you pressed a new one, the one that was already pressed in would pop back out. That's how these buttons work, too.
Each RadioButton needs a text label and a group. Only one button in a group can be selected at a time. You don't name each group; you just set new RadioButtons to be part of the same group as an existing one. If you create a new one outside of a group, it automatically creates a new group for it to be part of.
#!/usr/bin/gjs const Gio = imports.gi.Gio; const Gtk = imports.gi.Gtk; const Lang = imports.lang;
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.
const RadioButtonExample = new Lang.Class({
Name: 'RadioButton Example',
// Create the application itself
_init: function() {
this.application = new Gtk.Application({
application_id: 'org.example.jsradiobutton',
flags: Gio.ApplicationFlags.FLAGS_NONE
});
// Connect 'activate' and 'startup' signals to the callback functions
this.application.connect('activate', Lang.bind(this, this._onActivate));
this.application.connect('startup', Lang.bind(this, this._onStartup));
},
// Callback function for 'activate' signal presents window when active
_onActivate: function() {
this._window.present();
},
// Callback function for 'startup' signal builds the UI
_onStartup: function() {
this._buildUI ();
},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.
// Build the application's UI
_buildUI: function() {
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
border_width: 20,
title: "Travel Planning"});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.
// Create a stock OK button
this._okButton = new Gtk.Button ({
label: 'gtk-ok',
use_stock: 'true',
halign: Gtk.Align.END });
// Connect the button to the function which handles clicking it
this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));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.
// Create a grid to put the "place" items in
this._places = new Gtk.Grid ();
// Attach the "place" items to the grid
this._places.attach (this._placeLabel, 0, 0, 1, 1);
this._places.attach (this._place1, 0, 1, 1, 1);
this._places.attach (this._place2, 0, 2, 1, 1);
this._places.attach (this._place3, 0, 3, 1, 1);
// Create a grid to put the "thing" items in
this._things = new Gtk.Grid ({ margin_top: 50 });
// Attach the "thing" items to the grid
this._things.attach (this._thingLabel, 0, 0, 1, 1);
this._things.attach (this._thing1, 0, 1, 1, 1);
this._things.attach (this._thing2, 0, 2, 1, 1);
this._things.attach (this._thing3, 0, 3, 1, 1);
// Create a grid to put everything in
this._grid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
valign: Gtk.Align.CENTER,
margin_left: 40,
margin_right: 50 });
// Attach everything to the grid
this._grid.attach (this._places, 0, 0, 1, 1);
this._grid.attach (this._things, 0, 1, 1, 1);
this._grid.attach (this._okButton, 0, 2, 1, 1);
// Add the grid to the window
this._window.add (this._grid);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.
// Show the window and all child widgets
this._window.show_all();
},Finally, we tell the window and everything inside it to become visible when the application is run.
_okClicked: function () {
// Create a popup that shows a silly message
this._travel = new Gtk.MessageDialog ({
transient_for: this._window,
modal: true,
message_type: Gtk.MessageType.OTHER,
buttons: Gtk.ButtonsType.OK,
text: this._messageText() });
// Show the popup
this._travel.show();
// Bind the OK button to the function that closes the popup
this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
},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.
_messageText: function() {
// Create a silly message for the popup depending on what you selected
var stringMessage = "";
if (this._place1.get_active()) {
if (this._thing1.get_active())
stringMessage = "Penguins love the beach, too!";
else if (this._thing2.get_active())
stringMessage = "Make sure to put on that sunscreen!";
else stringMessage = "Are you going to the beach in space?";
}
else if (this._place2.get_active()) {
if (this._thing1.get_active())
stringMessage = "The penguins will take over the moon!";
else if (this._thing2.get_active())
stringMessage = "A lack of sunscreen will be the least of your problems!";
else stringMessage = "You'll probably want a spaceship, too!";
}
else if (this._place3.get_active()) {
if (this._thing1.get_active())
stringMessage = "The penguins will be happy to be back home!";
else if (this._thing2.get_active())
stringMessage = "Antarctic sunbathing may be hazardous to your health!";
else stringMessage = "Try bringing a parka instead!";
}
return stringMessage;
},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.
_clearTravelPopUp: function () {
this._travel.destroy();
}
});This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.
// Run the application let app = new RadioButtonExample (); app.application.run (ARGV);
Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const RadioButtonExample = new Lang.Class({
Name: 'RadioButton Example',
// Create the application itself
_init: function() {
this.application = new Gtk.Application({
application_id: 'org.example.jsradiobutton',
flags: Gio.ApplicationFlags.FLAGS_NONE
});
// Connect 'activate' and 'startup' signals to the callback functions
this.application.connect('activate', Lang.bind(this, this._onActivate));
this.application.connect('startup', Lang.bind(this, this._onStartup));
},
// Callback function for 'activate' signal presents window when active
_onActivate: function() {
this._window.present();
},
// Callback function for 'startup' signal builds the UI
_onStartup: function() {
this._buildUI ();
},
// Build the application's UI
_buildUI: function() {
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
border_width: 20,
title: "Travel Planning"});
// Create a label for the first group of buttons
this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
// Create three radio buttons three different ways
this._place1 = new Gtk.RadioButton ({label: "The Beach"});
this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
this._place2.set_label ("The Moon");
this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
// this._place3.set_active (true);
// Create a label for the second group of buttons
this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
// Create three more radio buttons
this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
// Create a stock OK button
this._okButton = new Gtk.Button ({
label: 'gtk-ok',
use_stock: 'true',
halign: Gtk.Align.END });
// Connect the button to the function which handles clicking it
this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
// Create a grid to put the "place" items in
this._places = new Gtk.Grid ();
// Attach the "place" items to the grid
this._places.attach (this._placeLabel, 0, 0, 1, 1);
this._places.attach (this._place1, 0, 1, 1, 1);
this._places.attach (this._place2, 0, 2, 1, 1);
this._places.attach (this._place3, 0, 3, 1, 1);
// Create a grid to put the "thing" items in
this._things = new Gtk.Grid ({ margin_top: 50 });
// Attach the "thing" items to the grid
this._things.attach (this._thingLabel, 0, 0, 1, 1);
this._things.attach (this._thing1, 0, 1, 1, 1);
this._things.attach (this._thing2, 0, 2, 1, 1);
this._things.attach (this._thing3, 0, 3, 1, 1);
// Create a grid to put everything in
this._grid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
valign: Gtk.Align.CENTER,
margin_left: 40,
margin_right: 50 });
// Attach everything to the grid
this._grid.attach (this._places, 0, 0, 1, 1);
this._grid.attach (this._things, 0, 1, 1, 1);
this._grid.attach (this._okButton, 0, 2, 1, 1);
// Add the grid to the window
this._window.add (this._grid);
// Show the window and all child widgets
this._window.show_all();
},
_okClicked: function () {
// Create a popup that shows a silly message
this._travel = new Gtk.MessageDialog ({
transient_for: this._window,
modal: true,
message_type: Gtk.MessageType.OTHER,
buttons: Gtk.ButtonsType.OK,
text: this._messageText() });
// Show the popup
this._travel.show();
// Bind the OK button to the function that closes the popup
this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
},
_messageText: function() {
// Create a silly message for the popup depending on what you selected
var stringMessage = "";
if (this._place1.get_active()) {
if (this._thing1.get_active())
stringMessage = "Penguins love the beach, too!";
else if (this._thing2.get_active())
stringMessage = "Make sure to put on that sunscreen!";
else stringMessage = "Are you going to the beach in space?";
}
else if (this._place2.get_active()) {
if (this._thing1.get_active())
stringMessage = "The penguins will take over the moon!";
else if (this._thing2.get_active())
stringMessage = "A lack of sunscreen will be the least of your problems!";
else stringMessage = "You'll probably want a spaceship, too!";
}
else if (this._place3.get_active()) {
if (this._thing1.get_active())
stringMessage = "The penguins will be happy to be back home!";
else if (this._thing2.get_active())
stringMessage = "Antarctic sunbathing may be hazardous to your health!";
else stringMessage = "Try bringing a parka instead!";
}
return stringMessage;
},
_clearTravelPopUp: function () {
this._travel.destroy();
}
});
// Run the application
let app = new RadioButtonExample ();
app.application.run (ARGV);
Got a comment? Spotted an error? Found the instructions unclear? Send feedback about this page.