# MessageDialog(JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
창에 붙여 띄우는 메시지
조성호
shcho@gnome.org 2017-2019.

# MessageDialog

MessageDialog는 모달 메시지 대화상자인데, 대화상자가 붙어 어떤 일을 하던 창으로 돌아가려면 반드시 응답해야 하는 팝업입니다. 이렇게 해서 전세계를 폭발하게 할 수 있습니다(아니면 최소한 그럴 수 있다고 해두죠). 이 예제를 실행할 때 팝업을 나타내려면, 프로그램 메뉴의 “Message”를 누르십시오. 좌측 상단 화면 구석에 있는 현재 활동 옆 프로그램 이름을 누르면 나타나는 메뉴입니다.

MessageDialog와 Dialog 의 차이점은 Dialog는 어떤 위젯이든 넣고 여러분이 넣고 싶은 컨텐트를 넣을- 수 있습니다, 다만 MessageDialog는 기본 메시지와 단추로 팝업을 띄우는 편의 수단일 뿐입니다.

# 가져올 라이브러리

#!/usr/bin/gjs

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

이 프로그램을 실행할 때 가져올 라이브러리입니다. 시작 부분에 항상 gjs가 필요함을 알리는 줄을 작성해야 함을 기억하십시오.

# 프로그램 창 만들기

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

이 예제의 모든 코드는 MessageDialogExample 클래스에 넣었습니다. 위 코드에서는 위젯과 창을 담아둘 Gtk.Application을 만들었습니다.

창을 만들고 위젯을 그 안에 넣으려 _buildUI를 호출할 수 있기 전, 그놈에 메뉴를 만들어주라고 지시하는 _initMenus를 호출해야합니다. _onStartup에서 _initMenus를 우선 호출하는 동안 어떤 순서로 두는지는 중요하지 않으니, _buildUI 코드 다음에 _initMenus의 실제 코드를 둘 수 있습니다.

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

_buildUI 함수는 프로그램 사용자 인터페이스를 만드는 모든 코드를 넣는 곳입니다. 첫 단계에서는 모든 위젯을 우겨넣을 새 Gtk.ApplicationWindow를 만듭니다.

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

이 예제에서는 창에 모든걸 넣고, 저기에서 띄워줄 문장은 유치한 경고 Label입니다.

# 프로그램 메뉴 만들기

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

여기서 우리가 나중에 팝업 MessageDialog를 실행할 "Message" 단추를 두는 GMenu를 만들겠습니다. GMenu는 화면의 좌측 상단, 현재 활동 옆에 프로그램 이름을 눌렀을 때 프로그램 이름을 나타내는 메뉴입니다. 우리가 쓰는 메뉴는 옵션을 Message, Quit 두 개만 두었습니다.

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

MessageDialog 팝업을 메인 창에 붙이려면, 모달 속성을 True로 설정하고 "transient_for" 창을 설정합니다. 다음 단추 종류를 설정하고 어떤 메시지를 보여줄지 설정(메시지 옆 아이콘 표시 종류를 결정)할 수 있으며, "response" 시그널을 처리할 콜백 함수에 연결하기 전에 텍스트를 넣을 수 있습니다.

여기에 MessageDialog를 만들 때 몇가지 참고할 자료가 있습니다:

단추 형식 목록

메시지 형식 목록

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

}

});

이 함수에는 MessageDialog와 response_id 두 매개변수가 있는데, 두 매개 변수 값은 자동으로 들어갑니다(동작하게 할 때 직접 넣을 필요는 없습니다). 여기서, 선택한 옵션에 따라 “warning label”의 텍스트를 바꾸는 간단한 스위치를 사용하겠습니다. DELETE_EVENT는 확인 또는 취소를 누르는 대신 MessageDialog 처리를 취소하려고 Escape 키를 누를 경우 발생합니다. 무얼 선택하든지간에 팝업은 나중에 해체됩니다.

// Run the application 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