Glade3+tutorial.docx

1、Glade3+tutorialGTK+ and Glade3 GUI Programming Tutorial -Part 12009年3月27日 23:38原文地址链接 作者Micah Carrick翻译：Binn.X Wee博客链接： 本文链接： Quick Overview of GTK+ Concepts如果你没有任何 GTK+的编程经验，那么，对于我将要阐述的一些概念你也许会听着犯迷糊。不过，不用担心，在遇到这些概念的时候我会详细讲解，以便你能很好的阅读后面的内容。学完这一部分，对 GTK+的基本概念有所了解后，你也许就能有效的利用 Glade进行开发了。首先，GTK+并不是一门编程

2、语言，而是一个开发工具套件，或者说是一个开发库，用来进行跨平台GUI应用程序的开发，Linux，OSX， Windows或其它任何平台都能使用 GTK+。GTK+就好比Windows上的MFC和Win32 API，JAVA上的Swing和SWT，或者 Qt（KDE使用的Linux下GUI开发套件）。尽管GTK+是用纯C语言编写的，但是提供了其它各种语言的捆绑，允许程序员选择自己喜欢的开发语言来开发 GTK+应用程序，比如 C+, Python，Perl，PHP，Ruby等等。 GTK+开发套件基于三个主要的库： Glib，Pango，和 ATK，当然我们只需关心如何使用 GTK+即可， GTK

3、+自己负责与这三个库打交道。 Glib封装了大部分可移植的 C库函数（允许你的代码移植到 Windows和Linux上运行）。使用 C或C+时，将大量使用 Glib库函数，在我们用 C语言的具体实现过程中我会详细解释它们。高级语言如 Python和Ruby却不用担心Glib的使用，因为它们有自己的标准库提供了相应的功能。 GTK+及相关的库时按照面向对象设计思想来实现的，至于这时如何实现的现在并不重要，不同的编程语言有不同的实现方法，重要的是要知道 GTK+使用面向对象编程技术即可（是的，即使是 C实现的）。每一个GTK+的GUI元素都是由一个或许多个 “widgets”对象构成的。所有的wi

4、dgets都从基类GtkWidget派生。例如，应用程序的主窗口是 GtkWindow类widget，窗口的工具条是 GtkToolbar类widget。一个 GtkWindow是一个 GtkWidget，但一个 GtkWidget兵不是一个 GtkWindow，子类 widgets继承自父类并扩展了父类的功能而成为一个新类，这就是标准的面向对象编程 OOP(Object Oriented Programming)思想。我们可以查阅GTK+参考手册找到widgets直接的继承关系。对于GtkWindow它的继承链看起来像这样： GObject +-GInitiallyUnowned +-Gtk

5、Object +-GtkWidget +-GtkContainer +-GtkBin +-GtkWindow因此，GtkWindow继承自 GtkBin， GtkBin继承自GtkContainer，等等。在第一个程序中，你不需要担心GtkWidget对象。各 widget之间的继承链之所以重要是因为当你查找某个 widget的函数，属性和信号时，你应该知道它的父类的函数，属性和信号也被此 widget继承了，可以直接使用。在第二部分讲述此实例的代码时，你能更清楚的认识到这一点。我们来看命名规则，命名规则带来的好处是非常便于使用。我们能够清楚的看出对象或函数是哪个库中的。以 Gtk开头的所有对

6、象都是在 GTK+中定义的。稍后我们会看到类似 GladeXML以Glade开头的是Libglade库对象或函数， GError以G开头的在GLib库定义。所有Widgets类都遵循标准camelcase命名习惯。所有操作函数都以下划线组合小写字母单词命名。如gtk_window_set_title（）设置GtkWindow对象的标题属性。你需要的所有参考文档都可以从以下网站获得： library.gnome.org/devel/references, 分区 GTK+GNOME 的第 1 页不过，使用 Devhelp更方便，它甚至可以作为一个包来分发。 Devhelp可以浏览或搜索任何安装在你

7、系统上的库的相关文档，当然前提是你必须安装了这些文档。 Introduction to Glade3 Glade是一种开发 GTK+应用程序的 RAD（Rapid Application Development）工具。Glade自身就是一个 GTK+应用程序，因为它就是用 GTK+开发出来的 _ Glade用来简化 UI控件的设计和布局操作，进行快速开发。（译者注：当然，还不仅如此， Glade的设计初衷是把界面设计与应用程序代码相分离，界面的修改不会影响到应用程序代码）Glade设计的界面保存为 glade格式文件，它实际上是一种 XML文件。 Glade起先能根据创建的 GUI自动生成 C

8、语言代码（你仍然能找到此类相关的实例），后来可以利用 Libglade库在运行时动态创建界面，到了 Glade3，这些方法都不赞成使用了。这是因为， Glade需要做的唯一的事就是生成一个描述如何创建 GUI的glade文件。这给编程人员提供了更多的灵活性和弹性，避免了用户界面部分微小的改变就要重新编译整个应用程序，同时其语言无关性，几乎所有的编程语言都可以使用 Glade。 Glade3进行了重新设计，与之前的版本如 Glade2有巨大的改变。 2006年Glade3.0发布，你可以自由获取最新版本进行开发。软件包管理器如 aptitude等应该都有 Glade3的安装包，不过请注意：有个数

9、字 3，因为glade是老版本的 Glade2，Glade3或Glade3才是新版本。你也可以从 glade.gnome.org下载。 Getting Familiar with the Glade Interface启动Glade3，让我们来看看其主界面：左边的是 Palette就像是一个图形编辑程序，可以用它上面的 GtkWidgets来设计你的用户界面。中间部分（刚启动时是空白一片）是 Editor所见即所得的编辑器。在右边，上部是 Inspector，下部是 widget Properties。Inspector以树形显示当前创建的控件的布局，可以对控件进行选择。我们通过 Proper

10、ties中各项内容来设置 widgets的属性，包括设置 widgets的信号回调函数。我们先创建一个顶层窗口并保存。点击 Palette上Toplevels分组框中的 GtkWindow图标，你会看到一个灰色窗口出现在 Glade中间的 Editor区域。这是 GtkWindow的工作区：分区 GTK+GNOME 的第 2 页窗口管理器（如 GNOME）会自动加上窗口标题，关闭按钮等，因此我们编辑时看不见。使用 Glade时，我们总是需要首先创建一个顶层窗口，典型的是创建一个 GtkWindow。以tutorial.glade文件名保存工程。这个文件是一个 XML文件，你可以在文本编辑器中打

11、开它： GDK_POINTER_MOTION_MASK | GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK | GDK_BUTTON_RELEASE_MASK 你看，这就是一个简单的 XML文件，在 part2中我们会用 C语言调用 Libglade库来解析这个 XML文件并在运行时生成 UI。XML文件很容易用 Python应用程序或其它任何语言来解析。 Glade能在修改过程中自动保存到该文件。退出文本编辑器，回到 Glade我们继续。 Manipulating Widget Properties现在，Glade的Editor区显示

12、的是一个空的 GtkWindow widget。我们来修改它的属性。在Properties面板，你会看到4个选项卡：General, Packing, Common, 和 Signals。我们先来谈谈前面的两个。 GtkWidgets有许多属性，这些属性定义了它们的功能和现实方式。如果你查阅一下 GTK+的开发参考文档，找到GtkWidget的Properties一项，列出了 GtkWindow的特有属性，这些在Glade属性面板的 General选项卡中，并且每个 widget的属性都会不一样。 widget属性名称是我们的应用程序直接获取的信息，把此 GtkWindow的name由wind

13、ow1修改为 window。添加 GTK+ Text Editor到Window Title属性：分区 GTK+GNOME 的第 3 页我们稍后讲述 Packing，先来看看 Common，这里也包括属性设置，不过我们不能在开发人员参考文档中相应的 widget属性下看到它们，这是因为这些属性是继承自父类的属性。在参考文档的 Object Hierarchy里你将会看到 GtkWindow的父类 GtkContainer，连接到 GtkContainer属性项你将会看到一个 borderwidth，而在 Glade的属性面板中 GtkWindow继承了这个属性，你可以在 Common选项卡底部

14、找到。我们以后会讲到 GtkContainer，到这里，你应该清楚地知道对象继承链是多么重要了。因为大部分 widgets都从 GtkContainer继承，因此Glade把它的属性放到了 Common Tab下。参考文档的 Object Hierarchy，GtkContainer由GtkWidget继承。链接到 GtkWidget，你会看到其大部分的属性都列在了 Glade属性面板的 Common tab中。这些属性是所有 GTK+ widgets的公共属性，因为它们都继承自GtkWidget。 Specifying Callback Functions for Signals当某些对程序

15、员有意义的事情发生时，控件对象就发出一个信号 signal。这同Visual Basic中的events类似。当用户与界面进行交互时，界面元素发出相应的信号，程序员可以决定哪些信号需要捕获并连接到一个回调函数，完成某些任务。我们遇到的第一个信号，也是你在所有 GTK+应用程序中都会碰到的，是由 GtkObject发出的destroy信号。当一个 GtkObject对象销毁时就发出 destroy信号。这非常重要，因为当用户通过点击一个 widget顶部的X来关闭时， widget就销毁了。我们需要捕获这个信号并正确地退出我们的应用程序。在我们正式为此GUI写代码时做这件事是最好的，不过先得在G

16、lade中指定响应 destroy信号的具体函数。切换到属性面板的 Signalstab，你将看到一个树形列表，显示了当前 widget及其父类对象的所有信号。这些与参考文档相符。在Handler列下点击灰色文本 并开始编辑它，从下拉列表框中选择on_window_destroy并按回车键。我们也可以键入任何名字，不过Glade提供的下拉框列出了通用的回调函数习惯命名。这个值如何使用得看程序员如何连接信号与回调函数。在这里，我们把 GtkWindow的destroy信号连接到 on_window_destroy函数名上。在 part2中我们会看到这一点的。分区 GTK+GNOME 的第 4 页

17、到这里，我们有了一个 GUI，可以编写代码显示我们的空窗口并在点击了关闭按钮时退出程序，你可以用 C， Python或任何其它语言。在此向导中，我将会充分地向你展示如何在编写任何代码前就用 Glade3建立起完整的 GUI.不过，为了满足你的好奇心，同时也让你了解到要实现这个 Glade用户接口，代码将会是多么的简单，请看代码： In C /* First run tutorial.glade through gtk-builder-convert with this command: gtk-builder-convert tutorial.glade tutorial.xml Then s

18、ave this file as main.c and compile it using this command (those are backticks, not single quotes): gcc -Wall -g -o tutorial main.c pkg-config -cflags -libs gtk+-2.0 -export-dynamic Then execute it using: ./tutorial */ #include void on_window_destroy (GtkObject *object, gpointer user_data) gtk_main_

19、quit (); int main (int argc, char *argv) GtkBuilder *builder; GtkWidget *window; gtk_init (&argc, &argv); builder = gtk_builder_new (); gtk_builder_add_from_file (builder, tutorial.xml, NULL); window = GTK_WIDGET (gtk_builder_get_object (builder, window); gtk_builder_connect_signals (builder, NULL);

20、 g_object_unref (G_OBJECT (builder); gtk_widget_show (window); gtk_main (); return 0;分区 GTK+GNOME 的第 5 页 In Python (note: you must set the visible property of window to Yes in the Common properties tab in Glade) #!/usr/bin/env python # First run tutorial.glade through gtk-builder-convert with this c

21、ommand: # gtk-builder-convert tutorial.glade tutorial.xml # Then save this file as tutorial.py and make it executable using this command: # chmod a+x tutorial.py # And execute it: # ./tutorial.py import pygtk pygtk.require(2.0) import gtk class TutorialApp(object): def _init_(self): builder = gtk.Bu

22、ilder() builder.add_from_file(tutorial.xml) builder.connect_signals( on_window_destroy : gtk.main_quit ) self.window = builder.get_object(window) self.window.show() if _name_ = _main_: app = TutorialApp() gtk.main()在这部分，我将不会深入讲解这些实现代码，而把注意力放在 Glade3上。不过你已经看到了，实现一个 Glade创建的用户接口是多么的简单。 Adding Widgets

23、to the GtkWindow查阅参考文档你会看到 GtkWindow继承自 GtkContainer。继承自 GtkContainer的widgets就是一个容器 widgets，也就是说它们可以容纳其它的 widgets。这是 GTK+编程的一个基本理念。如果你是一个 Windows程序员，你会期望着拖一堆的 widgets到窗口上，并摆放好它们的位置即可。不过 GTK+并不是这样工作地 有更好的理由。 GTK+的widgets可以装填到不同的容器，容器能装填到其它的容器中。有不同的装填属性设置可以控制 widgets在容器内如何分配空间，这样我们就可以创建出十分复杂的 GUI界面，而不

24、用写任何代码来调整widgets大小尺寸和位置。因为GTK+为我们做了这一切。不过这对于一个 GTK+程序员新手来说也许是一个难以理解的概念，让我们用事实来说话！ GtkWindow继承自 GtkBin容器， GtkBin是只能容纳一个子 widget的容器，但是我们的界面需要 3个元素：菜单条，文本编辑区，状态栏。因此，我们使用 GtkVBox，它可以容纳一个以上的子 widgets，并按照垂直排列。（ GtkHBox按照水平排列子 widgets）注：这里的 子widgets是指容器中容纳的属于此容器的 widgets在Palette面板上Container分组框下的 GtkVBox图标上

25、点击。此时 Select工具条按钮弹起，并且鼠标在 Glade编辑区上显示为带有 +的 GtkVBox图标。在灰色的空窗口区点击，就放置了一个 GtkVBox，此时弹出一个对话框询问Number of items，设置GtkVBox的行数，我们选择3行。分区 GTK+GNOME 的第 6 页编辑区的 GtkWindow现在有三行。 Glade窗口顶部的 Select工具栏图标转换到按下状态，即允许你在编辑区选择任意的 widgets。接下来添加一个 GtkMenuBar到GtkVBox的最顶上一行， GtkMeneBar在Glade的Container分组框下分区 GTK+GNOME 的第 7

26、 页现在，找到 Container下的GtkScrolledWindow并添加到中间一行。完成这一步后除了中间一行被选中状态外看不出有什么变化。这是因为 GtkScrolledWindow没有任何初始化可视元素。它仅仅是一个容器，当它容纳的子 widgets变得太大时它提供滚动条。我们的编辑器需要滚动条支持。点击Control and Display分组框下的 GtkTextView并添加到 GtkScrolledWindow上（中间一行）。分区 GTK+GNOME 的第 8 页最后，点击 Control and Display分组框下的 GtkStatusbar并添加到最底部一行。这就建好了

27、我们文本编辑器的 UI布局。在Inspector中你会看到 widgets的包容关系。分区 GTK+GNOME 的第 9 页在Inspector中选择 widgets是很方便的，因为当 widgets相互重叠时你在编辑区不能选择了。比如你不能在编辑区中点击 GtkScrolledWindow因为我们只能看到它包容的子 widgets，你只能在 Inspector中选择。之前我提到装填的概念对一个 GTK+程序员新手来说不好理解。因此，我将向你展示不同的装填方式是如何影响你的布局设计的。 How Packing Effects the Layout从上面的界面设计过程，你也许会惊叹 Glade如

28、此的智能。它是如何知道我们不想状态栏太高？如果你调整窗口大小，它又是如何知道应该让文本编辑框自动缩放来填充窗口变化的空间？哈哈， Glade靠猜的！它应用了默认设置，我们通常需要如此，不过不总是这样。了解装填的最好方式是试验各种不同的装填属性，观察 Glade如何响应。你应该了解的关于装填和空间分配： homogeneous：此属性设置，则告诉 GTK+为每个子 widgets分配同样大小的空间。 expand：子widgets的装填属性，确定在容器增长时，此子 widgets是否获得额外的空间。 fill：子widgets装填属性，确定子 widgets是否利用分配到的额外空间。来看默认装填

29、属性， GtkScrolledWindow的expand=TRUE表示当其所在容器增长时它要获得空间分配，fill=TRUE表示它将扩充自己来利用额外空间。这是我们想要的效果。 Widget Property Value GtkVBox vbox1 homogeneous FALSE GtkMenuBar menubar1 expand FALSE fill TRUE GtkScrolledWindow scrolledwindow1 expand TRUE fill TRUE GtkStatusbar statusbar1 expand FALSE fill TRUE现在我们来看 homogeneous都干嘛了。在 Inspector中选择 GtkVBox并设置其 Homogeneous=Yes，这