# CheckButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Políčko, které může být zaškrtnuté nebo nezaškrtnuté

# CheckButton

Tato aplikace má widget CheckButton. Je-li políčko zaškrtnuté, nebo ne, ovlivňuje, jestli je něco zobrazeno v záhlaví okna, nebo ne.

Když políčko zaškrtnete nebo zaškrtnutí zrušíte, vyšle signál `"toggled"`. Když je zaškrtnuté, je vlastnost `"active"` nastavena na `true`. Když není, vrátí test této vlastnosti hodnotu `false`.

# Importované knihovny

#!/usr/bin/gjs

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

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

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

class CheckButtonExample { // Vytvoří vlastní aplikaci constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', 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", která zobrazí okno při aktivaci _onActivate() { this._window.present(); }

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

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

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

// Vytvoří okno aplikace 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"});

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í widgetu CheckButton

// Vytvoří zaškrtávací políčko this._button = new Gtk.CheckButton ({label: "Show Title"}); this._window.add (this._button);

// Zajistí, že ve výchozím stavu bude zaškrtnuté this._button.set_active (true);

// Napojí zaškrtávací políčko k funkci, která při přepnutí něco udělá this._button.connect ("toggled", this._toggledCB.bind(this));

Tento kód vytvoří vlastní zaškrtávací políčko. Popisek vedle něj je vytvořen udáním vlastnosti `label` zaškrtávacího políčka a přiřazením řetězcové hodnoty do něj. Protože toto zaškrtávací políčko přepíná, zda má okno v záhlaví název a na začátku jej má, chceme aby políčko bylo ve výchozím stavu zaškrtnuté. Kdykoliv uživatel jeho zaškrtnutí změní, zavolá se funkce `_toggledCB`.

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

Tento kód dokončí vytváření uživatelského rozhraní tím, že řekne oknu, aby zobrazilo sebe a všechny své synovské widgety (což je v tomto případě jen zaškrtávací políčko).

# Funkce, která zpracovává přepnutí zaškrtávacího políčka

_toggledCB() {

// Zobrazí a skryje obsah záhlaví okna při přepnutí zaškrtávacího políčka if (this._button.get_active() == true) this._window.set_title ("CheckButton Example"); else this._window.set_title ("");

}

};

Když se je zrušeno zaškrtnutí zaškrtávacího políčka, chceme aby zmizel název na záhlaví okna. Až je zase zaškrtnuto, chceme, aby se znovu objevil. To, v jakém je stavu, můžeme říci po otestování, jestli je aktivní (zaškrtnuté) nebo ne. K funkčnosti nám stačí jednoduchý výraz `if`/`else`, který zavolá metodu `get_active()` zaškrtávacího políčka.

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

Nakonec vytvoříme novou instanci výsledné třídy CheckButtonExample 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 CheckButtonExample {

// Vytvoří vlastní aplikaci constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', 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: 100, default_width: 300, border_width: 10, title: "CheckButton Example"});

// Vytvoří zaškrtávací políčko this._button = new Gtk.CheckButton ({label: "Show Title"}); this._window.add (this._button);

// Zajistí, že ve výchozím stavu bude zaškrtnuté this._button.set_active (true);

// Napojí zaškrtávací políčko k funkci, která při přepnutí něco udělá this._button.connect ("toggled", this._toggledCB.bind(this));

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

_toggledCB: function () {

// Zobrazí a skryje obsah záhlaví okna při přepnutí zaškrtávacího políčka if (this._button.get_active() == true) this._window.set_title ("CheckButton Example"); else this._window.set_title ("");

}

};

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

# Dokumentace jdoucí do hloubky

Gtk.Application

Gtk.ApplicationWindow

Gtk.CheckButton