<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="comboboxtext.js" xml:lang="cs">
<info>
<title type="text">ComboBoxText (JavaScript)</title>
<link type="guide" xref="beginner.js#menu-combo-toolbar"/>
<link type="seealso" xref="GtkApplicationWindow.js"/>
<link type="seealso" xref="messagedialog.js"/>
<revision version="0.1" date="2012-07-06" status="draft"/>
<credit type="author copyright">
<name>Taryn Fox</name>
<email its:translate="no">jewelfox@fursona.net</email>
<years>2012</years>
</credit>
<desc>Čistě textová rozbalovací nabídka</desc>
</info>
<title>ComboBoxText</title>
<media type="image" mime="image/png" src="media/combobox.png"/>
<p><code>ComboBox</code> je rozbalovací nabídka. Rozdíl mezi <link xref="combobox.js">ComboBox</link> a <code>ComboBoxText</code> (textová rozbalovací nabídka) je v tom, že má jen základní textové volby, zatímco plnohodnotný <code>ComboBox</code> používá <code>ListStore</code> nebo <code>TreeStore</code> (což jsou v podstatě tabulky) k zobrazení věcí, jako jsou rozvětvené volby nebo obrázky vedle jednotlivých voleb.</p>
<note><p>Pokud nepotřebujete přidané funkce plného <code>ComboBox</code> nebo komfort práce s <code>ListStore</code> a <code>TreeStore</code>, můžete shledat jednodušším, kdykoliv to použití dovolí, <code>ComboBoxText</code>.</p></note>
<links type="section"/>
<section id="imports">
<title>Importované knihovny</title>
<code mime="application/javascript">
#!/usr/bin/gjs
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
</code>
<p>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.</p>
</section>
<section id="applicationwindow">
<title>Vytvoření okna aplikace</title>
<code mime="application/javascript">
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 ();
},
</code>
<p>Všechen kód této ukázky je ve třídě <code>MessageDialogExample</code>. Výše uvedený kód vytvoří <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pro naše widgety a okno, ve kterém budou.</p>
<code mime="application/javascript">
// 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 });
</code>
<p>Funkce <code>_buildUI</code> 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 <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link>, do kterého vložíme všechny naše widgety.</p>
</section>
<section id="comboboxtext">
<title>Vytvoření ComboBoxText</title>
<code mime="application/javascript">
// 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));
</code>
<p>Po té, co jsme vytvořili textový rozbalovací seznam, použijeme jeho metodu <code>append_text</code> 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.</p>
<p>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 <code>"changed"</code> na funkci <code>_onComboChanged</code>, takže bude zavolána pokaždé, když je v rozbalovacím seznamu proveden nový výběr.</p>
<note><p>Když byste chtěli do <code>ComboBoxText</code> dodatečně přidat položku, můžete použít metodu <code>insert_text</code>. A pokud byste raději než čísla použili textové řetězce jako ID pro jednotlivé položky, můžete použít metody <code>append</code> a <code>insert</code>. Ohledně podrobností, jak je použít, se podívejte na odkazy ve spodní části této lekce.</p></note>
<code mime="application/javascript">
// Přidá rozbalovací seznam do okna
this._window.add (this._comboBoxText);
// Zobrazí okno a všechny jeho synovské widgety
this._window.show_all();
},
</code>
<p>Nakonec přidáme ComboBoxText do okna a oknu řekneme, aby zobrazilo sebe i widgety v něm.</p>
</section>
<section id="function">
<title>Funkce, která zpracovává váš výběr</title>
<code mime="application/javascript">
_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."];
</code>
<p>Budeme vytvářet vyskakovací <link xref="messagedialog.js">MessageDialog</link>, 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ý.</p>
<code mime="application/javascript">
// 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();
}
},
</code>
<p>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 <code>get_active</code> method, která vrací číselné ID vašeho výběru.</p>
<note><p>Jinými metodami, které bychom mohli použít jsou <code>get_active_id</code>, která vrací textové ID přiřazené metodou <code>append</code>, a <code>get_active_text</code>, která vrací celý text ve vybrané položce.</p></note>
<p>Po té, co vytvoříme <code>MessageDialog</code>, napojíme jeho signál <code>"response"</code> na funkci <code>_onDialogResponse</code> a následně řekneme oknu, ať se zobrazí.</p>
<code mime="application/javascript">
_onDialogResponse: function () {
this._popUp.destroy ();
}
});
</code>
<p>Protože jediným tlačítkem, které dialogové okno se zprávou má, je tlačítko <gui>OK</gui>, nepotřebujeme testovat hodnotu <code>response_id</code>, abychom zjistili, na které tlačítko bylo kliknuto. Vše, co uděláme, je, že dialogové okno zlikvidujeme.</p>
<code mime="application/javascript">
// Spustí aplikaci
let app = new ComboBoxTextExample ();
app.application.run (ARGV);
</code>
<p>Nakonec vytvoříme novou instanci konečné třídy ComboBoxTextExample a aplikaci spustíme.</p>
</section>
<section id="complete">
<title>Úplný kód ukázky</title>
<code mime="application/javascript" style="numbered">#!/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);
</code>
</section>
<section id="in-depth">
<title>Dokumentace jdoucí do hloubky</title>
<p>V této ukázce se používá následující:</p>
<list>
<item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link></p></item>
<item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link></p></item>
<item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBoxText.html">Gtk.ComboBoxText</link></p></item>
<item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link></p></item>
</list>
</section>
</page>