# MessageDialog (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Una mensaje emergente acoplado a una ventana

# MessageDialog

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.

The difference between a MessageDialog and a Dialog 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.

# Bibliotecas que importar

#!/usr/bin/gjs

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

Estas son las bibliotecas que necesita importar para que esta aplicación se ejecute. Recuerde que la línea que le dice a GNOME que está usando Gjs siempre tiene que ir al principio.

# Crear la ventana de la aplicación

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

// Create the application itself _init: function () { 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', Lang.bind(this, this._onActivate)); this.application.connect('startup', Lang.bind(this, this._onStartup)); },

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

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

All the code for this sample goes in the MessageDialogExample class. The above code creates a Gtk.Application for our widgets and window to go in.

Antes de llamar a «_buildUI» para crear la ventana y sus widgets, es necesario llamar a «_initMenus», que le dice a GNOME que cree el menú. Se puede poner el código de «_initMenus» después del código de «_buildUI», dado que no importa en qué orden se esté mientras que «_initMenus» se llame primero en «_onStartup».

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

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

La función _buildUI es donde se pone todo el código que crea la interfaz de usuario de la aplicación. El primer paso es crear una Gtk.ApplicationWindow nueva para poner dentro todos los widgets.

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

For this example, all that we have in the window the popup comes out of is a silly warning Label.

# Crear el menú de la aplicación

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

Here, we build the GMenu 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.

# Crear el «MessageDialog»

_showMessageDialog: function () {

// 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', Lang.bind(this, this._response_cb)); this._messageDialog.show(); },

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.

Here are some resources for making your own MessageDialogs:

List of button types

List of message types

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

}

});

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.

// Run the application let app = new MessageDialogExample (); app.application.run (ARGV);

Finally, we create a new instance of the finished MessageDialogExample class, and set the application running.

# Código de ejemplo completo

# Documentación en profundidad

En este ejemplo se usa lo siguiente:

GMenu

GSimpleAction

Gtk.Application

Gtk.ApplicationWindow

Gtk.MessageDialog