ToggleButton (JavaScript)

ToggleButton (přepínací tlačítko) je podobné jako normální tlačítko (Button), jen s tím rozdílem, že po kliknutí zůstane zmáčknuté. Můžete jej používat ve funkci zapnuto/vypnuto pro řízení věcí, jako třeba káči (Spinner) v tomto příkladu.

Metoda get_active přepínacího tlačítka vrací true, když je zmáčknuté, a false, když není. Metoda set_active se používá, když chcete změnit jeho stav programově, bez klikání. Když se jeho stav změní ze zmáčknutého na nezmáčknuté nebo naopak, vyšle signál "toggled", který můžete napojit na funkci, která něco udělá.

Importované knihovny


#!/usr/bin/gjs

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

Toto jsou knihovny, které potřebujeme naimportovat, aby aplikace běžela. Pamatujte si, že řádek, který GNOME říká, že používáme Gjs, musí být vždy na začátku.

Vytvoření okna aplikace


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

    // Vytvoří vlastní aplikaci
    _init: function() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jstogglebutton',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

    // Napojí signály "activate" a "startup" k funkcím zpětného volání
    this.application.connect('activate', Lang.bind(this, this._onActivate));
    this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Funkce zpětného volání pro signál "activate" zobrazujicí okno při aktivaci
    _onActivate: function() {
        this._window.present();
    },

    // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní
    _onStartup: function() {
        this._buildUI ();
    },

Všechen kód této ukázky je ve třídě RadioButtonExample. Výše uvedený kód vytvoří Gtk.Application pro naše widgety a okno, ve kterém budou.


    // Sestaví uživatelské rozhraní aplikace
    _buildUI: function() {

        // Vytvoří okno aplikace
        this._window = new Gtk.ApplicationWindow({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            default_height: 300,
            default_width: 300,
            border_width: 30,
            title: "ToggleButton Example"});

Funkce _buildUI je místo, ze kterého voláme všechen kód, který vytváří uživatelské rozhraní aplikace. Prvním krokem je vytvoření nového Gtk.ApplicationWindow, do kterého vložíme všechny naše widgety.

Vytvoření ToggleButton a dalších widgetů


        // Vytvoří káču, kterou přepínací tlačítko zastavuje a spouští
        this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

Chceme, aby se tento widget Spinner roztáhl svisle i vodorovně a zabral co nejvíce místa uvnitř okna.


        // Vytvoří ToggleButton, které spouští a zastavuje káču
        this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
        this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));

Vytváření ToggleButton není tak úplně stejné, jako vytváření widgetu Button. Největší rozdíl je v tom, že obsluhujete signál "toggled" místo "clicked". Tento kód napojí funkci _onToggle na tento signál, takže bude zavolána pokaždé, když se přepínací tlačítko přepne.


        // Vytvoří mřížku a vše do ní vloží
        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);

Zde vytvoříme jednoduchý widget Grid pomocí kterého vše uspořádáme. Následně do něj připojíme káču a přepínací tlačítko.


        // Přidá mřížku do okna
        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    },

Nyní přidáme mřížku do okna a řekneme oknu, aby zobrazilo sebe a své synovské widgety, až se spustí aplikace.

Zajištění, že se něco stane, když je ToggleButton přepnut


    _onToggle: function() {

        // Spustí nebo zastaví káču
        if (this._toggleButton.get_active ())
            this._spinner.start ();
        else this._spinner.stop ();

    }

});

Kdykoliv někdo přepínací tlačítko přepne, tato funkce zkontroluje jeho stav a pak použije get_active a příslušně spustí nebo zastaví káču. Chceme, aby se otáčela, jen když je tlačítko zmáčknuté, tj. get_active vrátí true. V opačném případě ji řekneme, aby se zastavila.


// Spustí aplikaci
let app = new ToggleButtonExample ();
app.application.run (ARGV);

Nakonec vytvoříme novou instanci konečné třídy RadioButtonExample a aplikaci spustíme.

Úplný kód ukázky

#!/usr/bin/gjs

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

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

class ToggleButtonExample {

    // Vytvoří vlastní aplikaci
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jstogglebutton',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

        // Napojí signály "activate" a "startup" k funkcím zpětného volání
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
    }

    // Funkce zpětného volání pro signál "activate" zobrazujicí okno při aktivaci
    _onActivate() {
        this._window.present();
    }

    // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní
    _onStartup() {
        this._buildUI();
    }

    // Sestaví uživatelské rozhraní aplikace
    _buildUI() {

        // Vytvoří okno aplikace
        this._window = new Gtk.ApplicationWindow({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            default_height: 300,
            default_width: 300,
            border_width: 30,
            title: "ToggleButton Example"});

        // Vytvoří káču, kterou přepínací tlačítko zastavuje a spouští
        this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

        // Vytvoří ToggleButton, které spouští a zastavuje káču
        this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
        this._toggleButton.connect ('toggled', this._onToggle.bind(this));

        // Vytvoří mřížku a vše do ní vloží
        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);

        // Přidá mřížku do okna
        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    }

    _onToggle() {

        // Spustí nebo zastaví káču
        if (this._toggleButton.get_active ())
            this._spinner.start ();
        else this._spinner.stop ();

    }
};

// Spustí aplikaci
let app = new ToggleButtonExample ();
app.application.run (ARGV);

Dokumentace jdoucí do hloubky

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Spinner

Gtk.ToggleButton