初学GtkBuilder界面开发

初探GtkBuilder界面开发

最初的想法

不能太复杂，但也不能太简单，因为那样没有含量，学不到什么。这次开发的界面至少应该这样：1、有一个主窗体跟若干构件；2、构件之间能够互相交互；3、最好能够明白GtkBuilder可能是怎样实现界面定制的。最后确定的界面大概如图1：

 

图1 整体界面

 

点击一下SayHello按钮，文本显示”Hello, World”，点击一下Goodbye按钮退出程序。

根据之前对GTK+信号机制的理解，点击SayHello按钮需要连接一个say_hello函数去响应，点击GoodBye按钮需要连接一个good_bye函数去响应。

 

绘制界面的注意点

整体界面就不介绍了，很简单，拖一个对话框出来，再拖两个按钮跟一个标签，搞定。最终结果如图2所示：

 

 

图2 最终设计界面

 

图2右边展示的分别是窗体的构件层次（上）和继承对象所关联的信号（下）。

 

设置关联信号

从图2可以留意到主窗体（标识为dialog-main）的”destroy”事件已经被我们关联到gtk_main_quit函数，这个函数用来退出整个程序。然后我们需要为GoodBye按钮关联good_bye函数。GoodBye按钮的ID是ButtonGoodBye，在GTK+中ID是我们获取子构件对象的唯一标识符号。图3显示了怎么设置ButtonGoodBye的”clicked”事件关联到good_bye函数。

 

 

图3 设置GoodBye按钮”clicked”信号

 

然后SayHello按钮的信号关联。但是在这里我们可以发现，之前的两个信号函数都不需要传递用户数据（即传递的参数为NULL）。在用户数据设置数值，传递的用户数据将会是我们设置数据的字符串形式（我猜测的，未验证）。与SayHello关联的数据say_hello函数需要接收标签控件的对象作为参数，所以在这里我们无法直接连接，只好在源代码处自己做信号关联。

 

完成界面绘制，保存，我们得到一个helloworld.glade文件（以XML格式保存）。

 

编写代码

GTK+采用GtkBuilder读取helloworld.glade文件，然后生成界面对象，获取到我们所需的对象，我们就可以释放GtkBuilder对象了。

源代码如下：

 

1. /* 
2.  
3.  * main.c 
4.  
5.  * 
6.  
7.  *  Created on: 2011-9-17 
8.  
9.  *      Author: kelvin 
10.  
11.  */ 
12.  
13. #include <gtk/gtk.h>
14.  
15.   
16.  
17. // good_bye 函数 与 GoodBye按钮的 "cilcked" 事件连接，由 UI 文件自动关联
18.  
19. G_MODULE_EXPORT void good_bye(GtkWidget *widget,gpointer data) 
20.  
21. { 
22.  
23.   gtk_main_quit(); 
24.  
25. } 
26.  
27.   
28.  
29. // say_hello 函数 与 SayHello按钮的 "clicked" 事件连接，由于需要自己操作 data 参数，所以要手动关联
30.  
31. G_MODULE_EXPORT void say_hello(GtkWidget *widget,gpointer data) 
32.  
33. { 
34.  
35.        GtkLabel * labeltext = (GtkLabel *)data; 
36.  
37.        if(g_strcmp0(gtk_label_get_label(labeltext), "Hello, World!") == 0) 
38.  
39.        { 
40.  
41.               gtk_label_set_label(labeltext, "Very Nice."); 
42.  
43.        } 
44.  
45.        else 
46.  
47.        { 
48.  
49.               gtk_label_set_label(labeltext, "Hello, World!"); 
50.  
51.        } 
52.  
53. } 
54.  
55.   
56.  
57. int main(int argc,char *argv[]) 
58.  
59. { 
60.  
61.   GtkBuilder *builder = NULL; 
62.  
63.   GError *error = NULL; 
64.  
65.   GtkWidget *window = NULL; 
66.  
67.   GtkLabel * text = NULL; 
68.  
69.   GtkButton *button = NULL; 
70.  
71.   
72.  
73.   gtk_init(&argc,&argv); 
74.  
75.   
76.  
77.   // 初始化GtkBuilder，读取 UI 文件（由glade生成）
78.  
79.   builder=gtk_builder_new(); 
80.  
81.   gtk_builder_add_from_file(builder,"helloworld.glade",&error); 
82.  
83.   
84.  
85.   // 自动关联已在 UI 文件配置好的信号
86.  
87.   gtk_builder_connect_signals(builder, NULL); 
88.  
89.   
90.  
91.   // 根据 ID 获取子构件
92.  
93.   window=GTK_WIDGET(gtk_builder_get_object(builder,"dialog-main")); 
94.  
95.   text = GTK_LABEL(gtk_builder_get_object(builder, "label-main")); 
96.  
97.   button=GTK_BUTTON(gtk_builder_get_object(builder, "ButtonSayHello")); 
98.  
99.   
100.  
101.   // 将 SayHello 按钮的 "clicked" 事件与 say_hello 函数关联
102.  
103.   gtk_signal_connect(GTK_OBJECT(button), "clicked", GTK_SIGNAL_FUNC(say_hello), (gpointer)text); 
104.  
105.   
106.  
107.   // 获取到 UI 对象后，GtkBuilder 对象已没有作用，释放了
108.  
109.   g_object_unref(G_OBJECT(builder)); 
110.  
111.   
112.  
113.   // 设置主 UI 界面为可见
114.  
115.   gtk_widget_show_all(window); 
116.  
117.   
118.  
119.   // 这里才正式运行界面
120.  
121.   gtk_main(); 
122.  
123.   
124.  
125.   return 0; 
126.  
127. } 

 

编译阶段

键入下列命令：

 

 

gcc `pkg-config --cflags --libs gtk+-2.0` -export-dynamic -o"glade-helloworld" main.c

 

`pkg-config --cflags --libs gtk+-2.0`： 由pkg-config命令自动加入编译参数跟链接参数。有兴趣的同学可以去掉两边的反引号运行一下看看。

-export-dynamic ：采用动态链接库的方法链接。为什么？大家还记不记得动态链接库是通过函数名字的字符串获取函数手柄的，这样我们就能明白GtkBuilder其实就是利用这种方法把函数跟事件信号关联起来。

 

最后运行程序（helloworld.glade文件要跟glade-helloworld放在同一个目录下）：

 

 

./glade-helloworld

 

 

图4 运行结果一览