一步一步学习Glade

Glade是GTK＋的界面辅助设计工具，可以通过拖放控件的方式快速设计出用户界面，这样的优势在于在设计的同时能直观地看到界面上的控件，并且可以随时调整界面上的设计。

由于开发板的库版本为gtk2.12之前的版本(gtk1.0)，所以只支持libglade模式，而Linux环境的版本比较新，只能保存GtkBuilder格式的Glade，但是能运行libglade的代码，而window的glade安装包两种格式都支持，所以我们主要使用window的glade设计界面，然后在Linux编译运行代码。

搭建环境：

1）安装windows版本的glade （ glade3-3.6.7-with-GTK+.exe ）

安装包下载地址： http://download.csdn.net/detail/u013293310/6829273

    双击后一直“下一步”即可

安装完成后，在电脑桌面生成如下图标：

2）安装Linux的编译运行环境

在终端敲在线安装命令：
    sudo apt-get install libgtk2.0*
　sudo apt-get install glade libglade2-dev

Glade的操作使用

使用Glade编程(双击windows桌面上的“Glade-3.6.6”)

启动时，会弹出一个多余的对话框，直接关闭即可。

Glade的整体框图：

常用控件选择区：列举了常用的控件，常用的有三类：顶层(主窗口等)，容器(各种布局容器等)，控制和显示(按钮、便签、图片控件等)

当鼠标放在控件时，会自动显示控件的中文文字，同时，还能人为设置，如下图：

界面编辑区：把控件拖放在这进行进行相应的布局

控件监视区：能够看到界面上所有的控件，同时，选中这个控件，可以看到这个控件的具体类型

属性编辑区：编辑选中控件的常用属性，如窗口设置标题、窗口类型、屏幕上显示位置等。


工具栏：常用的有以下几个按钮
打开：打开一个已经存在的glade文件
保存：保存一个glade文件
选择：按了这个按钮， 才能选择控件
拖拽调整大小：按了这个按钮，才能移动控件的位置，改变控件的大小

现在开始学习Glade的操作。
选择控件时，一定要先按工具栏的“选择”按钮
操作时，支持撤销(Ctrl+z)和恢复(Ctrl+y)等window的快捷键

第一步：选择窗口

第二步：改变窗口的常用属性
1）设置窗口标题：我们一起学习Glade
2）固定窗口大小
3）设置窗口位置：中心

4）设置窗口的宽度和高度

第三步：窗口添加固定布局(固定布局能允许用户任意布局，所以我们选择此布局)

第四步：添加两个按钮

第五步：调整按钮的位置以及其大小(有两种方法可以设置)
1）在界面编辑区里通过拖拽方式进行调整

2）通过属性编辑区进行设置

a) 设置控件的起点坐标

b）设置控件的宽度和高度

第六步：设置按钮的属性

1）第一个按钮作为带文本内容的普通按钮

2）第二按钮作为没边框带图标的按钮
按钮本身就是一个容器，带图标的按钮其实就是在按钮这个容器里放一个图片控件。
a）按钮去表框

b）把按钮的容器显示出来

C）在按钮容器里添加图片控件

第七步：根据需要修改控件的标识名称
到这里，我们的界面就已经设置好了，可以保存这个界面，然后通过代码操作这个界面。在代码操作时，我们需要关心的是，如何通过代码获得这个界面的控件，如本例子中的(主窗口，按钮)，而在界面里，每个控件都有一个标识名称，这个标识名称就是在控件监视区的名字，我们代码里就通过这个标识名称来获取界面里的控件：

这个标识名称是可以修改的，如下图

第八步：保存界面

第九步：代码操作

首先需要引用libglade的头文件：

[cpp]  view plain copy print ?

1. #include <glade/glade.h>  

这里主要用到两个接口操作libglade界面：读取界面，获取界面的控件。

[cpp]  view plain copy print ?

1. //载入并新建整个界面  
2. GladeXML *gxml = glade_xml_new("demo.glade", NULL, NULL);  

接着，通过gxml这个变量就可以获得界面里的控件。

[cpp]  view plain copy print ?

1. // 获取主窗口，"window1"为界面监视区的标识名称  
2. GtkWidget *window = glade_xml_get_widget(gxml,"window1");  

后期写gtk代码，就无需花太多时间在控件的创建，已经界面的布局上了。

[cpp]  view plain copy print ?

1. #include <glade/glade.h>  // glade所需头文件  
2. #include <gtk/gtk.h>  
3.   
4. int main(int argc,char *argv[])  
5. {  
6.   
7.     gtk_init(&argc,&argv);  // 初始化  
8.       
9.     // 载入并新建整个界面  
10.     GladeXML *gxml = glade_xml_new("demo.glade", NULL, NULL);  
11.     // 获取界面里的窗口控件  
12.     GtkWidget *window = glade_xml_get_widget(gxml,"window1");  
13.   
14.     gtk_widget_show_all(window);    // 显示所有控件  
15.       
16.     gtk_main(); // 主事件循环  
17.       
18.     return 0;     
19. }  

在用gcc编译时，记得加上的命令参数( ` 为数字1前面的单引号)

[cpp]  view plain copy print ?

1. `pkg-config --cflags --libs gtk+-2.0 libglade-2.0`  

程序运行效果图：

接着，我们给带图标的按钮设置图片的内容，当前路径下有一张 ”next.bmp” 图片（任意图片格式即可）。

首先，获取界面里图片控件。

[cpp]  view plain copy print ?

1. // 获取图片控件  
2. GtkWidget *image= glade_xml_get_widget(gxml,"image1");  

接着，通过下面接口给图片控件设置图片

[cpp]  view plain copy print ?

1. /* 功能：      给创建好的图片控件重新设计一张图片 
2.  * image：       图片控件 
3.  * file_path:   图片的路径 
4.  * w, h：        指定图片的宽度和高度 
5.  */  
6. void load_image(GtkWidget *image, const char *file_path, const int w, const int h )  
7. {  
8.     gtk_image_clear( GTK_IMAGE(image) );        // 清除图像  
9.     GdkPixbuf *src_pixbuf = gdk_pixbuf_new_from_file(file_path, NULL);  // 创建图片资源  
10.     GdkPixbuf *dest_pixbuf = gdk_pixbuf_scale_simple(src_pixbuf, w, h, GDK_INTERP_BILINEAR); // 指定大小  
11.     gtk_image_set_from_pixbuf(GTK_IMAGE(image), dest_pixbuf); // 图片控件重新设置一张图片(pixbuf)  
12.     g_object_unref(src_pixbuf);     // 释放资源  
13.     g_object_unref(dest_pixbuf);    // 释放资源  
14. }  

完整代码如下：

[cpp]  view plain copy print ?

1. #include <glade/glade.h>  // glade所需头文件  
2. #include <gtk/gtk.h>  
3.   
4. /* 功能：      给创建好的图片控件重新设计一张图片 
5.  * image：       图片控件 
6.  * file_path:   图片的路径 
7.  * w, h：        指定图片的宽度和高度 
8.  */  
9. void load_image(GtkWidget *image, const char *file_path, const int w, const int h )  
10. {  
11.     gtk_image_clear( GTK_IMAGE(image) );        // 清除图像  
12.     GdkPixbuf *src_pixbuf = gdk_pixbuf_new_from_file(file_path, NULL);  // 创建图片资源  
13.     GdkPixbuf *dest_pixbuf = gdk_pixbuf_scale_simple(src_pixbuf, w, h, GDK_INTERP_BILINEAR); // 指定大小  
14.     gtk_image_set_from_pixbuf(GTK_IMAGE(image), dest_pixbuf); // 图片控件重新设置一张图片(pixbuf)  
15.     g_object_unref(src_pixbuf);     // 释放资源  
16.     g_object_unref(dest_pixbuf);    // 释放资源  
17. }  
18.   
19. int main(int argc,char *argv[])  
20. {  
21.   
22.     gtk_init(&argc,&argv);  // 初始化  
23.       
24.     // 载入并新建整个界面  
25.     GladeXML *gxml = glade_xml_new("demo.glade", NULL, NULL);  
26.     // 获取界面里的窗口控件  
27.     GtkWidget *window = glade_xml_get_widget(gxml,"window1");  
28.     // 获取图片控件  
29.     GtkWidget *image= glade_xml_get_widget(gxml,"image1");  
30.   
31.     gtk_widget_show_all(window);    // 显示所有控件  
32.       
33.     // 获取图片控件的宽度和高度，必须放在gtk_widget_show_all()函数后  
34.     int w = image->allocation.width;  
35.     int h = image->allocation.height;  
36.     load_image(image, "next.bmp", w, h);    // 给图片控件设置内容  
37.       
38.     gtk_main(); // 主事件循环  
39.       
40.     return 0;     
41. }  

程序运行效果图：

接着，我们给窗口设置一张背景图。
给窗口设置背景背景图的接口：

[cpp]  view plain copy print ?

1. /* 功能：  设置背景图 
2.  * widget: 主窗口 
3.  * path：  图片路径 
4.  * w, h:   图片的大小 
5.  */  
6. void chang_background(GtkWidget *widget, const gchar *path, const int w, const int h)  
7. {  
8.     gtk_widget_set_app_paintable(widget, TRUE);     //允许窗口可以绘图  
9.     gtk_widget_realize(widget);   
10.       
11.     /* 更改背景图时，图片会重叠 
12.      * 这时要手动调用下面的函数，让窗口绘图区域失效，产生窗口重绘制事件（即 expose 事件）。 
13.      */  
14.     gtk_widget_queue_draw(widget);  
15.       
16.     GdkPixbuf *src_pixbuf = gdk_pixbuf_new_from_file(path, NULL);   // 创建图片资源对象  
17.     // w, h是指定图片的宽度和高度  
18.     GdkPixbuf *dst_pixbuf = gdk_pixbuf_scale_simple(src_pixbuf, w, h, GDK_INTERP_BILINEAR);  
19.   
20.     GdkPixmap *pixmap = NULL;  
21.       
22.     /* 创建pixmap图像;  
23.      * NULL：不需要蒙版;  
24.      * 123： 0~255，透明到不透明 
25.      */  
26.     gdk_pixbuf_render_pixmap_and_mask(dst_pixbuf, &pixmap, NULL, 128);  
27.     // 通过pixmap给widget设置一张背景图，最后一个参数必须为: FASLE  
28.     gdk_window_set_back_pixmap(widget->window, pixmap, FALSE);  
29.       
30.     // 释放资源  
31.     g_object_unref(src_pixbuf);  
32.     g_object_unref(dst_pixbuf);  
33.     g_object_unref(pixmap);  
34. }  

下面是完整代码：

[cpp]  view plain copy print ?

1. #include <glade/glade.h>  // glade所需头文件  
2. #include <gtk/gtk.h>  
3.   
4. /* 功能：      给创建好的图片控件重新设计一张图片 
5.  * image：       图片控件 
6.  * file_path:   图片的路径 
7.  * w, h：        指定图片的宽度和高度 
8.  */  
9. void load_image(GtkWidget *image, const char *file_path, const int w, const int h )  
10. {  
11.     gtk_image_clear( GTK_IMAGE(image) );        // 清除图像  
12.     GdkPixbuf *src_pixbuf = gdk_pixbuf_new_from_file(file_path, NULL);  // 创建图片资源  
13.     GdkPixbuf *dest_pixbuf = gdk_pixbuf_scale_simple(src_pixbuf, w, h, GDK_INTERP_BILINEAR); // 指定大小  
14.     gtk_image_set_from_pixbuf(GTK_IMAGE(image), dest_pixbuf); // 图片控件重新设置一张图片(pixbuf)  
15.     g_object_unref(src_pixbuf);     // 释放资源  
16.     g_object_unref(dest_pixbuf);    // 释放资源  
17. }  
18.   
19. /* 功能：  设置背景图 
20.  * widget: 主窗口 
21.  * path：  图片路径 
22.  * w, h:   图片的大小 
23.  */  
24. void chang_background(GtkWidget *widget, const gchar *path, const int w, const int h)  
25. {  
26.     gtk_widget_set_app_paintable(widget, TRUE);     //允许窗口可以绘图  
27.     gtk_widget_realize(widget);   
28.       
29.     /* 更改背景图时，图片会重叠 
30.      * 这时要手动调用下面的函数，让窗口绘图区域失效，产生窗口重绘制事件（即 expose 事件）。 
31.      */  
32.     gtk_widget_queue_draw(widget);  
33.       
34.     GdkPixbuf *src_pixbuf = gdk_pixbuf_new_from_file(path, NULL);   // 创建图片资源对象  
35.     // w, h是指定图片的宽度和高度  
36.     GdkPixbuf *dst_pixbuf = gdk_pixbuf_scale_simple(src_pixbuf, w, h, GDK_INTERP_BILINEAR);  
37.   
38.     GdkPixmap *pixmap = NULL;  
39.       
40.     /* 创建pixmap图像;  
41.      * NULL：不需要蒙版;  
42.      * 123： 0~255，透明到不透明 
43.      */  
44.     gdk_pixbuf_render_pixmap_and_mask(dst_pixbuf, &pixmap, NULL, 128);  
45.     // 通过pixmap给widget设置一张背景图，最后一个参数必须为: FASLE  
46.     gdk_window_set_back_pixmap(widget->window, pixmap, FALSE);  
47.       
48.     // 释放资源  
49.     g_object_unref(src_pixbuf);  
50.     g_object_unref(dst_pixbuf);  
51.     g_object_unref(pixmap);  
52. }  
53.   
54. int main(int argc,char *argv[])  
55. {  
56.   
57.     gtk_init(&argc,&argv);  // 初始化  
58.       
59.     // 载入并新建整个界面  
60.     GladeXML *gxml = glade_xml_new("demo.glade", NULL, NULL);  
61.     // 获取界面里的窗口控件  
62.     GtkWidget *window = glade_xml_get_widget(gxml,"window1");  
63.     // 获取图片控件  
64.     GtkWidget *image= glade_xml_get_widget(gxml,"image1");  
65.     // 获取按钮1  
66.     GtkWidget *button_previous= glade_xml_get_widget(gxml,"button_previous");  
67.     // 获取按钮2  
68.     GtkWidget *button_next= glade_xml_get_widget(gxml,"button_next");  
69.   
70.     gtk_widget_show_all(window);    // 显示所有控件  
71.       
72.     // 获取图片控件的宽度和高度，必须放在gtk_widget_show_all()函数后  
73.     int w = image->allocation.width;  
74.     int h = image->allocation.height;  
75.     // 给图片控件设置内容  
76.     load_image(image, "next.bmp", w, h);  
77.       
78.     // 给主窗口设置背景图  
79.     chang_background(window, "bg.jpg", 800, 480);  
80.       
81.     gtk_main(); // 主事件循环  
82.       
83.     return 0;     
84. }  

程序运行效果图：

源代码下载地址：http://download.csdn.net/detail/u013293310/6839475