# CheckButton (Javascript)

Taryn Fox
jewelfox@fursona.net 2012
En ruta som kan vara ikryssad eller inte
Sebastian Rasmussen
sebras@gmail.com 2019
Anders Jonsson
anders.jonsson@norsjovallen.se 2021

# CheckButton

Detta program har en CheckButton. huruvida rutan är ikryssad bestämmer huruvida fönstrets namnlist visar något.

En CheckButton skickar signalen ”toggled” när den kryssas i eller kryssas ur. Då den är ikryssad är egenskapen ”active” true (sant). Då den inte är det så har ”active” värdet false (falskt).

# Bibliotek att importera

#!/usr/bin/gjs

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

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

Detta är biblioteken som vi behöver importera för att detta program ska köras. Kom ihåg att raden som säger till GNOME att vi använder Gjs alltid behöver vara först.

# Skapa programfönstret

class CheckButtonExample { // Skapa programmet i sig constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

// Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

// Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras _onActivate() { this._window.present(); }

// Återanropsfunktion för ”startup”-signal bygger användargränssnittet _onStartup() { this._buildUI (); }

All kod för detta exempel hamnar i klassen CheckButtonExample. Koden ovan skapar en Gtk.Application att ha våra komponenter och fönstret i.

// Bygg programmets användargränssnitt _buildUI() {

// Skapa programfönstret this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 100, default_width: 300, border_width: 10, title: "CheckButton-exempel"});

_buildUI-funktionen är var vi stoppar all kod för att skapa programmets användargränssnitt. Det första steget är att skapa ett nytt Gtk.ApplicationWindow att stoppa alla våra komponenter i.

# Skapa kryssrutan

// Skapa kryssrutan this._button = new Gtk.CheckButton ({label: "Visa titel"}); this._window.add (this._button);

// Låt kryssrutan vara ikryssad som standard this._button.set_active (true);

// Anslut knappen till en funktion som gör något då den växlar tillstånd this._button.connect ("toggled", this._toggledCB.bind(this));

Denna kod skapar själva kryssrutan. Etiketten intill kryssrutan skapas genom att ge kryssrutan egenskapen ”label” och tilldela den ett strängvärde. Då denna kryssruta växlar huruvida fönstertiteln är på eller av, och fönstertiteln kommer vara på till en början, så vill vi att rutan ska vara ikryssad som standard. Närhelst användaren kryssar i eller kryssar ur rutan anropar vi funktionen _toggledCB.

// Visa fönstret och alla barnkomponenter this._window.show_all(); }

Denna kod slutför skapandet av användargränssnittet, genom att säga till fönstret att visa sig själv och alla barnkomponenter (vilket bara är kryssrutan i det här fallet).

# Funktion som hanterar kryssrutans växlande av tillstånd

_toggledCB() {

// Få fönstertiteln att visas eller försvinna då kryssrutan växlar tillstånd if (this._button.get_active() == true) this._window.set_title ("CheckButton-exempel"); else this._window.set_title ("");

}

};

Om kryssrutan växlas från på till av vill vi att fönstertiteln ska försvinna. Om den växlas från av till på vill vi att den ska dyka upp igen. Vi kan se vilken väg den växlades genom att testa för att se om den är aktiv (ikryssad) eller inte efteråt. En enkel if / else-sats som anropar kryssrutans get_active()-metod kommer fungera för detta.

// Kör programmet let app = new CheckButtonExample (); app.application.run (ARGV);

Slutligen skapar vi en ny instans av den slutförda CheckButtonExample-klassen, och startar programmet.

# Fullständigt kodexempel

#!/usr/bin/gjs

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

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

class CheckButtonExample {

// Skapa programmet i sig constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

// Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

// Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras _onActivate() { this._window.present(); }

// Återanropsfunktion för ”startup”-signal bygger användargränssnittet _onStartup() { this._buildUI(); }

// Bygg programmets användargränssnitt _buildUI() {

// Skapa programfönstret this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 100, default_width: 300, border_width: 10, title: "CheckButton-exempel"});

// Skapa kryssrutan this._button = new Gtk.CheckButton ({label: "Visa titel"}); this._window.add (this._button);

// Låt kryssrutan vara ikryssad som standard this._button.set_active (true);

// Anslut kryssrutan till en funktion som gör något då den växlar tillstånd this._button.connect ("toggled", this._toggledCB.bind(this));

// Visa fönstret och alla barnkomponenter this._window.show_all(); }

_toggledCB() {

// Få fönstertieln att visas eller försvinna då kryssrutan växlar tillstånd if (this._button.get_active() == true) this._window.set_title ("CheckButton-exempel"); else this._window.set_title ("");

}

};

// Kör programmet let app = new CheckButtonExample (); app.application.run (ARGV);

# Djupgående dokumentation

Gtk.Application

Gtk.ApplicationWindow

Gtk.CheckButton