原文： http://zetcode.com/gui/javascriptgtktutorial/introduction/

在 JavaScript GTK 编程教程的这一部分中，我们将介绍 GTK 库并使用 JavaScript 编程语言创建第一个程序。

本教程的目的是帮助您开始使用 GTK 和 JavaScript。 GTK 是用于创建图形用户界面的领先工具包之一。 JavaScript 是一种流行的脚本语言，主要用于浏览器中。 近年来，JavaScript 已进入其他领域，包括台式机上的用户界面编程和使用诸如 JavaScript++ 之类的语言来创建 JavaScript 类的面向对象编程（OOP）。

Seed

Seed 是一个 JavaScript 解释器，也是 GNOME 项目的库，用于在 JavaScript 中创建独立的应用。 它使用 WebKit 项目的 JavaScript 引擎 JavaScriptCore。

种子使用GObject内省来访问 Gnome 库。 GTK 是 Gnome 库之一。

简单的例子

在第一个示例中，我们创建一个简单的窗口。 窗口在屏幕上居中。 该代码以过程样式编写。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. This program centers a window on 
  7. the screen.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. Gtk = imports.gi.Gtk;
  16. Gtk.init(null, null);
  18. window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL });
  20. window.signal.hide.connect(Gtk.main_quit);
  21. window.set_default_size(250, 200);
  22. window.set_title("Center");
  23. window.set_position(Gtk.WindowPosition.CENTER);
  25. window.show();
  27. Gtk.main();

本示例在屏幕中央显示一个250x200像素的窗口。

  1. Gtk = imports.gi.Gtk;

我们导入 Gtk 库。

  1. Gtk.init(null, null);

此行初始化 GTK 库以供使用。

  1. window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL });

该行创建一个顶层Window。 窗口是一个容器。 在大多数情况下（但并非总是如此），主应用窗口是顶级窗口。

  1. window.signal.hide.connect(Gtk.main_quit);

在这里，我们将hide信号连接到回调。 main_quit()方法永久退出该应用。 当我们单击标题栏中的关闭按钮或按 Alt + F4 组合键时，会发出隐藏信号。

  1. window.set_default_size(250, 200);

我们为应用窗口设置默认大小。

  1. window.set_title("Center");

我们使用set_title()方法为窗口设置标题。

  1. window.set_position(Gtk.WindowPosition.CENTER);

这条线使窗口在屏幕上居中。

  1. window.show();

一切准备就绪后，我们在屏幕上显示窗口。

  1. Gtk.main();

我们设置了应用。 创建无限循环。 从这一点开始，应用就坐下来，等待用户或系统的外部事件。 循环一直运行到终止为止。

我们有以面向对象样式编写的相同代码示例。 JavaScript 在某种程度上支持面向对象的编程。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. This program centers a window on 
  7. the screen.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. Gtk = imports.gi.Gtk;
  16. Gtk.init(null, null);
  18. Example = new GType({
  19.     parent: Gtk.Window.type,
  20.     name: "Example",
  21.     init: function()
  22.     {
  23.         init_ui(this);
  25.         function init_ui(w) {
  27.             w.signal.hide.connect(Gtk.main_quit);
  28.             w.set_default_size(250, 200);
  29.             w.set_title("Center");
  30.             w.set_position(Gtk.WindowPosition.CENTER);    
  31.             w.show();
  32.         }
  33.     }    
  34. });
  36. var window = new Example();
  37. Gtk.main();

前面的示例以面向对象的样式重写。

  1. Example = new GType({
  2.     parent: Gtk.Window.type,
  3.     name: "Example",
  4.     init: function()
  5.     {

我们创建一个新类型。 它继承自 GTK Window 小部件。 我们将代码放入该类型的 init 方法中。

创建工具提示

第二个示例将显示一个工具提示。 工具提示是一个小的矩形窗口，它提供有关对象的简短信息。 它通常是一个 GUI 组件。 它是应用帮助系统的一部分。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. This code shows a tooltip on 
  7. a window and a button.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. Gtk = imports.gi.Gtk;
  16. Gtk.init(null, null);
  18. Example = new GType({
  19.     parent: Gtk.Window.type,
  20.     name: "Example",
  21.     init: function()
  22.     {
  23.         init_ui(this);
  25.         function init_ui(w) {
  27.             w.signal.hide.connect(Gtk.main_quit);
  28.             w.set_default_size(250, 200);
  29.             w.set_title("Tooltips");
  30.             w.set_position(Gtk.WindowPosition.CENTER);    
  32.             var fix = new Gtk.Fixed();
  34.             var button = new Gtk.Button({ label: "Button" });
  35.             button.set_size_request(80, 35);     
  36.             button.set_tooltip_text("Button widget");
  38.             fix.put(button, 50, 50);
  39.             w.add(fix);
  41.             w.set_tooltip_text("Window widget");            
  43.             w.show_all();
  44.         }
  45.     }    
  46. });
  48. var window = new Example();
  49. Gtk.main();

该示例创建一个窗口。 如果将鼠标指针悬停在窗口区域上方，则会弹出一个工具提示。

  1. button.set_tooltip_text("Button widget");

我们使用set_tooltip_text()方法设置工具提示。

JavaScript GTK 简介 - 图1

图：工具提示

退出按钮

在本节的最后一个示例中，我们将创建一个退出按钮。 当我们按下此按钮时，应用终止。

  1. #!/usr/bin/seed
  3. /*
  4. ZetCode JavaScript GTK tutorial
  6. This program creates a quit
  7. button. When we press the button,
  8. the application terminates. 
  10. author: Jan Bodnar
  11. website: www.zetcode.com
  12. last modified: August 2011
  13. */
  15. Gtk = imports.gi.Gtk;
  17. Gtk.init(null, null);
  19. Example = new GType({
  20.     parent: Gtk.Window.type,
  21.     name: "Example",
  22.     init: function()
  23.     {
  24.         init_ui(this);
  26.         function init_ui(w) {
  28.             var fix = new Gtk.Fixed();              
  29.             var btn = new Gtk.Button({ label: "Quit" });
  31.             btn.signal.clicked.connect(Gtk.main_quit);
  32.             btn.set_size_request(80, 35);     
  34.             fix.put(btn, 50, 50);    
  36.             w.add(fix);
  38.             w.signal.hide.connect(Gtk.main_quit);
  39.             w.set_default_size(250, 200);
  40.             w.set_title("Quit button");
  41.             w.set_position(Gtk.WindowPosition.CENTER);
  42.             w.show_all();  
  43.         }
  44.     }    
  45. });
  47. var window = new Example();
  48. Gtk.main();

我们使用Button小部件。 这是一个非常常见的小部件。 它显示文本标签，图像或两者。

  1. init_ui(this);

我们将用户界面的创建委托给init_ui()方法。

  1. var btn = new Gtk.Button({ label: "Quit" });

在这里，我们创建一个按钮小部件。

  1. btn.signal.clicked.connect(Gtk.main_quit);

我们将main_quit()方法插入按钮clicked信号。

  1. btn.set_size_request(80, 35);

我们为按钮设置大小。

  1. fix.put(btn, 50, 50);

我们将退出按钮放入x = 50和y = 50的固定容器中。

  1. w.show_all();

我们有两个选择。 在所有小部件上调用show()，或调用show_all()（显示容器及其所有子代）。

JavaScript GTK 简介 - 图2

图：退出按钮

本节介绍了使用 JavaScript 语言的 GTK 库。