This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.
A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.
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 CheckButtonExample 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.
If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.
Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.
#!/usr/bin/gjs
imports.gi.versions.Gtk = '3.0';
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
class CheckButtonExample {
// Create the application itself
constructor() {
this.application = new Gtk.Application({
application_id: 'org.example.jscheckbutton',
flags: Gio.ApplicationFlags.FLAGS_NONE
});
// Connect 'activate' and 'startup' signals to the callback functions
this.application.connect('activate', this._onActivate.bind(this));
this.application.connect('startup', this._onStartup.bind(this));
}
// Callback function for 'activate' signal presents window when active
_onActivate() {
this._window.present();
}
// Callback function for 'startup' signal builds the UI
_onStartup() {
this._buildUI();
}
// Build the application's UI
_buildUI() {
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
default_height: 100,
default_width: 300,
border_width: 10,
title: "CheckButton Example"});
// Create the check button
this._button = new Gtk.CheckButton ({label: "Show Title"});
this._window.add (this._button);
// Have the check button be checked by default
this._button.set_active (true);
// Connect the button to a function that does something when it's toggled
this._button.connect ("toggled", this._toggledCB.bind(this));
// Show the window and all child widgets
this._window.show_all();
}
_toggledCB() {
// Make the window title appear or disappear when the checkbox is toggled
if (this._button.get_active() == true)
this._window.set_title ("CheckButton Example");
else
this._window.set_title ("");
}
};
// Run the application
let app = new CheckButtonExample ();
app.application.run (ARGV);
Gtk.Application
Gtk.ApplicationWindow
Gtk.CheckButton