# ToggleButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Zůstane zmáčknuté, dokud na něj znovu nekliknete

# ToggleButton

`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