使用 JavaScript 编写 GTK+ 3 应用程序

前言

JavaScript 是一门灵活的动态语言，在实现应用功能时十分易用。最近有写作图形界面程序的需要，又比较喜爱 GTK+ 3 的设计，因此想到可以尝试使用 JavaScript 来完成任务。

选择运行时

首选的运行时当然是 node，因为它有着良好的 ES2015 特性支持，并且可以方便地使用 npm 管理的模块。在经过一番搜索之后，我找到了 WebReflection/node-gtk 这个项目，却发现它无法使用 node-gyp 在我的 Arch Linux 上进行编译。另一个 creationix/node-gir 提供了对 GObject Introspection 的绑定，但是在它的 README 中写明了有 bug 和内存管理等问题，看上去也难以令人满意。

因此，我选择了使用 GJS 作为运行时。虽然没有 node 的 ES2015 支持和使用不同模块的便利，但对于使用 GObject Introspection 的绑定而言足够可靠。

编写应用程序

GNOME 官方提供了 一个简单的 GJS 程序示例，可以按照它的架构进行编程。

文档

• GTK+ Workspace：GTK+ 项目主页，有各种链接。
• GTK+ 3 Reference Manual：GTK+ C API 文档，最为基础。
• Project Gjs：Gjs 项目主页，有各种链接。
• Gjs Generated Documentation：可以查看部分命名不同。
• The Python GTK+ 3 Tutorial：可以作为 GTK+ 3 教程进行参考。

技巧

通过构造器设置属性

Gtk.Widget 的所有属性均可以通过向构造器传入的 Object 进行设置，而可用的属性可以通过运行 gtk3-widget-factory，然后启用 GtkInspector 来查看和实验。

布局

可以一直使用 Gtk.Grid 进行布局，它的功能类似于 Android 中的 LinearLayout。可以设置它的 border_width、row_spacing 和 column_spacing 来控制留白，以及设置 expand、hexpand 和 vexpand 控制大小。通过调用（继承自 Gtk.Container 并经过覆盖）add() 方法即可按顺序添加子控件，不需要使用 attach() 那样复杂的功能。

设置 CSS Class

例如给 Gtk.Button 添加 suggested-action CSS 类使其变蓝：

button.get_style_context().add_class('suggested-action');

控件杂项

Gtk.Entry 相当于 Android 中的 EditText。可以通过设置 width_char 来修改 Gtk.Entry 的最小大小。

Gtk.Widiget 的 sensitive 属性相当于 Android 中的 android:enabled。

结语

Gjs 使得我们可以使用灵活的 JavaScript 编写美观的原生程序，总体来说体验是很好的。

我把自己编写的一个小程序放在了 GitHub Gist，可以作为参考。

最后，在编写这篇文章时，我找到了另一个 结合了 Gjs、NPM 和 Babel 的示例项目，读者也可以参考它进行编程。