Statusbar (JavaScript)

Tato stavová lišta sleduje, kolikrát jste klikli na tlačítko. Aplikace, jako je gedit, používají stavovou lištu k přehlednému zobrazení informací a k upozorněním, která uživatele nepřeruší v práci.

Zprávy vložené do stavové lišty se umístí na vrchol zásobníku a od tam mohou být vybrány k zobrazení nejnovější zprávy. Můžete také naráz vymazat všechny zprávy určitého typu. Tato ukázková aplikace předvádí právě tyto funkce.

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 StatusbarExample = new Lang.Class({
    Name: 'Statusbar Example',

    // Vytvoří vlastní aplikaci
    _init: function() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsstatusbar',
            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ě StatusbarExample. 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: 120,
            default_width: 300,
            title: "Button Clicker"});

        // Vytvoří dvoupanelového rozhraní
        this._panes = new Gtk.Paned ({
            orientation: Gtk.Orientation.VERTICAL });

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. Následujícím krokem je vytvoření svisle orientovaného rozhraní Gtk.Paned, které rozdělí okno na dvě části. Díky tomu stavová lišta vypadá stejně, jako jste zvyklí z jiných aplikací, a zůstává v dolní části okna, i když uživatel mění jeho velikost.

Vytvoření tlačítek


        // Vytvoří hlavní tlačítko
        this._clickMe = new Gtk.Button ({
            label: "Click Me!" });
        this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));

        // Vytvoří tlačítko Undo
        this._backButton = new Gtk.Button ({
            label: "gtk-go-back",
            use_stock: true });
        this._backButton.connect ("clicked", Lang.bind (this, this._back));

        // Vytvoří tlačítko Clear
        this._clearButton = new Gtk.Button ({
            label: "gtk-clear",
            use_stock: true });
        this._clearButton.connect ("clicked", Lang.bind (this, this._clear));

Tento kód vytvoří tři Gtk.Button, která použijeme ke vkládání zprávy do stavové lišty, k odebírání poslední zprávy a k mazání všech existujících zpráv. Tlačítka Back a Clear jsou standardní tlačítka, která jsou automaticky přeložena do kteréhokoliv národního jazyka, který GNOME podporuje.


        // Vloží tlačítka do mřížky
        this._grid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });
        this._grid.attach (this._backButton, 0, 0, 1, 1);
        this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);
        this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);

        // Vloží mřížku do většího rámu, který vyplní většinu okna
        this._topFrame = new Gtk.Frame ({
            border_width: 20,
            height_request: 90,
            width_request: 300});
        this._topFrame.add (this._grid);

Tento kód vytvoří Gtk.Grid, kterou použijeme k uspořádání tlačítek, a tlačítka do mřížky ve správném pořadí připojí. Pak vytvoří Gtk.Frame, který zabere většinu okna a má velké odsazení okolo tlačítek, a přidá mřížku do tohoto rámu. Upozorňujeme, že stále potřebujeme vložit rám do dvoupanelového rozhraní a to zase přidat do okna aplikace.

Vytvoření stavové lišty


        // Vytvoří stavovou lištu
        this._statusbar = new Gtk.Statusbar();

        // Uchovává počet, kolikrát bylo na kliknuto na tlačítko
        this.Clicks = 0;
        this.ContextID = this._statusbar.get_context_id ("Number of Clicks");

        // Předá stavové liště počáteční zprávu
        this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

        // Vloží stavovou lištu do jím vlastněného rámu dole
        this._barFrame = new Gtk.Frame ({
            height_request: 30 });
        this._barFrame.add (this._statusbar);

Zde vytvoříme Gtk.Statusbar a vložíme do něj zprávu, se kterou začne. Pak mu přidělíme vlastní úzký rám v dolní části okna.

Každá zpráva musí mít ID kontexu, což je celočíselná hodnota, kterou můžete získat od stavové lišty pomocí funkce get_context_id(). Její jediný parametr je řetězcová hodnota, která slouží k popisu tohoto konkrétního kontextu. Za normálních okolností dostanete nové ID kontextu pro různé druhy zpráv, takže můžete použít funkci remove() k odstranění zadané zprávy a ne nutně jen nejnovější zprávy v zásobníku. Toto je jednoduchý příklad jen s jedním druhem zpráv, takže používáme jen jedno ID pro všechno.

Používáme funkci push() k vložení nové zprávy do zásobníku. Prvním parametrem je ID kontextu a druhým zpráva.


        // Sestaví rámy do dvoupanelového rozhraní
        this._panes.pack1 (this._topFrame, true, false);
        this._panes.pack2 (this._barFrame, false, false);

        // Vloží panely do okna
        this._window.add (this._panes);

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

Tento kód dokončí vytváření okna tím, že zabalí rámy do panelu, přidá jej do okna a řekne oknu, aby zobrazilo všechny synovské widgety.

Funkce pro komunikaci se stavovou lištou


    _clicked: function() {

        // Zvýší počet kliknutí o 1
        this.Clicks++;

        // Aktualizuje stavovou lištu na nový počet kliknutí
        this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

    },



    _back: function () {

        // Pokud bylo kliknuto, sníží o 1 a odstraní poslední aktualizaci stavové lišty
        if (this.Clicks > 0 ) {
            this.Clicks--;
            this._statusbar.pop (this.ContextID);
        };

    },



    _clear: function () {

        // Vynuluje počet kliknutí
        this.Clicks = 0;

        // Vymaže všechny zprávy vložené do stavové lišty
        this._statusbar.remove_all (this.ContextID);

        // Nataví výchozí zprávu ve stavové liště
        this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

    }

});

Zde máme funkci, která předvádí vložení zprávy na zásobník, odebrání zprávy úplně na vrcholu zásobníku a smazání všech zpráv s konkrétním ID kontextu. Funkce pop() přebírá jen jeden parametr, což je ID kontextu pro typ zpráv, z nichž nejnovější chcete odebrat ze zásobníku. Funkce remove_all() pracuje stejným způsobem, akorát že odstraní ze zásobníku všechny zprávy zadaného typu.


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

Nakonec vytvoříme novou instanci konečné třídy StatusbarExample 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 StatusbarExample {

    // Vytvoří vlastní aplikaci
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsstatusbar',
            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: 120,
            default_width: 300,
            title: "Button Clicker"});

        // Vytvoří dvoupanelového rozhraní
        this._panes = new Gtk.Paned ({
            orientation: Gtk.Orientation.VERTICAL });

        // Vytvoří hlavní tlačítko
        this._clickMe = new Gtk.Button ({
            label: "Click Me!" });
        this._clickMe.connect ("clicked", this._clicked.bind(this));

        // Vytvoří tlačítko Back
        this._backButton = new Gtk.Button ({
            label: "gtk-go-back",
            use_stock: true });
        this._backButton.connect ("clicked", this._back.bind(this));

        // Vytvoří tlačítko Clear
        this._clearButton = new Gtk.Button ({
            label: "gtk-clear",
            use_stock: true });
        this._clearButton.connect ("clicked", this._clear.bind(this));

        // Vloží tlačítka do mřížky
        this._grid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });
        this._grid.attach (this._backButton, 0, 0, 1, 1);
        this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);
        this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);

        // Vloží mřížku do většího rámu, který vyplní většinu okna
        this._grid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });
        this._grid.attach (this._backButton, 0, 0, 1, 1);
        this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);
        this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);

        // Vytvoří stavovou lištu
        this._statusbar = new Gtk.Statusbar();

        // Uchovává počet, kolikrát bylo na kliknuto na tlačítko
        this.Clicks = 0;
        this.ContextID = this._statusbar.get_context_id ("Number of Clicks");

        // Předá stavové liště počáteční zprávu
        this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);

        // Vloží stavovou lištu do jím vlastněného rámu dole
        this._barFrame = new Gtk.Frame ({
            height_request: 30 });
        this._barFrame.add (this._statusbar);

        // Sestaví rámy do dvoupanelového rozhraní
        this._panes.pack1 (this._topFrame, true, false);
        this._panes.pack2 (this._barFrame, false, false);

        // Vloží panely do okna
        this._window.add (this._panes);

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

    _clicked() {

        // Zvýší počet kliknutí o 1
        this.Clicks++;

        // Aktualizuje stavovou lištu na nový počet kliknutí
        this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
    }

    _back() {

        // Pokud bylo kliknuto, sníží o 1 a odstraní poslední aktualizaci stavové lišty
        if (this.Clicks > 0 ) {
            this.Clicks--;
            this._statusbar.pop (this.ContextID);
        };
    }

    _clear() {

        // Vynuluje počet kliknutí
        this.Clicks = 0;

        // Vymaže všechny zprávy vložené do stavové lišty
        this._statusbar.remove_all (this.ContextID);

        // Nataví výchozí zprávu ve stavové liště
        this._statusbar.push (this.ContextID, "Number of clicks: " + this.Clicks);
    }
};

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

Dokumentace jdoucí do hloubky

Gtk.Application

Gtk.ApplicationWindow

Gtk.Button

Gtk.Frame

Gtk.Paned

Gtk.Statusbar