在 JavaScript GTK 编程教程的这一部分中，我们将介绍对话框。
对话框窗口或对话框是大多数现代 GUI 应用必不可少的部分。 对话被定义为两个或更多人之间的对话。 在计算机应用中，对话框是一个窗口，用于与应用“对话”。 对话框用于输入数据，修改数据，更改应用设置等。对话框是用户与计算机程序之间进行通信的重要手段。
消息对话框是方便的对话框，可向应用的用户提供消息。 该消息包含文本和图像数据。
#!/usr/bin/seed
/*
ZetCode JavaScript GTK tutorial
This example demonstrates a
Message dialog
author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/
Gtk = imports.gi.Gtk;
Gtk.init(null, null);
Example = new GType({
parent: Gtk.Window.type,
name: "Example",
init: function ()
{
init_ui(this);
function init_ui(w) {
w.signal.hide.connect(Gtk.main_quit);
w.set_default_size(250, 200);
w.set_title("Message dialog");
w.set_position(Gtk.WindowPosition.CENTER);
var fixed = new Gtk.Fixed();
var infoButton = new Gtk.Button.with_label("Information");
fixed.put(infoButton, 30, 20);
infoButton.signal.clicked.connect(on_info);
w.add(fixed);
w.show_all();
}
function on_info() {
var md = new Gtk.MessageDialog({modal:true, title:"Information",
message_type:Gtk.MessageType.INFO,
buttons:Gtk.ButtonsType.OK, text:"Download completed."});
md.run();
md.destroy();
}
}
});
var window = new Example();
Gtk.main();我们在窗口上显示一个按钮。 当我们单击按钮时，会显示一条信息消息。
var infoButton = new Gtk.Button.with_label("Information"); 这是一个按钮，当我们单击它时将显示一个对话框。
function on_info() {
var md = new Gtk.MessageDialog({modal:true, title:"Information",
message_type:Gtk.MessageType.INFO,
buttons:Gtk.ButtonsType.OK, text:"Download completed."});
md.run();
md.destroy();
}如果单击信息按钮，将显示“信息”对话框。 Gtk.MessageType.INFO指定对话框的类型。 Gtk.ButtonsType.OK指定对话框中将显示哪些按钮。 最后一个参数是显示的消息。 该对话框使用run()方法显示。 程序员还必须调用destroy()或hide()方法。
图：MessageDialog
AboutDialog显示有关应用的信息。 它可以显示徽标，应用名称，版本，版权，网站或许可证信息。 也有可能对作者，文档撰写者，翻译者和艺术家予以赞扬。
#!/usr/bin/seed
/*
ZetCode JavaScript GTK tutorial
This example demonstrates the
AboutDialog dialog.
author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/
Gtk = imports.gi.Gtk;
GdkPixbuf = imports.gi.GdkPixbuf;
Gtk.init(null, null);
Example = new GType({
parent: Gtk.Window.type,
name: "Example",
init: function ()
{
init_ui(this);
function init_ui(w) {
w.signal.hide.connect(Gtk.main_quit);
w.set_default_size(250, 200);
w.set_title("About dialog");
w.set_position(Gtk.WindowPosition.CENTER);
var button = new Gtk.Button.with_label("About");
button.set_size_request(80, 30);
button.signal.clicked.connect(on_clicked);
var fix = new Gtk.Fixed();
fix.put(button, 20, 20);
w.add(fix);
w.show_all();
}
function on_clicked() {
var about = new Gtk.AboutDialog();
about.set_program_name("Battery");
about.set_version("0.1");
about.set_copyright("(c) Jan Bodnar");
about.set_comments("Battery is a simple tool for battery checking");
about.set_website("http://www.zetcode.com");
about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png"));
about.run();
about.destroy();
}
}
});
var window = new Example();
Gtk.main();该代码示例使用具有某些功能的AboutDialog。
var about = new Gtk.AboutDialog();我们创建AboutDialog的实例。
about.set_program_name("Battery");
about.set_version("0.1");
about.set_copyright("(c) Jan Bodnar");在这里，我们指定程序的名称，版本和版权。
about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png"));此行创建徽标。
图：AboutDialog
FontSelectionDialog是用于选择字体的对话框。 它通常用于进行一些文本编辑或格式化的应用中。
#!/usr/bin/seed
/*
ZetCode JavaScript GTK tutorial
This example works with the
FontSelectionDialog.
author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/
Gtk = imports.gi.Gtk;
Pango = imports.gi.Pango;
Gtk.init(null, null);
Example = new GType({
parent: Gtk.Window.type,
name: "Example",
init: function ()
{
init_ui(this);
var label;
function init_ui(w) {
w.signal.hide.connect(Gtk.main_quit);
w.set_default_size(350, 150);
w.set_title("Font selection");
w.set_position(Gtk.WindowPosition.CENTER);
w.set_border_width(10);
var text = "The only victory over love is flight."
label = new Gtk.Label.c_new(text);
var button = new Gtk.Button.with_label("Select font");
button.signal.clicked.connect(on_clicked);
var fix = new Gtk.Fixed();
fix.put(button, 100, 30);
fix.put(label, 30, 90);
w.add(fix);
w.show_all();
}
function on_clicked() {
var fdia = new Gtk.FontSelectionDialog.c_new("Select font");
var response = fdia.run();
if (response == Gtk.ResponseType.OK) {
var fname = fdia.get_font_name();
var font_desc = Pango.Font.description_from_string(fname);
if (font_desc)
label.modify_font(font_desc);
}
fdia.destroy();
}
}
});
var window = new Example();
Gtk.main();在代码示例中，我们有一个按钮和一个标签。 单击按钮显示FontSelectionDialog。
var fdia = new Gtk.FontSelectionDialog.c_new("Select font");我们创建FontSelectionDialog。
if (response == Gtk.ResponseType.OK) {
var fname = fdia.get_font_name();
var font_desc = Pango.Font.description_from_string(fname);
if (font_desc)
label.modify_font(font_desc);
}如果单击“确定”按钮，则标签小部件的字体将更改为我们在对话框中选择的字体。
图：FontSelectionDialog
在 JavaScript GTK 教程的这一部分中，我们介绍了对话框。