MessageDialog (JavaScript)

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

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