<?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="messagedialog.js" xml:lang="cs">
<info>
<title type="text">MessageDialog (JavaScript)</title>
<link type="guide" xref="beginner.js#windows"/>
<link type="seealso" xref="GtkApplicationWindow.js"/>
<link type="seealso" xref="gmenu.js"/>
<link type="seealso" xref="label.js"/>
<revision version="0.2" date="2012-06-25" status="draft"/>
<credit type="author copyright">
<name>Taryn Fox</name>
<email its:translate="no">jewelfox@fursona.net</email>
<years>2012</years>
</credit>
<desc>Vyskakovací zpráva svázaná s oknem</desc>
</info>
<title>MessageDialog</title>
<media type="image" mime="image/png" src="media/messagedialog.png"/>
<p><code>MessageDialog</code> je modální dialogové okno, což znamená že na vyskočení okna musíte nějak zareagovat, než se můžete vrátit do okna, se kterým je svázané. Toto konkrétní způsobí, že svět vybuchne (nebo to aspoň bude tvrdit). Když budete chtít, aby okno vyskočilo po spuštění této ukázky, klikněte na <gui>Message</gui> v jeho aplikační nabídce – to je nabídka, která se objeví po kliknutí na název aplikace v levém horním rohu obrazovky vedle <gui>Činností</gui>.</p>
<note><p>Rozdíl mezi widgety <code>MessageDialog</code> a <link xref="dialog.js">Dialog</link> je v tom, že <code>Dialog</code> může obsahovat jakékoliv widgety, které do něj vložíte, zatímco <code>MessageDialog</code> je jen vhodný způsob, jak zobrazit obyčejnou zprávu a tlačítka.</p></note>
<links type="section"/>
<section id="imports">
<title>Importované knihovny</title>
<code mime="application/javascript">
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
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 MessageDialogExample = new Lang.Class ({
Name: 'MessageDialog Example',
// Vytvoří vlastní aplikaci
_init: function () {
this.application = new Gtk.Application ({
application_id: 'org.example.jsmessagedialog',
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._initMenus();
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>
<note><p>Než zavoláme <code>_buildUI</code>, aby se vytvořilo okno a widgety v něm, potřebujeme zavolat funkci <code>_initMenus</code>, která GNOME řekne, aby vytvořilo nabídku. Reálný kód pro <code>_initMenus</code> můžeme vložit za kód <code>_buildUI</code>, jelikož nezáleží na tom, v jakém pořadí jsou vloženy, protože <code>_initMenus</code> je zavoláno jako první z <code>_onStartup</code>.</p></note>
<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: "Gtk.MessageDialog Example",
default_height: 200,
default_width: 400 });
</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>
<code mime="application/javascript">
// Vytvoří bláznivou varovnou zprávu a přidá ji do okna
this.warningLabel = new Gtk.Label ({
label: "This application goes boom! (Not really.)"});
this._window.add (this.warningLabel);
</code>
<p>V tomto příkladu, je vším, co vyskakovací okno přinese, jen bláznivé varování ve widgetu <link xref="label.js">Label</link>.</p>
</section>
<section id="menu">
<title>Vytvoření nabídky aplikace</title>
<code mime="application/javascript">
// Sestaví aplikační nabídku, včetně položky, které volá dialogové okno
_initMenus: function() {
let menu = new Gio.Menu();
menu.append("Message",'app.message');
menu.append("Quit",'app.quit');
this.application.set_app_menu(menu);
// Tímto se zobrazí MessageDialog, když je v nabídce kliknuto na Message
let messageAction = new Gio.SimpleAction ({ name: 'message' });
messageAction.connect('activate', Lang.bind(this,
function() {
this._showMessageDialog();
}));
this.application.add_action(messageAction);
// Tímto se zavře okno, když je v nabídce kliknuto na Quit
let quitAction = new Gio.SimpleAction ({ name: 'quit' });
quitAction.connect('activate', Lang.bind(this,
function() {
this._window.destroy();
}));
this.application.add_action(quitAction);
},
</code>
<p>Zde sestavíme <link xref="gmenu.js">GMenu</link>, do které ho přidáme položku <gui>Message</gui>, která vyvolá dialogové okno se zprávou. <code>GMenu</code> je nabídka, která se objeví po kliknutí na název aplikace v levém horním rohu obrazovky vedle <gui>Činností</gui>. Naše nabídka má jen dvě položky: <gui>Message</gui> a <gui>Quit</gui>.</p>
</section>
<section id="messagedialog">
<title>Vytvoření okna typu MessageDialog</title>
<code mime="application/javascript">
_showMessageDialog: function () {
// Vytvoří modální MessageDialog, jehož rodičem je okno
this._messageDialog = new Gtk.MessageDialog ({
transient_for: this._window,
modal: true,
buttons: Gtk.ButtonsType.OK_CANCEL,
message_type: Gtk.MessageType.WARNING,
text: "This action will cause the universe to stop existing." });
this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
this._messageDialog.show();
},
</code>
<p>Aby naše dialogové okno se zprávou vyskočilo svázané s hlavním oknem, nastavíme jeho vlastnost <code>modal</code> na <code>true</code> a <code>transient_for</code> na <code>_window</code>. Po té můžeme nastavit druh tlačítek, která bude mít, a druh zprávy, kterou zobrazí (tím je dána ikona, která se objeví vedle zprávy) a napsat text zprávy. To vše před tím, než napojíme jeho signál <code>"response"</code> na funkci zpětného volání, která jej zpracuje.</p>
<note><p>Zde je pár zdrojů, kterém můžete použít při vytváření vlastních widgetů <code>MessageDialog</code>:</p>
<list>
<item><p><link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">Seznam typů tlačítek</link></p></item>
<item><p><link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">Seznam typů zpráv</link></p></item>
</list>
</note>
<code mime="application/javascript">
// Funkce zpětného volání (neboli obsluha signálu) pro reagování na signál
_response_cb: function (messagedialog, response_id) {
// Jednoduchý rozdělovač, který mění název v záhlaví hlavního okna
switch (response_id) {
case Gtk.ResponseType.OK:
this.warningLabel.set_label ("*BOOM*\n");
break;
case Gtk.ResponseType.CANCEL:
this.warningLabel.set_label ("Good choice!\n");
break;
case Gtk.ResponseType.DELETE_EVENT:
this.warningLabel.set_label ("Dialog closed or cancelled.\n");
break;
}
this._messageDialog.destroy();
}
});
</code>
<p>Tato funkce má dva parametry, <code>MessageDialog</code> a jeho <code>response_id</code>, z nichž oba jsou zajištěny automaticky (nemusíte je ručně předávat, aby to fungovalo). Zde použijeme jednoduchou konstrukci <code>switch</code>, která změní text varování podle vybrané volby. Když místo kliknutí na tlačítko <gui>OK</gui> nebo <gui>Cancel</gui> zmáčknete <key>Esc</key>, nastane událost <code>DELETE_EVENT</code>. Ve všech případech dojde k likvidaci dialogového okna.</p>
<code mime="application/javascript">
// Spustí aplikaci
let app = new MessageDialogExample ();
app.application.run (ARGV);
</code>
<p>Nakonec vytvoříme novou instanci konečné třídy MessageDialogExample 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 Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
class MessageDialogExample {
// Vytvoří vlastní aplikaci
constructor() {
this.application = new Gtk.Application({
application_id: 'org.example.jsmessagedialog',
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._initMenus();
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: "Gtk.MessageDialog Example",
default_height: 200,
default_width: 400
});
// Vytvoří bláznivou varovnou zprávu a přidá ji do okna
this.warningLabel = new Gtk.Label({
label: "This application goes boom! (Not really.)"
});
this._window.add (this.warningLabel);
// Zobrazí okno a všechny jeho synovské widgety
this._window.show_all();
}
// Sestaví aplikační nabídku, včetně položky, které volá dialogové okno
_initMenus() {
let menu = new Gio.Menu();
menu.append("Message",'app.message');
menu.append("Quit",'app.quit');
this.application.set_app_menu(menu);
// Tímto se zobrazí MessageDialog, když je v nabídce kliknuto na Message
let messageAction = new Gio.SimpleAction ({ name: 'message' });
messageAction.connect('activate', () => { this._showMessageDialog(); });
this.application.add_action(messageAction);
// Tímto se zavře okno, když je v nabídce kliknuto na Quit
let quitAction = new Gio.SimpleAction ({ name: 'quit' });
quitAction.connect('activate', () => { this._window.destroy(); });
this.application.add_action(quitAction);
}
_showMessageDialog() {
// Vytvoří modální MessageDialog, jehož rodičem je okno
this._messageDialog = new Gtk.MessageDialog ({
transient_for: this._window,
modal: true,
buttons: Gtk.ButtonsType.OK_CANCEL,
message_type: Gtk.MessageType.WARNING,
text: "This action will cause the universe to stop existing." });
this._messageDialog.connect ('response', this._response_cb.bind(this));
this._messageDialog.show();
}
// Funkce zpětného volání (neboli obsluha signálu) pro reagování na signál
_response_cb(messagedialog, response_id) {
// Jednoduchý rozdělovač, který mění název v záhlaví hlavního okna
switch (response_id) {
case Gtk.ResponseType.OK:
this.warningLabel.set_label ("*BOOM*\n");
break;
case Gtk.ResponseType.CANCEL:
this.warningLabel.set_label ("Good choice!\n");
break;
case Gtk.ResponseType.DELETE_EVENT:
this.warningLabel.set_label ("Dialog closed or cancelled.\n");
break;
}
this._messageDialog.destroy();
}
};
// Spustí aplikaci
let app = new MessageDialogExample ();
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://developer.gnome.org/gio/unstable/GMenu.html">GMenu</link></p></item>
<item><p><link href="http://developer.gnome.org/gio/stable/GSimpleAction.html">GSimpleAction</link></p></item>
<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.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link></p></item>
</list>
</section>
</page>