【@.1 MVVM设计模式与Glade】

做上层软件开发的程序员可能对于MVVM模式比较熟悉，这是一种经典的软件设计模式，很好的将用户界面与后台处理之间分层开，通过属性、事件绑定这种统一的"接口"将软件重新组装起来，将原本看上去很混乱很冗余的软件开发流程抽象出来，以一种统一而又合理的思想来组织软件开发。下面截自wiki的一幅图简单说明了MVVM模式的组织结构。

View层提供了人机交互界面，Model层则是处理实际逻辑操作、数据操作的核心，二者之间由ViewModel层来进行协调，即绑定(Binding)View层的操作和属性，请求Model执行并得到反馈结果。

MVVM模式在Windows平台下的WPF开发得到了很好的体现，而WPF开发中View层并不是用C代码，而是用XAML来描述的，这是以前的传统软件开发或是MFC开发中所没有的。在实际使用这种WPF开发时可以用Expression Blend来进行UI设计，这个软件专门而且仅仅生成一个XAML文件用于界面描述，而底层的逻辑代码直接连到Visual Studio中进行编写。通过Blend画出的界面可以很好的释放你的创造力想象力，而其跟Visual Studio之间的无缝连接将MVVM模式演绎的淋漓尽致。因此我开始考虑有没有一种更通用的工具，不仅仅局限于Windows平台，能在多数平台下用MVVM模式进行开发。于是我发现了Glade与GTK的配合。

GTK是一个以纯C语言开发的图形库，同样适用于跨平台开发中。对于做底层开发比较多的人来说看到纯C代码比较亲切，我也一直想用纯C，而不是Visual Studio中提倡的C#，进行软件开发。单独使用GTK非常棒，但是一个问题就在于，需要手写的代码太多了。画一个按键，按键的布局，按键的事件，这些都需要自己一行行手写，而且还得留意代码的顺序。而其中一个我觉得是很大的门槛在于，布局需要盲打，即，你只能先在脑中有个界面的想法，写好代码后才能看到界面的结果。当然对于嵌入式设计中的很多界面设计都是盲打，比如uCGUI，但是如果有一个工具能像Visual Studio之类的集成开发环境一样能画界面，再生成代码，那开发的速度将大大提升。Glade就很好的解决了这一问题。

Glade很像Expression Blend的作用，它仅仅生成一个xml文件，描述了界面是怎样布局的，界面上需要绑定那些事件(Signal)。通过Glade+GTK开发的程序每次在运行时都会解析这个xml文件生成一个界面(是不是跟WPF一样~)，main函数里的代码量大大减少，所需要的就是新建一个builder，解析这个xml，传给gtk中的窗口类型，再显示这个窗口，之后进入Gtk的主循环即可。

但是，Glade+GTK劣势于Blend的一个关键特性是，不支持属性绑定。虽然GTK中的Glib在2.26以后就增加了GBinding，也就是属性绑定的支持，但是在Glade中却并没体现出属性绑定的设置，至少不能像Blend一样，每一个属性都可以方便的设置绑定。在C代码中手动编写代码来进行绑定或许可以实现(有待测试)，但是官方教程上并没有这一特性介绍，也没有像Blend中那样强调属性绑定的重要性。这一特性的缺失导致Glade+GTK实现的MVVM有所残缺。这篇文章的作者在进行向Glade和GTK中增加Binding的实现，可以参考他对于binding的描述。不知道现在进展如何了。

不过话说回来，就算没有属性绑定也能写出一个好的界面出来不是？

【@.2 软件准备】

开发时所需的工具很简单，下面分开说明(也可以参考文章末尾打包好的所有模块下载)：

1.Gtk。由于Gtk是跨平台的图形界面库，因此对于windows下的Gtk不见得是最新版本的，但是其功能也足够我们使用了。在这个页面中可以找到Windows平台下的Gtk库，我下载的时候windows版本的gtk只有2.24版本。除开源代码，每个模块有两个下载分支，一个是Dev也就是开发时所需库和头文件，另一个是Run-time的动态链接库。编译好的Gtk程序仅需将run-time的库解压到运行程序相同文件夹(或者可自己配置)，即可将程序发布。如果觉得一个个模块下载麻烦，可以下载all-in-one bundle，包含了Run-time和Dev版本。下载后解压到任意位置即可，比如c:\gtk\下，编译时需要向环境变量中的PATH添加c:\gtk\bin就可以了。

2.Glade。在官方网站可以下载到windows平台下的glade。需注意下载的glade版本与gtk版本是否匹配，我下载时glade3.8.x版本支持gtk 2版本，3.14.x支持gtk 3版本。由于前面下的gtk版本是2.24，这里下载glade需3.8.3版本。

3.需要一个在windows下的GNU编译器，也就是MinGW。我在这篇博客中详细介绍了Windows下配置MinGW的方法，同样也有配置完整的打包下载，可以参考自行配置这里不再累述。

4.一个文本编辑器。系统自带的文本编辑器就可以了，不过为了编辑代码方便，windows下我还是推荐Notepad++来编辑，请自行google下载最新版本即可。当然为了有一个完整的IDE，可以使用Eclipse配置一个完善的开发环境，不过这里为了保持问题的简洁性暂且不考虑采用Eclipse。

【@.3 程序实例】

保证所有软件下载安装完成，即

Gtk解压，比如解压到C:\gtk\。

Glade安装结束。

MinGW配置可用。如果你采用前面提到我自行配置的MinGW注意仅需解压即可，比如解压到C:\MinGW\

关于Glade的教程，可以参考下面链接：

GTK+ and Glade3 GUI Programming Tutorial

但是需注意的是，这篇教程中的源代码在Windows下编译后不能很好的运行(也就是所有的事件不能正常绑定)，并且其中的Glade版本比较低，用Glade生成的界面文件与我们的主程序代码联系在一起的步骤有变，所以仅仅参考其Glade的界面设计步骤即可。

打开glade，在左侧的Toplevels中新建一个Window，右侧的属性中将name改为mainWindow。一般在GTK设计中需要新增一个Container来进行布局的调整，这里为了演示方便，就简单的拖动一个按钮在界面上就好了。将按钮名字改为button_Click。

下面新建两个事件(Signal)。在mainWindow中右侧属性栏切换到Signals一栏，找到GtkObject下的destroy，在Handler下选择on_mainWindow_destroy，这将作为这个控件销毁，也就是窗口关闭时的发出的信号。

另外一个按键的类似，切换到右侧属性栏的Signals，找到GtkButton中的clicked，选择Handler为on_button_Click_clicked。这个作为点击按钮发送的信号。

保存这个界面设计为，比如Tutor1.glade，在任意目录下。

在同一目录下新建一个main.c文件，输入如下代码

#include <gtk/gtk.h>
//Add G_MODULE_EXPORT to signal function prototype is important in Windows!!!
//#define  G_MODULE_EXPORT   __declspec(dllexport)
static unsigned int clkcount;
G_MODULE_EXPORT void on_mainWindow_destroy(GtkObject *object, gpointer user_data)
{g_print("Quit Here!");gtk_main_quit();
}
//G_MODULE_EXPORT must be add!!
G_MODULE_EXPORT void on_button_Click_clicked(GtkObject *object, gpointer user_data)
{clkcount++;g_print("  **Button Clicked!**  %d\n",clkcount);}int main (int argc, char *argv[])
{GtkBuilder    *builder;GtkWidget     *window;//
   clkcount=0;//
   gtk_init(&argc, &argv);builder = gtk_builder_new();gtk_builder_add_from_file(builder, "Tutor1.glade", NULL);//
   window = GTK_WIDGET(gtk_builder_get_object(builder, "mainWindow"));//add the top window in the glade code
   gtk_builder_connect_signals(builder, NULL);g_object_unref(G_OBJECT(builder));//
   gtk_widget_show(window);gtk_main();return 0;
}

这既是运行一个Glade+GTK设计出的界面程序的最小代码，可以看到主函数里面的代码量相比于单纯用Gtk来编写少了许多。

注意到前面新建的两个信号，on_mainWindow_destroy和on_button_Click_clicked前面都加了G_MODULE_EXPORT进行修饰。这是一个宏，在代码注释中写出了这个宏的展开。如果不加它，则最后编译出的运行程序将会找不到对应的事件(handler)。之后需要编译。同文件夹下新建一个build.bat，输入如下代码(假设gtk安装在c:\gtk\bin下，并且MinGW的路径为c:\MinGW\bin)

@echo off
::Set GTK for compile and runtime libs
set PATH=C:\gtk\bin;%PATH%
set PATH=c:\MinGW\bin;%PATH%
(pkg-config --cflags --libs gtk+-2.0 )>temp
set /p pkg=<temp
del temp
::gcc -Wall -mwindows -g -o main main.c %pkg%
gcc -Wall -g -o main main.c %pkg%

编译成功后，如果不在同文件夹下放置所有的运行库，则程序将无法运行。这时候最简单的就是将所有运行库dll解压到同文件夹下即可运行(文章末尾打包文件中有)，另一种方法是写一个脚本设置运行库的路径之后再运行程序。可以新建一个launch.bat，输入如下代码

@echo off
set PATH=c:\gtk\bin;%PATH%
start main.exe

即可运行。

下面是所用到程序的打包，其中包含了例程以及必要脚本

gtk2-glade3-win32.7z