# ToggleButton (Javascript)

Taryn Fox
jewelfox@fursona.net 2012
Förblir nedtryckt tills du trycker på den igen
Sebastian Rasmussen
sebras@gmail.com 2019
Anders Jonsson
anders.jonsson@norsjovallen.se 2021

# ToggleButton

En ToggleButton är som en vanlig Button, förutom att den förblir nedtryckt då du klickar på den. Du kan använda den som en av/på-brytare. för att styra saker som en Spinner i detta exempel.

get_active-metoden för en ToggleButton returnerar true om den är nedtryckt, och false om den inte är det. Dess set_active-metod används om du vill ändra dess tillstånd utan att behöva klicka på den. När den växlar tillstånd från nedtryckt till utstickande och tvärtom, så skickar den signalen ”toggled”, vilken du kan ansluta till en signal för att göra något.

# Bibliotek att importera

#!/usr/bin/gjs

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

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

const ToggleButtonExample = new Lang.Class({ Name: 'ToggleButton-exempel',

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

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

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

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

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

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

// Skapa programfönstret this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 300, default_width: 300, border_width: 30, title: "ToggleButton-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 vår ToggleButton och andra komponenter

// Skapa väntesnurran som knappen stoppar och startar this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

Vi vill att denna Spinner ska expanderas vertikalt och horisontellt så att den tar upp så mycket utrymme som möjligt i fönstret.

// Skapa växlingsknappen som startar och stoppar väntesnurran this._toggleButton = new Gtk.ToggleButton ({label: "Starta/stoppa"}); this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));

Att skapa en ToggleButton är mycket som att skapa en vanlig Button. Den största skillnaden är att du hanterar en ”toggled”-signal istället för en ”clicked”-signal. Denna kod binder _onToggle-funktionen till den signalen, så att den anropas närhelst vår ToggleButton växlar tillstånd.

// Skapa ett rutnät och stoppa allting i det this._grid = new Gtk.Grid ({ row_homogeneous: false, row_spacing: 15}); this._grid.attach (this._spinner, 0, 0, 1, 1); this._grid.attach (this._toggleButton, 0, 1, 1, 1);

Här skapar vi en enkel Grid för att organisera allting i, och fäster sedan vår Spinner och ToggleButton till den.

// Lägg till rutnätet till fönstret this._window.add (this._grid);

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

Nu lägger vi till vår Grid till detta Window, och säger till fönstret att visa sig själv och sina barnkomponenter då programmet startas.

# Få något att hända när vår ToggleButton växlar tillstånd

_onToggle: function() {

// Starta eller stoppa väntesnurran if (this._toggleButton.get_active ()) this._spinner.start (); else this._spinner.stop ();

}

});

Närhelst någon klickar på knappen ser denna funktion vad dess tillstånd är efteråt med get_active, och startar eller stoppar väntesnurran enligt detta. Vi vill att den endast ska snurra när knappen är nedtryckt, så om get_active returnerar true startar vi väntesnurran. Annars säger vi till den att stoppa.

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

Slutligen skapar vi en ny instans av den slutförda RadioButtonExample-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 ToggleButtonExample {

// Skapa programmet i sig constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jstogglebutton', 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: 300, default_width: 300, border_width: 30, title: "ToggleButton-exempel"});

// Skapa väntesnurran som knappen stoppar och startar this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

// Skapa växlingsknappen som startar och stoppar väntesnurran this._toggleButton = new Gtk.ToggleButton ({label: "Starta/stoppa"}); this._toggleButton.connect ('toggled', this._onToggle.bind(this));

// Skapa ett rutnät och stoppa allting i det this._grid = new Gtk.Grid ({ row_homogeneous: false, row_spacing: 15}); this._grid.attach (this._spinner, 0, 0, 1, 1); this._grid.attach (this._toggleButton, 0, 1, 1, 1);

// Lägg till rutnätet till fönstret this._window.add (this._grid);

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

_onToggle() {

// Starta eller stoppa väntesnurran if (this._toggleButton.get_active ()) this._spinner.start (); else this._spinner.stop ();

} };

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

# Djupgående dokumentation

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Spinner

Gtk.ToggleButton