# ComboBoxText (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Čistě textová rozbalovací nabídka

# ComboBoxText

`ComboBox` je rozbalovací nabídka. Rozdíl mezi ComboBox a `ComboBoxText` (textová rozbalovací nabídka) je v tom, že má jen základní textové volby, zatímco plnohodnotný `ComboBox` používá `ListStore` nebo `TreeStore` (což jsou v podstatě tabulky) k zobrazení věcí, jako jsou rozvětvené volby nebo obrázky vedle jednotlivých voleb.

Pokud nepotřebujete přidané funkce plného `ComboBox` nebo komfort práce s `ListStore` a `TreeStore`, můžete shledat jednodušším, kdykoliv to použití dovolí, `ComboBoxText`.

# Importované knihovny

#!/usr/bin/gjs

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

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

// 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ě `MessageDialogExample`. 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, title: "Welcome to GNOME", default_width: 200, border_width: 10 });

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

// Vytvoří rozbalovací seznam this._comboBoxText = new Gtk.ComboBoxText();

// Naplní rozbalovací seznam let distros = ["Select distribution", "Fedora", "Mint", "Suse"]; for (let i = 0; i < distros.length; i++) this._comboBoxText.append_text (distros[i]); this._comboBoxText.set_active (0);

// Napojí signál "changed" od rozbalovacího seznamu k naší funkci zpětnoho volání this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));

Po té, co jsme vytvořili textový rozbalovací seznam, použijeme jeho metodu `append_text` pro přidání textových řetězců. Podobně jako u položek v poli má každá číslo ID, počínaje od 0. Pro zjednodušení můžete skutečně vytvořit pole a použít smyčku pro přidání jednotlivých položek tak, jako jsme to udělali zde.

Až máme textový rozbalovací seznam naplněný, nastavíme jeho první položku jako aktivní, takže před prvním kliknutím uvidíme řádek „Select distribution“ („Vyberte distribuci“). Následně napojíme signál `"changed"` na funkci `_onComboChanged`, takže bude zavolána pokaždé, když je v rozbalovacím seznamu proveden nový výběr.

Když byste chtěli do `ComboBoxText` dodatečně přidat položku, můžete použít metodu `insert_text`. A pokud byste raději než čísla použili textové řetězce jako ID pro jednotlivé položky, můžete použít metody `append` a `insert`. Ohledně podrobností, jak je použít, se podívejte na odkazy ve spodní části této lekce.

// Přidá rozbalovací seznam do okna this._window.add (this._comboBoxText);

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

Nakonec přidáme ComboBoxText do okna a oknu řekneme, aby zobrazilo sebe i widgety v něm.

# Funkce, která zpracovává váš výběr

_onComboChanged: function () {

// Reakce, které použijeme v našem dialogovém okně se zprávou let responses = ["", "Fedora is a community distro sponsored by Red Hat.", "Mint is a popular distro based on Ubuntu.", "SUSE is a name shared by two separate distros."];

Budeme vytvářet vyskakovací MessageDialog, který vám zobrazí zprávu podle vybrané distribuce. Nejdříve vytvoříme pole odpovědí, které se budou používat. Protože první položkou v našem rozbalovacím seznamu je jen informace „Select distribution“, ponecháme první řetězec v našem poli prázdný.

// Která položka rozbalovacího seznamu je aktivní? let activeItem = this._comboBoxText.get_active();

// Žádné dialogové okno se zprávou, když je vybráno „Select distribution“ if (activeItem != 0) { this._popUp = new Gtk.MessageDialog ({ transient_for: this._window, modal: true, buttons: Gtk.ButtonsType.OK, message_type: Gtk.MessageType.INFO, text: responses[activeItem]});

// Napojí tlačítko OK na obslušnou funkci this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));

// Zobrazí dialogové okno se zprávou this._popUp.show(); }

},

Než zobrazíme dialogové okno se zprávou, nejprve otestujeme, že není vybrána volba „Select distribution“. Po té nastavíme text podle položky v poli, která odpovídá aktivní položce v rozbalovacím seznamu. To uděláme pomocí metody `get_active` method, která vrací číselné ID vašeho výběru.

Jinými metodami, které bychom mohli použít jsou `get_active_id`, která vrací textové ID přiřazené metodou `append`, a `get_active_text`, která vrací celý text ve vybrané položce.

Po té, co vytvoříme `MessageDialog`, napojíme jeho signál `"response"` na funkci `_onDialogResponse` a následně řekneme oknu, ať se zobrazí.

_onDialogResponse: function () {

this._popUp.destroy ();

}

});

Protože jediným tlačítkem, které dialogové okno se zprávou má, je tlačítko OK, nepotřebujeme testovat hodnotu `response_id`, abychom zjistili, na které tlačítko bylo kliknuto. Vše, co uděláme, je, že dialogové okno zlikvidujeme.

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

Nakonec vytvoříme novou instanci konečné třídy ComboBoxTextExample a aplikaci spustíme.

# Úplný kód ukázky

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0'; const Gtk = imports.gi.Gtk;

class ComboBoxTextExample {

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

// 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, title: "Welcome to GNOME", default_width: 200, border_width: 10 });

// Vytvoří rozbalovací seznam this._comboBoxText = new Gtk.ComboBoxText();

// Naplní rozbalovací seznam let distros = ["Select distribution", "Fedora", "Mint", "Suse"]; for (let i = 0; i < distros.length; i++) this._comboBoxText.append_text (distros[i]); this._comboBoxText.set_active (0);

// Napojí signál "changed" od rozbalovacího seznamu k naší funkci zpětnoho volání this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));

// Přidá rozbalovací seznam do okna this._window.add (this._comboBoxText);

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

_onComboChanged() {

// Reakce, které použijeme v našem dialogovém okně se zprávou let responses = ["", "Fedora is a community distro sponsored by Red Hat.", "Mint is a popular distro based on Ubuntu.", "SUSE is a name shared by two separate distros."];

// Která položka rozbalovacího seznamu je aktivní? let activeItem = this._comboBoxText.get_active();

// Žádné dialogové okno se zprávou, když je vybráno „Select distribution“ if (activeItem != 0) { this._popUp = new Gtk.MessageDialog ({ transient_for: this._window, modal: true, buttons: Gtk.ButtonsType.OK, message_type: Gtk.MessageType.INFO, text: responses[activeItem]});

// Napojí tlačítko OK na obslušnou funkci this._popUp.connect ('response', this._onDialogResponse.bind(this));

// Zobrazí dialogové okno se zprávou this._popUp.show(); }

}

_onDialogResponse() {

this._popUp.destroy ();

}

};

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

# Dokumentace jdoucí do hloubky

V této ukázce se používá následující:

Gtk.Application

Gtk.ApplicationWindow

Gtk.ComboBoxText

Gtk.MessageDialog