# Scale (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Stupnice, která odpovídá číselné hodnotě

# Scale

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