Glade的简单使用说明+例子(一)

[align=center]Glade的简单使用说明+例子[/align]

Gnome下已开发出了Glade这一应用软件，它是传统界面设计工具Gtk/Gdk的扩展，能满足基于Gtk+库的图形用户界面可视化开发的基本需求

一、Glade简介
　　如果有一种软件能将图形界面的设计及时地展现于开发人员的面前，而且在设计完后能直接看到界面的外观效果，这样就使程序员的主要精力集中于应用程序核心功能的开发上，这就是所谓的可视化编程思想。
　　在Windows环境下，这种可视化的集成开发环境已有许多成熟的产品，如VC++、VB、PB、Delphi、C++Bulider等。基于Linux 操作系统的软件并不丰富，但绝非一片空白，例如Borland公司推出的Kylix。目前Gnome下已开发出了Glade这一应用软件，它是传统界面设计工具Gtk/Gdk的扩展，能满足基于Gtk+库的图形用户界面可视化开发的基本需求。
　　Glade可为你生成界面代码，基本过程如下：
　　1.让Glade设计出界面元素，设置界面元素属性，为构件的信号设置回调函数；
　　2.将其存为XML格式，观察并修改不符合要求的部分；
　　3.编写应用其它部分代码，并在应用中载入Glade文件，编译C代码生成执行文件。
　　这种模式使设计界面与其它部分代码完全分开，并且有可能做到在对界面进行改动后不必对应用进行编译。图形用户界面设计小组可不必关心应用程序的运行细节，同时编程人员也可以把他们的时间用于其它方面，而不需为界面的修改重复编写大量烦琐的Gtk+函数。这种分工开发的形式符合软件工程的要求，对GUI软件的开发也更方便。
二、使用Glade的预备条件
　　在学习使用Glade之前，我们假设你已对Linux操作系统的基本运用有初步了解、熟悉rpm包或gzip包的处理命令、对C语言有一定的了解，并熟悉消息处理编程机制。以上基础是使用Glade的必备知识，如果读者在以上某些方面尚存不明之处可先查阅相关资料。为了能更灵活地使用Glade开发应用，用户最好能熟悉gcc编译器，掌握make文件的编写规则。
　　我们再来看看如何使Glade加入到Linux操作系统的开发环境中，主要分两步：
　　1.获得Glade的源代码
　　你可以在大多数Linux操作系统的发布中找到Glade的源代码，也可从网上下载，目前能方便获得源代码的网站是http://www.glade.pn.org/，下载的文件可能是rpm或zip格式。
　　2.解压、编译并安装Glade
　　在获得源代码后，对压缩包解压缩，然后再运行make编译Glade

三、学Glade前先要了解的一些东西
1、GNOME是一种让使用者容易操作和设定电脑环境的工具。GNOME 包含了 Panel (用来启动此程式和显示目前的状态)、桌面 (应用程式和资料放置的地方)、及一系列的标准桌面工具和应用程式，并且能让各个应用程式都能正常地运作。不管你之前使用何种操作系统，你都能轻易地使用 GNOME 功能强大的图形接口工具。
GNOME 是完全公开的 (免费的软件)，它是由世界上许多程式设计人员所发展出来的，你可以免费地取得它的源代码。如果你对 GNOME 有兴趣的话，可以参观 GNOME 的网站 http://www.gnome.org。
2、GTK (GIMP Toolkit)是一套用于创建图形用户界面的工具包。它遵循 LGPL 许可证，所以你可以用它来开发开源软件、自由软件，甚至是封闭源代码的商业软件，而不用花费任何钱来购买许可证和使用权。GTK 实质上是一个面向对象的应用程序接口 (API)。尽管完全用 C 写成的，但它是基于类和回调函数 (指向函数的指针) 的思想实现的。
3、还有一个名为 GLib 的第三个组件。glib库是Linux平台下最常用的C语言函数库，它具有很好的可移植性和实用性。glib是Gtk+库和Gnome的基础。glib可以在多个平台下使用，比如Linux、Unix、Windows等。它包含一些标准函数的替代函数，以及一些处理链表等数据结构的函数等。这些替代函数被用来增强GTK 的可移植性，因为它们所实现的一些函数在其它 Unix 系统上未实现或不符合标准，比如 g_strerror()。一些是对 libc 的对应函数的增强，比如 g_malloc() 具有增强的调试功能。在 2.0 版中，GLib 又加入这样一些新内容：构成 GTK 类层次基础的类型系统 (type system)，在 GTK 中广泛使用的信号系统，对各种不同平台的线程 API 进行抽象而得的一个线程 API，以及一个加载模块的工具。
四、窗体和界面设计
1、先说明下本人用的是Fedora 6。因为版本比较新，图形界面效果不错，Glade功能强些，且Glade的翻译好些。它包括了Glade2.0、Gcc4.0、GTK图形界面库GTK+2.6。但相对的对于内存的要求就比较高。尤其用虚拟机的兄弟们会发现内存必须调到256M才能进到系统安装的图形界面中和运行XWindow（且比较卡），最好是512M以上。
2、Glade的界面
[align=center]进入XWindow。选应用程序->编程->Glade Interface Designer 工具。（见图一） [/align]
[align=center]图1[/align]
软件界面如下：（见图2）
[align=center]图2[/align]
选新建，弹出新项目对话框选New GTK+Project （GTK+Project的可移植性好，）（见图3）
[align=center]图3[/align]
Palette（调色板、控件栏）窗口上（见图4）,点击GTK+ Basic-> Window(窗口)图标(第1行第1个控件). （见图5）
此时,会打开一个叫做window1的空白窗口。

图4 图5
点击glade主窗口上的菜单查看（View）->显示构件树（show Widget Tree）会显示个构件（Widget Tree）窗口。里面会显示所有已使用的控件。现在里面只有一个window1。（见图6）
[align=center]图6[/align]
[align=center]点击调色板（palette，就是控件栏）->网格工具中第2个（Vertical Box） ->点击一下空白窗口window1->出现提示框->输入行数（Number of rows）,输入3,选OK （见图7） [/align]
[align=center]图7[/align]
窗口中出现3个横线（见图8）
[align=center]图8[/align]
点击调色板（palette，就是控件栏）->第一行工具中第3个（工具栏）控件->点击一下空白窗口（window1）中3行网格的第1行->出现提示框->输入项数,输入3,选OK （见图9）
[align=center]图9[/align]
窗口上方出现个带3个按建的工具栏（见图10）
[align=center]图10[/align]
点击调色板（palette，就是控件栏）->第6行工具中第3个 （图象）控件->点击一下空白窗口（window1）中1行那个按放好的工具栏控件的按建（见图11）
[align=center]图11[/align]
设置图象控件属性->控件属性栏->构件（widget） ->图标:后退（gtk-go-back）->名字：（我定义image_Mbutton_back）->为第2、3个按建加入图象控件->控件属性栏图标选后退->名字：（我定义为image_Mbutton_help和image_Mbutton_exit）。(见图12)
[align=center]图12[/align]
光标放到工具栏控件上 ->属性栏->通用选项（Common）-> 高度：30（见图13）
[align=center]图13[/align]
光标放到工具栏上第1个按建的图象控件上 ->属性栏->通用选项（Common）-> 高度：30宽度:30(见图14)
[align=center]图14[/align]
其它按建同样
点击调色板（palette，就是控件栏）->第3行工具中第1个 标签控件（label）->点击一下空白窗口（window1）中2行（见图15）
[align=center]图15[/align]
[align=center]点击调色板（palette，就是控件栏）->网格工具中第2个（Vertical Box） ->点击一下最后那个网格->出现提示框->输入行数（Number of rows）,输入2,选OK –>网格工具中第3个，表格控件（Table Box） 击一下窗口window1中的网格->出现提示框->输入行数（Number of rows）输入4，列（Number of cols）3 ->选OK[/align]
[align=center]（见图16）[/align]
[align=center]图16[/align]
点击调色板（palette，就是控件栏）->第4行第1个控件按钮（Button） ->放到4*3的网格中第1格中->反复按次序放12个->在最下面那个大网格中放第13个（见图17）
[align=center]图17[/align]
[align=center]设置各个控件的属性 在控件树（Widget Tree）中选择窗口（window1）控件,然后在属性栏（Properties）窗口中,设置其属性值:（见图18） [/align]
[align=center]图18[/align]
构件（Widget）条目中,Resizable设置为No. （见图18）
通用（Common）条目中,宽（Width）设置为360,高（Height）设置为300. （见图19）
[align=center]图19[/align]
信号（Signal）条目中,点击下方信号（Signal）:后面的”…“按钮,在下拉菜单中选择destroy,选添加择OK.然后点击左（见图20）
[align=center]图20[/align]
构件（Widget）条目中, 中依次选择button1-button13,并设置各个button的属性值:
通用（Common）条目中,button1-button12的Width设置为120,Height设置为50.
button1的标签（label）设置为1.依次类推,button1-button9分别设置为1-9.
button10的标签（label）设置为0.Name设置为gtk_button_num0. (其它按建名以此类推)
button11的标签（label）设置为+.Name设置为gtk_button_add.
button12的标签（label）设置为-.Name设置为gtk_button_sub.（见图21）
[align=center]图21[/align]
[align=center]信号（Signal）条目中,为每个button分别添加一个clicked信号量.
在信号（Signal）条目中,点击下方信号:后面的”…“按钮,在下拉菜单中选择clicked,选择OK.然后点击左下脚的Add. （见图22）
[/align]
[align=center]图22[/align]
标签控件（label）的属性的构件（Widget）条目中名字：GTK_label_shownum ，标签（lable）：0，高度：50 。（见图23）
[align=center]图23[/align]
保存项目 点击Glade主窗口上的保存图标.将项目名称和glade文件名称设置为”gtk_window_test2”.项目的保存位置为/root/GTK(见图24)
[align=center] [/align]
[align=center]图24[/align]
选主窗口上联编生成文件（见图25）
[align=center]图25[/align]
选应用程序->附件->终端（见图26）
[align=center]图26[/align]
1、cd /root/GTK/GTK_window_test2/
2、./autogen.sh
3、make
4、cd src
5、./gtk_window_test
运行就能看到界面。