# Statusbar (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Zobrazuje upozornění ve vyhrazené stavové liště

# Statusbar

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