2000/01/02 by maa
Introduction
在了解 Glade 之前，我想你应该先了解一下 GTK+ 与 Glade 之间的关系：
GTK+ (GIMP Tool Kit) 是一套图形函式库 (GUI, Graphical User Intreface)，可用来建立 X Window System 以图形为基础 (GUI-based) 的应用程式。一开始 GTK+ 是写来给 GIMP (GNU Image Manipulation Program) 图形处理软体使用的，不过随着 GNU/Linux 与 GNOME Desktop (使用了 GTK+) 的流行， GTK+ 图形库已经慢慢普遍使用在各种工具中。
虽然有了 GTK+，但是要用 GTK+ 来撰写程式并不是一件轻松的事，因为要完成一个 GUI-based 的应用程式，得靠自己用熟悉的文书编辑器，一行一行把 C 程式码敲出来。如果你是个抽象思考力非常好，又很有耐性写程式码的人，也许只要几个小时就能把 GTK+ 摸透；但如果你和我一样也是个懒堕的家伙，我想能撑个一小时来弄清楚 GTK+ 有什用，就可算是一件非常了不起的事了 :-)。还好，Glade 的出现让我在想放弃前有了回心转意的念头。
Glade 是 GTK+ 图形使用者介面产生器 (User Interface Builder for GTK+). 也就是说，Glade 是个 Visual Programming Tool，和 Microsoft Windows 平台的 Visual Tools (VB、Delphi) 类似，只要用滑鼠拉一拉，它就会自动帮你产生 C source code。所以我们这些懒人，就不用再去为画面的设计烦脑，用 Glade 设计好画面，再用编辑器把程式码稍为修修减减就 OK 了。(现在也有各种语言如 C++、Ada95、Python、Perl 等的 GTK+ 介面，如果再搭配其它工具，也可以自动产生 C++, Ada95, Python and Perl 的程式码)。
本文概括性的介绍如何用 Glade 来建立使用者介面，同时也包含了用 Glade 设计介面的一个简单例子。
Glade Overview
首先，让我们先认识一下 Glade 的几个主要视窗：
| The Project Window 是 Glade 主视窗，它会列出 Project 中的 Window、Dialog 等视觉元件 (Widget)。用滑鼠点选两下上头的项目，就会显示对应的 Window 或 Dialog 设计划面。Project Window 上的选单和工具列用来建立、载入跟储存专案以及产生原始程式码。 | The Project Window
|
| 第二个视窗是 The Palette Window。它以小图示来表示所有可使用的 GTK+ Widgets (视觉元件)。要新增 windows 和 dialogs 到 Project 中 ，只要按一下 Platette (元件盘) 上的小图示即可。如果你想知道哪个图示是 window，只要将滑鼠移至图示上，停留一会儿就知道了。同样地，要新增 widgets 到 window 或 dialog 上，先选好 Palette 上的 widget ，再到设计划面要放置 widget 的位置，用滑鼠点一下就可以了。 | The Palette Window  |
 The Widget Tree Window |
 The Property Window |
| 最后则是 The Widget Tree Window 与 The Property Window 这 两个视窗，The Widget Tree Window 会以树状结构来表示专案中各视觉元件间的阶层关系，而 The Property Window 则是用来设定各个 Widget 的属性 (例如标题、大小、位置等) ，还有最重要的 Signal Handlers (事件处理函式) 设定，透过 The Property Window 的 Signals page，指定当某个 Button 的 clicked 事件发生时，应该呼叫哪个 Signal Handler 来处理。只要在 The Widget Tree Window 或是在设计划面上选取元件，The Property Window 便会自动列示出对应的 Widget，让你修改其属性和 Signal Handlers。 | |
Hello world Application
用 Glade/GTK+ 来写程式，大概可分为两个阶段：第一个阶段为介面的设计，理所当然便是使用 Glade (因为它是本文的主角)；第二个阶段则是程式的设计，因为 Glade 目前只负责产生介面设计的程式码，所以在设计好介面后，我们得使用熟悉的编辑器 (如 vi、Emacs、pico…) 或是搭配一些 IDE Tools (如 gIDE、Kdevelop…) 来撰写剩余的程式码，这部份通常就是写 Signal Handlers 的程式。
接下来，我们以设计最简单的 Hello world Application 来看看 glade 的功能。假设要设计如下画面，其设计的过程为：
首 先，在 Palette Window 先建立一个 window，接下来在 Palette Window 选择 vertical boxes ，然后在刚建好的 window 上点一下，Glade 会问你要将 window 切割成几个 rows，这边我们选择切割成 4 个 row，完成后的画面如下 (window 的标题在 Widget Property Window 设定)：
Vertical Box 是用来安排各种 Widgets (视觉元件) 格局的 Container (物件收纳器，可用来放置其它 Widgets)， 第一次接触 X Window Programming 的人一定会觉得纳闷，怎地和 Microsoft Visual Basic 或 Borland Delphi 不一样，不是用固定位置 (指定某 widget 的固定座标) 来安排 Widgets，而是用 Vertical Box、Horizontal Box 和 Table 等 Containers 来安排介面的格局。虽然设计上有点不习惯，不过据说这种方式会有不少好处 (视窗的 resizing、把介面设计成支援多国语言)，这部份小弟也不太清楚，所以就委屈一下下，让自己适应这种设计方式吧! :-)。
继续，还 是从 Palette Window 上选取 MenuBar、ToolBar、TextEdit、Statusbar，依序加入 Vertical Box 的四个 rows。在加入 ToolBar 时会问你准备要在 ToolBar 上摆多少个 Button，我们就用预设值 3 个，而 TextEdit 在加入后，必须将其 Editable 属性设成 YES 才能编辑文字内容 (使用 Widget Property Window 设定)，这步骤的画面完成如下：
这 个步骤是 ToolBar 上 Button 的设定，比较值得注意的是在加入 Button 时 (使用 Palette Window )，必须将滑鼠移至 ToolBar 上的小灰色方块上时才按下滑鼠 (在 /usr/share/icons 目录下应可找到许多 icnos)，如下：
接 下来则是为程式加上 Menu，为了简单起见，我们只设了一个 File Menu 并加入一个 Exit MenuItem 在 File Menu 下。启动 MenuEditor 的方法有二，一是在介面设计视窗上按滑鼠右键，在弹出的 PopMenu 上选“Edit Menu”如图一；第二种方法则是先选取 MenuBar Widget 后，在 Widget Property Window 中按“Edit Menus…”按钮，如图二：
图一. |
图二. |
Glade 的 Menu Editor 有点类似 VB 的 Menu Designer，左方是选单的层次显示，可用左下方的按钮调整，而右上方则是用来新增、删除、修改 MenuItem，另外右下方则是快速键和特殊选单的设定，底下为我们新增选单的画面 (请记住 File Menu 下 Exit MenuItem 的 Name) ：
为 File-> Exit MenuItem 加上 activate Event 的 Signal Handler，在设计划面或用 Widget Tree Window 选取 Exit MenuItem 后，从 Widget Property Window 的 Signal Handler Page 中，我们将 exit1 物件 的 activate Event Signal Handler 设为 on_exit1_activate 函式 (这个函式我们晚点再写)，如下 ：
OK， 大功告成….一半。现在你已经完成了介面的设计，也就是第一阶段已经完成了。在继续前，赶快先将专案存起来比较保险，在你第一次按 Project Window 的 Save 按钮时，会出现下列视窗让你设定专案存放的目录、专案名称、程式编译出来的名称 (Program Name) 还有产生出来的原始程式码目录以及图形档目录 (Pixmaps Directory) 等，本例的设定如下：
切换到“C Options”Page，可以设定一些进阶的选项，这边我们只注意有四个 Glade 所产生的 .c 程式档 (会放到专案的 src 目录，可由上列画面改变)：
main.c：这个档为我们的主程式。
interface.c：Glade 将产生介面的程式码都放在这个档中。
callback.c：这个档比较重要一些，存放了所有的 CallBack Functions，也就是 Singal Handlers 的意思。我们待会就得修改 callback.c 中的on_exit1_activate function 来处理 Exit1 Menuitem 的 activate Evente。
support.c：这个档主要处理程式用到的图形档 (PixelMap)。
这个步骤最后就是按下 Project Window 的 Wirte Source 按钮，让 Glade 自动产生程式。
开个 Console Control Program (ex: Bash、Konsole、cxterm…)，然后切换至 ~/Project/hello 专案目录，输入：
$ ./autogen.sh $ make
(执行 autogen.sh 会产生出编译专案所需要的 Makefile 和 Configure files，只有在第一次储存你的 Project 时才需要跑 autogen.sh)
如果一切正常的话，可执行档 hello 便会被编译出，放在 src 目录中，所以只要输入下列指令即可启动 Hello World application：
$ src/hello
现 在你应该已经看到 Hello World 的画面，不过有点怪，Hello World 的 window 实际大小竟没跟设计时一样… 🙁 ，不过没关系，我们再回到 Glade，用 Widget Tree Window & Widget Property Window 来修改一下 window1 的属性 (DefaultWidth、Default Height、顺便设定 Position 让视窗置中)，在 Widget Tree Window 按右键出现 PopMenu 后，选“Redisplay”，让设计的画面大小跟实际设定同步。然后再做一次“Write Source”跟“make”动作，重新编译出的执行档应该就正常了。
终于到了第二阶段，开始动手写程式了。在步骤五，我们设定了“当 Exit1 MenuItem 的 activate Event 发生时，要去呼叫 on_exit1_activate function 这个 Signal Handler”，Glade 将所有的 Signal Handlers (又称 Callback functions) 都写在 src/callback.c，所以我便编辑 src/callback.c，就加入一行指令 gtk_main_quit()，让使用者在点选 Exit1 MenuItem 时，便执行这行指令结束程式 (记得写完程式得重新 make ，这边并不需要用 Glade 做“Write Source”动作，因为我们的画面设计并没变动到)：
(注意，上图并不是 Glade 的 Window, 而是 Kdevelop C/C++ IDE Tools。请用你熟悉的编辑器来修改 callback.c)
总算完成了 Hello World Program 了 。虽然步骤好像有点多，不过等你多用几遍 Glade，就会慢慢熟悉 Glade 各个视窗的使用了。不管怎样，我们总算有个漂亮的介面了 ，虽然我们才写了一行程式码而已 :-)。
References
底下列出相关参考网址：
GIMP
http://www.gimp.org/
Glade
http://glade.pn.org/
gnome
http://www.gnome.org/
gIDE
http://gide.pn.org/
Kdevelop
http://www.kdevelop.org/
2 則留言
Comments are closed.