用 Glade 来创建窗口程序

beyes

如果直只用 GTK+  函数来构建界面程序，那相当的费劲，而用 Glade 则可以轻易达到目的。这里不准备介绍 Glade 的原理与各种构件，事实上我也并非完全熟悉。因为是第一次用这个东西，所以仅仅的记录一下操作步骤。我用的 Glade 版本是 2.12.2 。

完成后的界面如下所示(再重复这一过程中可能会有略加修改此图)：

上面，那个保存按钮是没什么用的；那个打勾的按钮，点击之后会在下面的文本框里输入 Hello Linux GTK+ and Glade 这句话，这体现了回调函数的应用。

下面是具体的实现步骤：
1. 先拉出一个顶层窗口：

弹出界面如下图所示：

上图中，标题栏上的名称是 window1，看起来不太有个性，下面用窗口属性框对这个标题名称修改一下：

上图中，不要奇怪，蓝色的地球是我的桌面壁纸。

接下来，我要根据上面第一幅图的模样，继续进行工作。从图中看到，从上至下，可分为部分，它们分别是“菜单栏”(menu Bar )，“工具栏“(Tool Bar)(工具栏上有按钮)，“文本区“(Text Bar)，”状态栏“(Status Bar)。这些构件，是需要有个“容器”将它们盛放进去的。所以，我们需要 4 个容器。接下来，把 4 个容器放进去：

上图中，点击 Vertical Box，意思是，我们需要这些容器是垂直摆放的。默认是 3 个垂直容器，根据需要，改成 4 个。效果如上图中右边窗口所示。

接下来，摆放上述的各种器件，首先摆放的是“菜单栏”，默认是下图这样子：

上图中，菜单栏上，我不太想要后面的“Edit", "View", "Help" 3 个菜单按钮，现在将其去掉。去掉的办法是，在 "Widget Tree" 窗口里进行删除，"Widget Tree" 窗口如下图所示(在Glade的主窗口的View菜单里可选择显示这个窗口)：

在上图中，我们依次右键删除掉 menuitem2，menuitem3，menuitem4 ，结果看到下图：


只剩下一个 File 菜单选项了。但是菜单里有许多选项并不需要，试着裁剪掉几个，然后增加一个退出的 Exit :

由于截图的关系，无法看到 File 菜单弹出的情况。如上图所示，现在 File 菜单下有 3 个选项，分别是 “new”, "open", "Exit" 。最后这个 Exit 是我自己添加上去的。下面我们要做的是，分别为 3 个选项添加相应的快捷键和相应的信号(像菜单一般是 activate ),设置的方法是利用“属性”(Properties) 面板上的“通用”按钮 (Common)，设置如下图所示：

上图中，可设置菜单下拉选项所对应的快捷键以及单击这个选项时所对应要使用的信号。设置完后，再选择“属性” 面板上的“控件”(Widget) ，接着选择“编辑菜单”(Edit Menus...)，会看到下图：


这时，要 “Apply” 一下，让刚才的设置生效。其实，也可以直接在这里编辑， 如果这样，那回调函数要自己手动填上。

继续，放工具栏上去：

当放进工具栏时，默认会有  3 个灰色按钮（也是容器之一），我们这里只需要 2 个，所以在对话框里设置会 2 。实际上，第 2 个按钮在最后也不用来做什么。接着将两个工具栏按钮放进这两个灰色的小容器中：

上面的默认图标似乎有点不好看，换一下，替换方法见下图：

选择后的效果图（我选择的是系统自带的图标，上图红色框框左边的那个下拉框里可以选择）：


接下来，再剩下的两个容器里，分别放进文本框以及状态栏，效果如下：

因为我想在单击那个绿色的勾选按钮后，会输出如 HELLO WORLD 之类的信息，所以我需要如下设置一下它的回调函数：

上图，属性面板上的 "clicked" 表示对应的信号为单击，回调函数就用系统默认生成的吧。

到此，面板的设置工作完成了，不要忘记保存一下它. 下面，要设置一下对应的回调函数，然后能够运行起这个程序。设置的回调函数中，会有两个处理。一个时选择 File 下拉菜单中的 Exit 时，程序界面会退出；另外一个是，单击绿色打勾按钮时，程序会在文本界面里输出上述的文本信息。

为了能够运行整个程序，我们要在 Glade 主程序界面上点 “Build" 一下，这意味着会生成程序编译用的代码：


生成代码后，要运行一下下图中的 autogen.sh 脚本，这样会在代码目录下产生 Make 文件，这样一来就可以编译成可执行程序了：

运行这个脚本并 make 出可执行文件吧，编译完成后，可执行文件是在 src 文件夹里：


为了能让这个程序做点事，该为它设置点回调函数的时候了。我们先为菜单的下拉退出选项设置回调函数。在 src/callbacks.c 文件里编辑：

[Plain Text] 纯文本查看 复制代码

void
on_quit1_activate                      (GtkMenuItem     *menuitem,
                                        gpointer         user_data)
{
        gtk_main_quit();
}

然后保存退出后再 make 一下程序，查看是否设置生效了没... ...OK，没什么问题，程序退出了。

现在要搞一下在文本框里输出些东西。首先，我们看一下 interface.c 文件，可以看到文本框对应的指针为：

entry1 = gtk_entry_new ();

因为我们想在点击绿色勾勾时在文本框里输出些东西，那么我们就要利用这个 entry1 这个指针，它也是一个 GtkWidget 类型指针。同时，我们还看到 interface.c 文件里还有一个信号连接函数：

g_signal_connect ((gpointer) toggletoolbutton1, "clicked",
                    G_CALLBACK (on_toggletoolbutton1_clicked),
                    NULL);

这个函数连接的回调函数在 callbacks.h 里有声明，具体实现在 callbacks.c 文件中。上面的信号连接函数，最后一个参数不能为 NULL ，因为我们现在要利用它来做些什么了。

现在改 NULL 我 entry1，然后再在 callbacks.c 中编辑 on_toggletoolbutton1_clicked 如下：

[Plain Text] 纯文本查看 复制代码

void
on_toggletoolbutton1_clicked           (GtkToolButton   *toolbutton,
                                        gpointer         user_data)
{
        gtk_entry_set_text (GTK_ENTRY (user_data), "Hello Linux GTK+ and Glade");
}

再 make 一下，然后让我们再看一下程序的效果吧：


OK,在单击绿色勾勾按钮后 输出成功。

呵呵，编辑这个文章是很辛苦的，因为是第一次接触这个 Glade ，在编辑的过程中也算是一种复习吧。文章没什么技术含量，但是麻雀虽小但五脏俱全，它具备了基本的 GUI 开发流程。