開源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)