<?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" lang="sv">
  <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>Ett poppuppmeddelande fäst vid ett fönster</desc>
  <credit type="translator copyright"><name>Sebastian Rasmussen</name><email>sebras@gmail.com</email><years>2019</years></credit><credit type="translator copyright"><name>Anders Jonsson</name><email>anders.jonsson@norsjovallen.se</email><years>2021</years></credit></info>

  <title>MessageDialog</title>
  <media type="image" mime="image/png" src="media/messagedialog.png"/>
  <p>A MessageDialog is a modal message dialog, which means a popup that you have to respond to before you get back to what you were doing in the window that it's attached to. This one can cause the world to explode (or at least it says that it can). To make the popup appear when you run this sample, click on "Message" inside of its application menu -- that's the menu that appears when you click on an application's name in the upper-left screen corner, next to Activities.</p>
  <note><p>The difference between a MessageDialog and a <link xref="dialog.js">Dialog</link> is that a Dialog can contain whatever widgets and content you want to put in it, whereas a MessageDialog is just a convenient way to make popups appear with a basic message and buttons.</p></note>
    <links type="section"/>

  <section id="imports">
    <title>Bibliotek att importera</title>
    <code mime="application/javascript">
#!/usr/bin/gjs

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
</code>
    <p>Detta är biblioteken som vi behöver importera för att detta program ska köras. Kom ihåg att raden som säger till GNOME att vi använder Gjs alltid behöver vara först.</p>
  </section>

  <section id="applicationwindow">
    <title>Skapa programfönstret</title>
    <code mime="application/javascript">
const MessageDialogExample = new Lang.Class ({
    Name: 'MessageDialog-exempel',

    // Skapa programmet i sig
    _init: function () {
        this.application = new Gtk.Application ({
            application_id: 'org.example.jsmessagedialog',
            flags: Gio.ApplicationFlags.FLAGS_NONE });

        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
    _onActivate: function () {
        this._window.present ();
    },

    // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
    _onStartup: function () {
        this._initMenus();
        this._buildUI ();
    },
</code>
    <p>All kod för detta exempel hamnar i klassen MessageDialogExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.</p>
    <note><p>Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.</p></note>
    <code mime="application/javascript">
    // Bygg programmets användargränssnitt
    _buildUI: function () {

        // Skapa programfönstret
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            title: "Gtk.MessageDialog-exempel",
            default_height: 200,
            default_width: 400 });
</code>
    <p>_buildUI-funktionen är var vi stoppar all kod för att skapa programmets användargränssnitt. Det första steget är att skapa ett nytt <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> att stoppa alla våra komponenter i.</p>

    <code mime="application/javascript">
        // Skapa ett fånigt varningsmeddelande och lägg till det till fönstret
        this.warningLabel = new Gtk.Label ({
            label: "Detta program sprängs! (Inte på riktigt.)"});
        this._window.add (this.warningLabel);
</code>
    <p>For this example, all that we have in the window the popup comes out of is a silly warning <link xref="label.js">Label</link>.</p>
  </section>

  <section id="menu">
    <title>Skapa programmets meny</title>
    <code mime="application/javascript">
    // Build the application menu, including the button that calls the dialog
    _initMenus: function() {
        let menu = new Gio.Menu();
        menu.append("Message",'app.message');
        menu.append("Quit",'app.quit');
        this.application.set_app_menu(menu);

        // This pops up a MessageDialog when "Message" is clicked in the menu
        let messageAction = new Gio.SimpleAction ({ name: 'message' });
        messageAction.connect('activate', Lang.bind(this,
            function() {
                this._showMessageDialog();
            }));
        this.application.add_action(messageAction);

        // This closes the window when "Quit" is clicked in the menu
        let quitAction = new Gio.SimpleAction ({ name: 'quit' });
        quitAction.connect('activate', Lang.bind(this,
            function() {
                this._window.destroy();
            }));
        this.application.add_action(quitAction);
    },
</code>
    <p>Here, we build the <link xref="gmenu.js">GMenu</link> where we'll be putting the "Message" button which triggers the popup MessageDialog. The GMenu is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: Message, and Quit.</p>
  </section>

  <section id="messagedialog">
    <title>Skapa vår MessageDialog</title>
    <code mime="application/javascript">
    _showMessageDialog: function () {

        // Skapa en modal MessageDialog vars förälder är fönstret
        this._messageDialog = new Gtk.MessageDialog ({
            transient_for: this._window,
            modal: true,
            buttons: Gtk.ButtonsType.OK_CANCEL,
            message_type: Gtk.MessageType.WARNING,
            text: "Denna åtgärd kommer få universum att sluta existera." });

        this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
        this._messageDialog.show();
    },
</code>
    <p>To make our MessageDialog a popup attached to the main window, we set its modal property to true and set it to be "transient_for" _window. After that, we can set what kind of buttons it has and what kind of message it is (which determines what icon appears next to the message), and write out the text inside it, before connecting its "response" signal to the callback function which handles it.</p>
    <note><p>Här är några resurser för att göra dina egna MessageDialoger:</p>
      <list>
        <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">Lista över knapptyper</link></p></item>
        <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">Lista över meddelandetyper</link></p></item>
      </list>
    </note>

    <code mime="application/javascript">
    // Callback function (aka signal handler) for the response signal
    _response_cb: function (messagedialog, response_id) {

        // A simple switch that changes the main window's label
        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>This function takes two parameters, the MessageDialog and its response_id, both of which are automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the popup is destroyed afterwards.</p>

    <code mime="application/javascript">
// Kör programmet
let app = new MessageDialogExample ();
app.application.run (ARGV);
</code>
    <p>Slutligen skapar vi en ny instans av den slutförda MessageDialogExample-klassen, och startar programmet.</p>
  </section>

  <section id="complete">
    <title>Fullständigt kodexempel</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 {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsmessagedialog',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
    }

    // Callback function for 'activate' signal presents windows when active
    _onActivate() {
        this._window.present();
    }

    // Callback function for 'startup' signal initializes menus and builds the UI
    _onStartup() {
        this._initMenus();
        this._buildUI ();
    }

    // Build the application's UI
    _buildUI() {

        // Create the application window
        this._window = new Gtk.ApplicationWindow({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            title: "Gtk.MessageDialog Example",
            default_height: 200,
            default_width: 400
        });

        // Create a silly warning message and add it to the window
        this.warningLabel = new Gtk.Label({
            label: "This application goes boom! (Not really.)"
        });
        this._window.add (this.warningLabel);

        // Show the window and all child widgets
        this._window.show_all();
    }

    // Build the application menu, including the button that calls the dialog
    _initMenus() {
        let menu = new Gio.Menu();
        menu.append("Message",'app.message');
        menu.append("Quit",'app.quit');
        this.application.set_app_menu(menu);

        // This pops up a MessageDialog when "Message" is clicked in the menu
        let messageAction = new Gio.SimpleAction ({ name: 'message' });
        messageAction.connect('activate', () =&gt; { this._showMessageDialog(); });
        this.application.add_action(messageAction);

        // This closes the window when "Quit" is clicked in the menu
        let quitAction = new Gio.SimpleAction ({ name: 'quit' });
        quitAction.connect('activate', () =&gt; { this._window.destroy(); });
        this.application.add_action(quitAction);
    }

    _showMessageDialog() {

        // Create a modal MessageDialog whose parent is the window
        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();
    }

    // Callback function (aka signal handler) for the response signal
    _response_cb(messagedialog, response_id) {

        // A simple switch that changes the main window's label
        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();

    }
};

// Run the application
let app = new MessageDialogExample ();
app.application.run (ARGV);
</code>
  </section>

  <section id="in-depth">
    <title>Djupgående dokumentation</title>
<p>I detta exempel använde vi följande:</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>
