开源GTK向导式界面控件的设计与制作

胡泽明，李婧

(1.信息工程大学 信息系统工程学院，郑州 450002；2.河南省水利信息中心)



开源GTK向导式界面控件的设计与制作

胡泽明1，李婧2

(1.信息工程大学 信息系统工程学院，郑州 450002；2.河南省水利信息中心)

轻量级开源GTK平台是Linux下开发图形界面的应用程序主流开发工具之一，目前广泛应用的GTK2.0版本未提供向导式界面控件，本文深入分析向导式界面的布局并提取其共性，结合GTK常规控件设计制作了向导式界面控件，并提供用户区布局控件接口供用户调用填充内容，不仅提供了一致性界面风格，且进一步提升了GTK向导式界面的编写效率。设计实例表明，该设计方法功能正确、灵活性强、代码复用率高，对基于GTK开发自定义控件以满足应用需求具有重要的指导意义。

轻量级GUI；开源GTK；API界面编程；向导式界面

引 言

GTK+(GIMP Toolkit)是一套源码以LGPL(Lesser General Public License)许可协议分发、跨平台的图形工具包，目前已发展成为GNU/Linux下开发图形界面应用程序的主流开发工具之一[1]，有Windows版本和Mac OS版本，能够支持C/C++、Python等编程语言[2]，已从1.0版本发展到3.0，当前应用比较多的为2.0版本。GTK+属于轻量型GUI，编译后可执行文件约几MB[2]，远小于MFC或QT对计算机资源的需求，目前在Linux平台得到了广泛应用，如GNOME、XFCE等桌面环境和大部分窗口管理器都基于GTK+。

轻量级GTK具有的开源性、设计灵活性和可扩展性，以及丰富GUI构件集[3]，为用户基于GTK开发提供了坚实基础，但GTK属于APIs函数式编程模型，不支持直观的“所见即所得”可视化界面编程。在一些基于GTK开发的软件系统中，涉及到类似Windows平台向导式界面的开发需求，可以实现简单直观的软件部署或系列参数设置等。但分析GTK2.0，其未提供向导式界面控件，从而加大了开发难度。为此深入分析向导式界面的布局，并提取其共性特性后，基于GTK控件集设计并实现了向导式界面控件，且预留用户区自定制布局控件接口，供用户扩展、定制具体界面内容。应用实例表明，所设计的向导式界面控件，功能正确、灵活性强、风格一致性好、代码复用率高；同时该设计方法对基于GTK开发自定义控件、扩展功能特性、实现软件系统具有较强的借鉴意义。

1 GTK架构及特性分析

1.1 GTK体系结构

GTK应用程序由基于GTK+提供的接口函数集APIs来编写，包括Glib库、GObject库GDK库等依赖库，这些库分别实现不同的功能，如图1所示。

图1 GTK+体系结构

在图1中，主要库及功能包括：Glib库提供底层的数据结构、类型、多线程支持、事件循环和动态加载等；GObject库用C编程实现的面向对象系统；Pango库即语言库，支持文本的渲染和布局，实现本地化和国际化；GDK库处理Xlib上的底层图形渲染，如“图形实现”和“窗口实现”；GdkPixbuf库帮助处理GTK+程序中的图像，用于加载图像和维护图像缓存；Xlib库提供位于操作系统上的底层绘图函数；GModule库支持动态加载插件。

1.2 GTK事件响应机制

GTK+是一个依赖于事件、信号、回调机制的软件系统。一个事件是由X窗口发出的消息，当用户执行一些动作，如移动鼠标、敲击键盘时，对应事件就被发送到GTK程序，被Glib的信号系统所解释。当该事件到达GTK构件(GtkWidget)时，信号就发生了，此时可告诉GTK+运行1个函数，即所谓的回调函数。

在GTK2.0中，事件响应实现对应信号连接函数g_signal_connect()和回调函数callback_func()。

g_signal_connect()函数原型：

gulong g_signal_connect(gpointer object, const gchar* name, GCallback func, gpointer func_data);

//object指需要监听信号的控件

//name为需要监听的信号名称

//func为发生信号后的回调函数

//func_data是传递给信号处理函数func的参数，可为NULL

callback_func ()函数原型：

当GTK构件上信号发出时，在g_signal_connect()中指定的回调函数被调用。回调函数有如下的形式，它是被程序员命名的。

void callback_func(GtkWidget *widget, gpointer func_data);

//widget指向接收信号的控件

//func_data是传递的消息，对应g_signal_connect()中第4个参数，需强制类型转换

信号连接及回调函数举例：

//针对退出事件"delete_event"，注册主窗口退出函数：

g_signal_connect(G_OBJECT(mainwin),"delete_event",G_CALLBACK(gtk_quit),NULL);

//主窗口退出函数回调函数

voidgtk_quit(G_OBJECT(mainwin), NULL);

1.3 GTK界面构件

GTK+2.0采用基于面向对象的开发模式，除了提供基本的队列、链表等底层构件外，类似于Windows MFC，还提供丰富的GUI界面构件，用于人机交互。这类构件集[3]包括：窗体类的窗口(GtkWindow)、对话框(GtkDialog)、笔记本构件(GtkNotebook)等，可编辑类的编辑框(GtkEntry)、组合框(GtkCombox)等，人机交互类的菜单(GtkMenu)、按钮(GtkButton)、工具栏(GtkToolbar)等；控制类的定时器、进度条等；能容纳多个控件的盒状容器(GtkBox)、格状容器(GtkTable)、按钮盒(GtkButtonBox)、分隔面板(GtkPanel)、固定布局(GtkFixed)等，用于构件的排列布局。

GTK+2.0提供一种用最短的代码来编写窗口和控件的方法，以及灵活易用的信号/回调函数机制。使用GTK编写控件代码时要注意代码书写顺序：先定义窗口变量，再创建窗口，然后加回调函数，最后显示窗口。以窗口构件为例，其相关代码段如下：

void gtk_usr_wintest(void){

GtkWidget *window;//定义窗口变量

window=gtk_window_new(GTK_WINDOW_TOPLEVEL); //创建窗口

g_signal_connect(G_OBJECT(window),"delete event",G_CALLBACK(gtk_main_quit), NULL);//加回调函数

gtk_widget_show(window); //显示窗口

}

2 向导式界面控件设计与实现

2.1 向导式界面布局与分析

软件界面设计中的“向导式界面”这个术语来自英语中的“Wizard”一词。在实际使用中，这种交互方式就像一个向导一样，一步步地引领用户向前。在每一步中，它会询问用户一些简单的问题，并根据输入信息帮助用户完成一个复杂的任务。分析现有资料[4]，设计向导式界面的一些原则如下：

① 需要时刻展示整个向导过程及当前位置，一般处理方式为在每个步骤页面的固定位置显示一个所有步骤名称的列表，并且以一种醒目的方式显示当前所处的步骤；

② 每个步骤上信息量的设置要合理，一般处理方式要确保每个步骤中内容的内聚性以及不同步骤之间内容的松耦合性；

③ 要保证步骤的唯一性，即用户只要在向导界面上完成所有操作，就能实现最终的任务，而不需要再启动别的进程，或者执行额外的命令；

④ 易避免误操作性，即要求尽可能做到每一步骤都可回退，不可回退的要进行提示，界面中条件激活按钮当条件满足时才可激活，否则处于变灰不可用状态。

基于上述原则，向导式界面布局如图2所示。

图2 向导式界面布局图

其分析内容如下：

① 底图：一般为对话框窗体，尺寸、风格等外观允许用户设置；

② 标题区：一般位于顶部，为窗体的标题，首次设置后，在后续步骤中，基本不变；

③ 向导步骤区：一般位于左侧栏，安装过程始终不变且一直存在，同时需要醒目指示用户当前所处的安装步骤；

④ 按钮操作区：一般位于底部，包含【上一步】、【下一步】、【保存】等操作按钮，支持用户回退或前进，推动安装步骤进行；

⑤ 用户定义区：一般位于居中右侧栏，对应着用户定制的向导式界面内容，APIs编程模式中需要提供布局参数，支持用户按需编写代码，绘制GUI界面元素。

2.2 向导式界面控件的设计

围绕向导式界面布局的分析，结合GTK+2.0构件集，参考基于GTK的自定义控件实现方法[5-6]，可设计通用的向导式界面模板，其中用GtkWindow控件创建窗体、水平(GtkHBox)或垂直盒状容器(GtkVBox)实现界面布局，并为程序开发者提供用户区布局容器句柄，按钮盒(GtkButtonBox)创建底部按钮，以及分栏列表构件(GtkCList)展示向导步骤等，并通过上述界面控件操作函数集APIs实现对属性参数的调整等。

基于GTK设计实现向导式界面控件时，为方便用户编程、增强控制灵活性，需要存储部分关键参数，定义关键结构体如下：

typedef struct{ //定义向导式界面结构体

GtkWidget *pWin; //向导窗体句柄

GtkWidget *pClientVbox; //用户定义区垂直容器盒， //提供给用户进行界面布局

GtkWidget *pBtnHbox; //按钮区水平容器盒，提供 //给用户设置安装进行按钮

GtkWidget *pBtn[]; //存储按钮句柄，用户设置回 //调函数，设置按钮状态等

gint nBtnNum; //按钮个数

GtkWidget *pStepBox; //安装步骤容器

GtkWidget *pStepClist; //安装步骤列表

gint nStepNum; //安装步骤数

}stGtkWizard;

GTK向导式界面布局部分特性及接口函数如下：

① 窗体：作为向导式界面的基本窗口，创建后需返回窗体控件句柄，放入stGtkWizard结构体中。

stGtkWizard* GtkWizard_CreateWin( gint w, gint h);

//创建窗体

② 标题区：首次设置后不再修改，无返回值。GtkWidget*GtkWizard_GetWin(stGtkWizard*pstGtkWizard);

//获取窗体句柄voidGtkWizard_SetTitle(GtkWidget*WizardWin, gchar*title);

//设置窗体标题

③ 向导步骤区：初始设置后不再改变，提示用户当前所处的步骤。

GtkWidget* GtkWizard_GetStepBox (stGtkWizard* pstGtkWizard); //获取安装进度盒容器句柄

GtkWidget* GtkWizard_GetStepClist (stGtkWizard* pstGtkWizard); //获取安装步骤列表句柄

void GtkWizard_CreateSteps(GtkWidget*pBox, GtkWidget* pClist, gchar *title, gchar *steps[] );

//设置安装步骤内容

void GtkWizard_SetCurSteps(GtkWidget*pClist,gint nstep);

//设置安装步骤高亮显示

④ 按钮区：推动向导步骤进行，对应按钮标题、按钮状态允许用户调整设置，以及设置响应函数。GtkWidget*GtkWizard_GetBtnHbox (stGtkWizard*pstGtkWizard);

//获取按钮句柄

void GtkWizard_SetBtn(GtkWidget*pBtn, gchar *title, GCallback btn_cb, gint nstate);

//设置按钮标题、回调函数及状态

⑤ 用户定义区：GTK编程时提供布局参数句柄，支持用户定制内容。

GtkWidget* GtkWizard_GetClientVbox (stGtkWizard* pstGtkWizard);

//获取用户区盒状容器句柄

2.3 应用实例

用GTK+2.0 开发应用系统，无论是Windows平台Visual Studio集成开发环境、Linux平台Eclipse集成开发环境，还是Linux平台GCC命令行Make环境，都需要首先完成正确的编程环境设置，主要包括两个内容：其一为GTK依赖库和头文件的包含，其二为库和头文件路径以及环境变量的设置等。

在Ubuntu 10.04.2 Linux环境中，基于make文件进行编译设置[1]，配置方式较为简单，直接在makefile文件头部设置连接标志LIBFLAG = `pkg-config gtk+-2.0 --cflags --libs` 即可。

基于第2节所设计并实现的向导式界面APIs接口，结合具体应用需求，在不同向导步骤界面中用户区添加一些GTK控件进行多次测试，功能正确，运行稳定。向导式界面实现实例部分截图如图3所示。

图3 基于向导式界面控件的应用实例图(节选)

通过对比上文所设计实现的GTK向导式界面编程方法以及传统GTK界面编程实现方法，其虽然初始设计实现向导式界面控件难度高，代码调试工程量大；但是后期应用时，代码复用率高，界面风格一致性好，修改维护简单，且可扩展性好。

结 语

[1] 宋国伟.GTK+2.0编程范例[M].北京:清华大学出版社,2002.

[2] What is GTK+, and how can I use it? [EB/OL].[2016-07].http://www.gtk.org.

[3] GTK+ reference manual[EB/OL].[2016-07].http://doc.gnu-darwin.org/gtk20.

[4] 如何设计一个优秀的向导式界面[EB/OL].[2016-07].http://www.360doc.com/content/16/0601/10/16915_564127800.shtml.

[5] 李国玲.Linux下GTK+自定义控件的设计和使用[J].科技与创新,2015(15):115-116.

[6] 叶超.GNU/Linux环境下基于GTK+的图形用户界面开发[D].长春:中科院长春光学精密机械与物理所,2007.

胡泽明(副教授)，主要研究方向为跨平台信息处理技术等。

Design and Realization of Wizard-interface Component Based on Open-source GTK

Hu Zeming1,Li Jing2

(1.Institute of Information System Engineering,Information Engineering University,Zhengzhou 450002,China;
2.Water Information Center of Henan Province)

GTK with the characteristics of open-source and light-weight is becoming the one of main graphic development platforms in Linux,and the version 2 cannot provide wizard-interface component for the users.In the paper,the layout of wizard-interface is analyzed,then the wizard-interface components by the GTK common components are designed.At the same time,an interface is reserved for the users to configure contents by themselves,thus the uniform wizard-interface style is provided,and the efficiency of coding is promoted highly.At last,an example shows that the method has a specification of high code-reusing and flexibility,which is very helpful to develop self-configured component for the users to satisfy the special application demands.

light-weight GUI;open-source GTK;API interface coding;wizard-interface

TP311

A

�士然

2016-07-20)