MessageDialog (JavaScript)

Ένας MessageDialog είναι ένας αναγκαστικός διάλογος μηνύματος, που σημαίνει έναν αναδυόμενο στον οποίο πρέπει να απαντήσετε πριν να επιστρέψετε σε ότι κάνατε στο παράθυρο στο οποίο είναι προσαρτημένο. Αυτό μπορεί να προκαλέσει την έκρηξη του κόσμου (ή τουλάχιστον λέει ότι μπορεί). Για να κάνετε το αναδυόμενο να εμφανιστεί όταν εκτελείτε αυτό το δείγμα, πατήστε στο "Message" μέσα στο μενού της εφαρμογής του -- αυτό είναι το μενού που εμφανίζεται όταν πατάτε στο όνομα μιας εφαρμογής στην πάνω αριστερή γωνία της οθόνης, δίπλα στις ενέργειες.

Βιβλιοθήκες για εισαγωγή


#!/usr/bin/gjs

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

Αυτές είναι οι βιβλιοθήκες που χρειαζόμαστε να εισάγουμε αυτήν την εφαρμογή για να εκτελεστεί. Να θυμόσαστε ότι η γραμμή που λέει στο GNOME ότι χρησιμοποιούμε Gjs χρειάζεται πάντοτε να πάει στην αρχή.

Δημιουργία του παραθύρου εφαρμογής


const MessageDialogExample = new Lang.Class ({
    Name: 'MessageDialog Example',

    // Δημιουργία της εφαρμογής αυτής καθεαυτής
    _init: function () {
        this.application = new Gtk.Application ({
            application_id: 'org.example.jsmessagedialog',
            flags: Gio.ApplicationFlags.FLAGS_NONE });

        // Σύνδεση σημάτων 'activate' και 'startup' με τις συναρτήσεις επανάκλησης
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Η συνάρτηση επανάκλησης για το σήμα 'activate' παρουσιάζει παράθυρα όταν είναι ενεργή
    _onActivate: function () {
        this._window.present ();
    },

    // Η συνάρτηση επανάκλησης για το σήμα 'startup' αρχικοποιεί τα μενού και δομεί τη διεπαφή χρήστη
    _onStartup: function () {
        this._initMenus();
        this._buildUI ();
    },

Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση MessageDialogExample. Ο παραπάνω κώδικας δημιουργεί μια Gtk.Application για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.

Πριν καλέσουμε _buildUI για δημιουργία του παραθύρου και των γραφικών στοιχείων μέσα του, χρειαζόμαστε να καλέσουμε _initMenus, που λέει στο GNOME να δημιουργήσει το μενού. Μπορούμε να βάλουμε τον ενεργό κώδικα για _initMenus μετά τον κώδικα για _buildUI, αφού δεν πειράζει η σειρά που τα βάλαμε όσο το _initMenus καλείται πρώτο στο _onStartup.


    // Δημιουργία της διεπαφής χρήστη της εφαρμογής
    _buildUI: function () {

        // Δημιουργία του παραθύρου της εφαρμογής
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            title: "Gtk.MessageDialog Example",
            default_height: 200,
            default_width: 400 });

Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο Gtk.ApplicationWindow για να βάλουμε μέσα τα γραφικά στοιχεία μας.


        // Δημιουργία ενός χαζού μηνύματος προειδοποίησης και προσθήκη του στο παράθυρο
        this.warningLabel = new Gtk.Label ({
            label: "This application goes boom! (Not really.)"});
        this._window.add (this.warningLabel);

Για αυτό το παράδειγμα, όλο ότι έχουμε στο παράθυρο που εμφανίζεται το αναδυόμενο είναι μια χαζή προειδοποίηση Label.

Δημιουργία του μενού της εφαρμογής


    // Δημιουργία του μενού της εφαρμογής, συμπεριλαμβανομένου του κουμπιού που καλεί τον διάλογο
    _initMenus: function() {
        let menu = new Gio.Menu();
        menu.append("Message",'app.message');
        menu.append("Quit",'app.quit');
        this.application.set_app_menu(menu);

        // Αυτό αναδύει ένα μήνυμα διαλόγου όταν πατιέται "Message" στο μενού
        let messageAction = new Gio.SimpleAction ({ name: 'message' });
        messageAction.connect('activate', Lang.bind(this,
            function() {
                this._showMessageDialog();
            }));
        this.application.add_action(messageAction);

        // Αυτό κλείνει το παράθυρο όταν πατιέται  "Quit" στο μενού
        let quitAction = new Gio.SimpleAction ({ name: 'quit' });
        quitAction.connect('activate', Lang.bind(this,
            function() {
                this._window.destroy();
            }));
        this.application.add_action(quitAction);
    },

Εδώ, κατασκευάζουμε το GMenu όπου θα βάλουμε το κουμπί "Message" που προκαλεί το αναδυόμενο MessageDialog. Το GMenu είναι το μενού που εμφανίζεται όταν πατάς το όνομα της εφαρμογής στην πάνω αριστερή γωνία της οθόνης, δίπλα στο μενού ενέργειες. Το μενού μας έχει μόνο δύο επιλογές: μήνυμα και κλείσιμο.

Δημιουργία του MessageDialog


    _showMessageDialog: function () {

        // Δημιουργία αναγκαστικού διαλόγου μηνύματος του οποίου το γονικό είναι στο παράθυρο
        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();
    },

Για να κάνετε τον MessageDialog μας ένα προσαρτημένο αναδυόμενο στο κύριο παράθυρο, ορίζουμε την αναγκαστική του ιδιότητα σε αληθή και το ορίζουμε να είναι "transient_for" _window. Μετά από αυτό, μπορούμε να ορίσουμε τι είδους κουμπιά έχει και τι είδους μήνυμα είναι (που καθορίζει τι εικονίδιο εμφανίζεται δίπλα στο μήνυμα) και να γραφτεί το κείμενο μέσα του, πριν τη σύνδεση του σήματος του "response" στη συνάρτηση επανάκλησης που το χειρίζεται.

Εδώ υπάρχουν μερικές πηγές για να κάνετε τα δικά σας MessageDialogs:

List of button types

List of message types


    // Η συνάρτηση επανάκλησης (χειριστής σήματος aka) για το σήμα απάντησης
    _response_cb: function (messagedialog, response_id) {

        // Ένας απλός διακόπτης που αλλάζει την ετικέτα του κυρίως παραθύρου
        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();

    }

});

Αυτή η συνάρτηση παίρνει δύο παραμέτρους, τον MessageDialog και την response_id, και οι δυο τους παρέχονται αυτόματα (δεν χρειάζεται να τις περάσετε αυτόματα σε αυτό για να δουλέψει). Εδώ χρησιμοποιούμε ένα απλό διακόπτη για αλλαγή του κειμένου της "warning label", ανάλογα με το ποια επιλογή διαλέγετε. Η DELETE_EVENT συμβαίνει εάν πατήσετε διαφυγή για να ακυρώσετε τον MessageDialog, αντί να πατήσετε εντάξει ή ακύρωση. Ό,τι και να επιλέξετε, το αναδυόμενο καταστρέφεται κατόπιν.


// Εκτέλεση της εφαρμογής
let app = new MessageDialogExample ();
app.application.run (ARGV);

Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της ολοκληρωμένης κλάσης MessageDialogExample και εκτελούμε την εφαρμογή.

Δείγμα πλήρους κώδικα

#!/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', () => { 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', () => { 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);

Τεκμηρίωση σε βάθος

Σε αυτό το παράδειγμα χρησιμοποιήσαμε τα παρακάτω:

GMenu

GSimpleAction

Gtk.Application

Gtk.ApplicationWindow

Gtk.MessageDialog