# CheckButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
A box which can be checked or unchecked
Mario Blättermann
mario.blaettermann@gmail.com 2011, 2013, 2016, 2018

# CheckButton

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.

# Zu importierende Bibliotheken

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0';

const Gio = imports.gi.Gio; const Gtk = imports.gi.Gtk;

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.

# Entwurf des Anwendungsfensters

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 (); }

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.

// 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"});

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.

# Creating the checkbutton

// 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));

This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.

// Show the window and all child widgets this._window.show_all(); }

This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).

# Function which handles the checkbutton's toggling

_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 ("");

}

};

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.

// Run the application let app = new CheckButtonExample (); app.application.run (ARGV);

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

# Complete code sample

#!/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);

# Weiterführende Dokumentation

Gtk.Application

Gtk.ApplicationWindow

Gtk.CheckButton