# MessageDialog (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Vyskakovací zpráva svázaná s oknem

# MessageDialog

`MessageDialog` 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 Message 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 Činností.

Rozdíl mezi widgety `MessageDialog` a Dialog je v tom, že `Dialog` může obsahovat jakékoliv widgety, které do něj vložíte, zatímco `MessageDialog` je jen vhodný způsob, jak zobrazit obyčejnou zprávu a tlačítka.

# 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 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 (); },

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.

Než zavoláme `_buildUI`, aby se vytvořilo okno a widgety v něm, potřebujeme zavolat funkci `_initMenus`, která GNOME řekne, aby vytvořilo nabídku. Reálný kód pro `_initMenus` můžeme vložit za kód `_buildUI`, jelikož nezáleží na tom, v jakém pořadí jsou vloženy, protože `_initMenus` je zavoláno jako první z `_onStartup`.

// 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 });

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ří 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);

V tomto příkladu, je vším, co vyskakovací okno přinese, jen bláznivé varování ve widgetu Label.

# Vytvoření nabídky aplikace

// 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); },

Zde sestavíme GMenu, do které ho přidáme položku Message, která vyvolá dialogové okno se zprávou. `GMenu` je nabídka, která se objeví po kliknutí na název aplikace v levém horním rohu obrazovky vedle Činností. Naše nabídka má jen dvě položky: Message a Quit.

# Vytvoření okna typu MessageDialog

_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(); },

Aby naše dialogové okno se zprávou vyskočilo svázané s hlavním oknem, nastavíme jeho vlastnost `modal` na `true` a `transient_for` na `_window`. 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 `"response"` na funkci zpětného volání, která jej zpracuje.

Zde je pár zdrojů, kterém můžete použít při vytváření vlastních widgetů `MessageDialog`:

Seznam typů tlačítek

Seznam typů zpráv

// 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();

}

});

Tato funkce má dva parametry, `MessageDialog` a jeho `response_id`, z nichž oba jsou zajištěny automaticky (nemusíte je ručně předávat, aby to fungovalo). Zde použijeme jednoduchou konstrukci `switch`, která změní text varování podle vybrané volby. Když místo kliknutí na tlačítko OK nebo Cancel zmáčknete Esc, nastane událost `DELETE_EVENT`. Ve všech případech dojde k likvidaci dialogového okna.

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

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

# Dokumentace jdoucí do hloubky

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

GMenu

GSimpleAction

Gtk.Application

Gtk.ApplicationWindow

Gtk.MessageDialog