CheckButton (JavaScript)

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