使用 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.Widget 的所有属性均可以通过向构造器传入的 Object 进行设置,而可用的属性可以通过运行 gtk3-widget-factory,然后启用 GtkInspector 来查看和实验。

布局

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

设置 CSS Class

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

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

控件杂项

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

Gtk.Widigetsensitive 属性相当于 Android 中的 android:enabled

结语

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

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

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