Scale (JavaScript)

Widget Scale (stupnice), je vodorovná nebo svislá lišta s táhlem, která představuje hodnotu z nějakého číselného rozsahu. Když vytvoříte novou stupnici, nastavíte ji výchozí polohu, která čísla odpovídají dolní a horní mezi rozsahu, a věci, jako o kolik se má posunout nahoru/dolů při kliknutí na konce lišty. Abyste nemuseli všechny tyto věci psát znovu a znovu, když stupnici vytváříte, můžete vytvořit objekt Adjustment (přizpůsobení), který si to vše pamatuje, a stupnici pak akorát řeknete, že ho má použít.

Tato stupnice je jednoduchý widget, pomocí kterého můžeme upravovat velikost ledové kry, na které žijí tučňáci. Počet tučňáků na kře je násobkem hodnot ze dvou stupnic. Hrajte si s nimi a uvidíte, co se bude dít.

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

    // Vytvoří vlastní aplikaci
    _init: function() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsscale'
        });

    // 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ě ScaleExample. 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,
            border_width: 20,
            title: "Birds on a Floe"});

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í stupnic


        // Vytvoří vodorovnou stupnici
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);

Metoda new_with_range je jedním ze způsobů, jak vytvořit nový widget Scale. Přebírané parametry jsou Gtk.Orientation, nejnižší hodnota, nejvyšší hodnota a přírůstek pro jeden krok. Potom použijeme metody widgetu k nastavení jeho počáteční hodnoty a kolik desetinných míst má používat. V tomto případě také nastavíme svislé zarovnání, které určuje, kde v okně se objeví.

Můžeme použít metodu set_draw_value, abychom řekli, jestli se má nebo nemá vedle stupnice zobrazovat číselná hodnota. V tomto příkladu je zakomentováno.


        // Vytvoří hlavní přizpůsobení, které se použije pro svislou (nebo jinou) stupnici
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });

Objekt Adjustment (přizpůsobení) můžete použít pro zjednodušení věcí okolo vytváření nové stupnice. Vlastnost "value" u přizpůsobení je to stejné, co výchozí hodnota u stupnice, zatímco "upper" a "lower" určují meze číselného rozsahu. Mezi tím jsou přírůstky hodnot říkající, jak moc se má posunout táhlo, když uděláte takové věci, jako že na stupnici kliknete.


        // Vytvoří svislou stupnici používající přizpůsobení, 
        // které jsme právě vytvořili
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });

Zde vytvoříme novou stupnici pomocí přiřazení _adjustment do její vlastnosti "adjustment". Jedná se o velkou zkratku, i když i tak pořád musíme stupnici říct, na kolik desetinných míst má fungovat. Poznamenejme, že vlastnost "draw_value" je zakomentovaná. Jedná se o způsob, jak říct, že se nemá vedle stupnice zobrazovat číselná hodnota, když stupnici vytváříte tímto způsobem.


        // Vytvoří popisek, který zobrazuje součin dvou hodnot
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Napojí dvě stupnice na funkci, která přepočítává údaj pro popisek
        this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
        this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

Můžeme použít metodu get_value_method k nalezení číselné hodnoty, na kterou je stupnice nastavena. S ní pak můžeme dělat cokoliv je potřeba, včetně vzájemného vynásobení hodnot ze dvou stupnic. Součin pak zobrazíme ve widgetu Label. Nastavíme, aby se text popisku zalamovat, protože bude rovněž zobrazovat bláznivou zprávu.

Když máme vytvořený popisek, napojíme signály "value-changed" od obou stupnic na funkci _recals, která bude přepočítávat počet tučňáků na ledové kře a podávat o nich novou zprávu.


        // Vytvoří mřížku pro uspořádání věcí
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Připojí vše do mřížky
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

Zde pro všechno vytvoříme widget Grid a všechny naše widgety do něj připojíme. Všimněte si, že zde (a i u některých widgetů) použijeme okraje, abychom zachovali potřebné rozestupy.


        // Přidá mřížku do okna
        this._window.add (this._UIGrid);

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

Nakonec přidáme mřížku do okna a následně oknu řekneme, aby zobrazilo sebe a všechny widgety uvnitř sebe.

Funkce, která obsluhuje změnu hodnoty na stupnici


    _recalc: function() {

        // Zjistí, jaký je součin hodnot ze dvou stupnic
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Vytvoří prázdný komentář pro případ, kdy není jaký bláznivý komentář vytvořit
        var comment = "";

        // Vytvoří bláznivý komentář vycházející z počtu tučňáků
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone…";
        }
        else comment = "";

        // Nastaví nový text pro ._label
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

    }

});

Pamatujete, jak jsme od stupnice získali hodnotu pomocí její metody get_value? Zde jednoduše přepočítáme součin dvou hodnot po té, co je stupnice posunuta, přidáme bláznivou zprávu v závislosti na tom, kolik tučňáků zůstalo, a změníme formulaci v _label ukazujícím nový počet a zprávu.


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

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

    // Vytvoří vlastní aplikaci
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsscale'
        });

        // 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,
            border_width: 20,
            title: "Birds on a Floe"});

        // Vytvoří vodorovnou stupnici
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);

        // Vytvoří hlavní přizpůsobení, které se použije pro svislou (nebo jinou) stupnici
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });

        // Vytvoří svislou stupnici používající přizpůsobení, 
        // které jsme právě vytvořili
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });

        // Vytvoří popisek, který zobrazuje součin dvou hodnot
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Napojí dvě stupnice na funkci, která přepočítává údaj pro popisek
        this._hScale.connect ("value-changed", this._recalc.bind(this));
        this._vScale.connect ("value-changed", this._recalc.bind(this));

        // Vytvoří mřížku pro uspořádání věcí
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Připojí vše do mřížky
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

        // Přidá mřížku do okna
        this._window.add (this._UIGrid);

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

    _recalc() {

        // Zjistí, jaký je součin hodnot ze dvou stupnic
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Vytvoří prázdný komentář pro případ, kdy není jaký bláznivý komentář vytvořit
        var comment = "";

        // Vytvoří bláznivý komentář vycházející z počtu tučňáků
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone ...";
        }
        else comment = "";

        // Nastaví nový text pro ._label
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    }
};

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

Dokumentace jdoucí do hloubky

Gtk.Adjustment

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Label

Gtk.Scale