# MessageDialog (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Un message surgissant lié à une fenêtre
Luc Rebert,
traduc@rebert.name 2011
Alain Lojewski,
allomervan@gmail.com 2011-2012
Luc Pionchon
pionchon.luc@gmail.com 2011
Bruno Brouard
annoa.b@gmail.com 2011-12
Luis Menina
liberforce@freeside.fr 2014

# Boîte de dialogue de message

Une BoiteDeDialogueDemessage contient un message modale surgissant auquel vous devez d'abord répondre avant de pouvoir retourner travailler dans la fenêtre à laquelle elle est liée. Elle peut faire exploser le monde (ou au moins elle le prétend). Pour faire apparaître le message surgissant quand vous exécutez cet exemple, cliquez sur « Message » dans le menu de son application : c'est le menu qui s'affiche quand vous cliquez sur le nom de l'application dans le coin supérieur gauche de l'écran, à côté de « Activités ».

La différence entre une BoiteDeDialogueDemessage et une Boîte de dialogue est que la boîte de dialogue peut contenir n'importe quel élément graphique ou contenu que vous souhaitez y mettre, alors que la BoiteDeDialogueDemessage est juste un moyen pratique de faire s'afficher un message basique surgissant avec des boutons.

# Bibliothèques à importer

#!/usr/bin/gjs

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

Ce sont les bibliothèques que nous devons importer pour faire fonctionner cette application. N'oubliez pas que la ligne qui informe GNOME que nous allons utiliser Gjs doit toujours se trouver au début.

# Création de la fenêtre de l'application

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

Tout le code de cet exemple va dans la classe MessageDialogExample. Le code ci-dessus crée une Gtk.Application pour nos composants graphiques et la fenêtre qui les contient.

Avant d'appeler _buildUI pour créer la fenêtre et les éléments graphiques qu'elle contient, il nous faut appeler _initMenus, qui indique à GNOME de générer le menu. Nous pouvons mettre le code actuel pour _initMenus après le code pour _buildUI, car l'ordre n'a pas d'importance du moment que _initMenus est appelé en premier dans _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 fonction _buildUI est l'endroit où nous mettons tout le code nécessaire à la création de l'interface utilisateur de l'application. La première étape consiste à créer une Gtk.ApplicationWindow pour y mettre tous nos éléments graphiques.

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

# Création du menu de l'application

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

Ici, nous construisons le GMenu où nous mettons le bouton « Message » qui active la BoiteDeDialogueDemessage. le GMenu est le menu qui s'affiche quand vous cliquez sur le nom de l'application dans le coin supérieur gauche de l'écran, à côté de « Activités ». Notre menu ne contient que deux options : Message et Quit.

# Création de la BoiteDeDialogueDemessage

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

Pour que notre BoiteDeDialogueDemessage soit liée à la fenêtre principale, nous définissons sa propriété modale à vrai et la configurons comme une "transient_for" _window. Ensuite, nous définissons quel type de bouton et quel genre de message nous voulons y mettre (celui-ci va déterminer le type d'icône qui accompagnera le message). Enfin nous y saisissons le texte du message et connectons son signal « response » à la fonction de rappel qui le prend en charge.

Voici quelques ressources pour bâtir vos propres BoiteDeDialogueDemessage

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

}

});

Cette fonction prend deux paramètres : la BoiteDeDialogueDemessage et son identifiant response_id. Les deux sont fournis automatiquement (il n'y a pas besoins d'intervention manuelle pour que cela fonctionne). Ici, nous utilisons un interrupteur simple pour modifier le texte « warning label » en fonction de l'option sélectionnée. Le DELETE_EVENT se produit en appuyant sur la touche Échap pour annuler la BoiteDeDialogueDemessage au lieu de cliquer sur OK ou Cancel. Quel que soit votre choix, le message surgissant est détruit ensuite.

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

Pour finir, nous créons un nouvel exemple de la classe MessageDialogExample terminée et nous démarrons l'application.

# Exemple complet de code

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

# Documentation approfondie

Dans cet exemple, les éléments suivants sont utilisés :

GMenu

GSimpleAction

Gtk.Application

Gtk.ApplicationWindow

Gtk.MessageDialog