Glade 入门介绍(转载)

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 

ec0339005340ba800afa9377.jpg

第二个视窗是 The Palette Window。它以小图示来表示所有可使用的 GTK+ Widgets (视觉元件)。要新增 windows 和 dialogs 到 Project 中 ,只要按一下 Platette (元件盘) 上的小图示即可。如果你想知道哪个图示是 window,只要将滑鼠移至图示上,停留一会儿就知道了。同样地,要新增 widgets 到 window 或 dialog 上,先选好 Palette 上的 widget ,再到设计划面要放置 widget 的位置,用滑鼠点一下就可以了。 The Palette Window

39968daa11e7d5901c17a261.jpg
cd7a4c255b3d047b8882a161.jpgThe Widget Tree Window 79d05f8c63231296533d9277The 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 的功能。假设要设计如下画面,其设计的过程为:

1f5c6eefcc354b5124979177

首 先,在 Palette Window 先建立一个 window,接下来在 Palette Window 选择 vertical boxes ,然后在刚建好的 window 上点一下,Glade 会问你要将 window 切割成几个 rows,这边我们选择切割成 4 个 row,完成后的画面如下 (window 的标题在 Widget Property Window 设定):

412fd0141c43a36d4890a761

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 设定),这步骤的画面完成如下:

90c444812ec050fcf403a661

这 个步骤是 ToolBar 上 Button 的设定,比较值得注意的是在加入 Button 时 (使用 Palette Window ),必须将滑鼠移至 ToolBar 上的小灰色方块上时才按下滑鼠 (在 /usr/share/icons 目录下应可找到许多 icnos),如下:

2e3fc6f994f23cfb5bee9077

接 下来则是为程式加上 Menu,为了简单起见,我们只设了一个 File Menu 并加入一个 Exit MenuItem 在 File Menu 下。启动 MenuEditor 的方法有二,一是在介面设计视窗上按滑鼠右键,在弹出的 PopMenu 上选“Edit Menu”如图一;第二种方法则是先选取 MenuBar Widget 后,在 Widget Property Window 中按“Edit Menus…”按钮,如图二:

图一.86299f3ee05843823f6d9777 图二.dfeee8949e21270157fb9677

Glade 的 Menu Editor 有点类似 VB 的 Menu Designer,左方是选单的层次显示,可用左下方的按钮调整,而右上方则是用来新增、删除、修改 MenuItem,另外右下方则是快速键和特殊选单的设定,底下为我们新增选单的画面 (请记住 File Menu 下 Exit MenuItem 的 Name) :

37d284936fc269e1ab77a461

为 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 函式 (这个函式我们晚点再写),如下 :

20110914     20110914-1

OK, 大功告成….一半。现在你已经完成了介面的设计,也就是第一阶段已经完成了。在继续前,赶快先将专案存起来比较保险,在你第一次按 Project Window 的 Save 按钮时,会出现下列视窗让你设定专案存放的目录、专案名称、程式编译出来的名称 (Program Name) 还有产生出来的原始程式码目录以及图形档目录 (Pixmaps Directory) 等,本例的设定如下:

20110914-2

切换到“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)。

20110914-3

这个步骤最后就是按下 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”动作,因为我们的画面设计并没变动到):

20110914-4

(注意,上图并不是 Glade 的 Window, 而是 Kdevelop C/C++ IDE Tools。请用你熟悉的编辑器来修改 callback.c)
总算完成了 Hello World Program 了 。虽然步骤好像有点多,不过等你多用几遍 Glade,就会慢慢熟悉 Glade 各个视窗的使用了。不管怎样,我们总算有个漂亮的介面了 ,虽然我们才写了一行程式码而已 :-)。

References

底下列出相关参考网址:

GIMP
http://www.gimp.org/

Gtk
http://www.gtk.org/

Glade
http://glade.pn.org/

gnome
http://www.gnome.org/

gIDE
http://gide.pn.org/

Kdevelop
http://www.kdevelop.org/

Comments are closed.