[Linux可视化编程系列三] 体验Glade的可视化界面设计

前面的两篇文章：《用 Anjuta 轻松搭建 Gtkmm+libglademm 开发环境》和《掀起 Gtkmm + libglademm 的盖头来》，已经为我们能够做出一个有用的gtkmm程序作好了铺垫。

接下来，我们马上就要编写这样的一个程序，它能接收输入的用户名字，然后显示适当的问候语。对它稍作修改就能用于IP物理地址的查询界面。

用Glade进行可视化窗体设计
────────────────────────────────────
首先，让我们编辑Glade文件。请参照这个视频进行操作， 它将整个操作过程演示了一遍。与演示视频中稍有不同，在依次将Layout、Lable、Entry和Button这几个控件添加到主窗口 （main_window）之后，请照这个样子设置后面三个控件的名称，它们分别为“lable_msg”、“entry_name”和 “button_sayhello”。

保存Glade文件后，视频中所用到的源码在下面，或从附件中下载。

让程序和用户进行互动
────────────────────────────────────
为了响应用户的操作，需要添加一些必要的程序代码。请用下面的代码将上一篇中的代码替换掉。介于“//v2++++++”和“//v2------”之间的代码就是新加入的。我们照例还是在源码中间穿插注释的方式，对它们进行分析理解。

文件“main.cc”

代码:

#include "hello-app.hpp" int main (int argc, char *argv[]) { HelloApp app(argc, argv); app.show_window(); return 0; }

文件“hello-app.hpp”

代码:

#ifndef _HELLO_APP_HPP_ #define _HELLO_APP_HPP_ #include <gtkmm.h> #include <libglademm/xml.h> //v2+++++++++++++++ #include <libglademm/variablesmap.h> /* 连接控件与变量 */ #include <sigc++/functors/slot.h> /* 信号槽 */ //v2--------------- class HelloApp: public Gtk::Main { public: HelloApp(int argc, char *argv[]); ~HelloApp(); void show_window(); protected: Glib::RefPtr<Gnome::Glade::Xml> ref_xml; Gtk::Window* main_window; //v2+++++++++++++++ Gtk::Button* button_sayhello; /* 按钮控件指针 */ Gtk::Label* label_msg; /* 显示问候的标签控件指针 */ /* 由于VariablesMap无法被定义成Glib智能指针，于是我们就 定义一个VariablesMap的标准库的智能指针（下面这句相当于 “Gnome::Glade::VariablesMap* var_map”，只是不用再 “delete var_map;”来释放内存了，它会自动释放）。 通过它，我们能连接控件与变量，进行数据的交换。 */ std::auto_ptr<Gnome::Glade::VariablesMap> var_map; Glib::ustring str_name; /* 获取输入的变量 */ void on_button_sayhello_clicked(); /* 响应按钮点击事件的处理函数 */ //v2--------------- }; #endif // _HELLO_APP_HPP_

文件“hello-app.cpp”

代码:

/* tipfoo<tipfoo@gmail#com> 原创作品，版权所有，出处： http://blog.csdn.net/tipfoo/ */ #include "hello-app.hpp" #include <iostream> #include <assert.h> using namespace Gnome::Glade; HelloApp::HelloApp(int argc, char *argv[]): Gtk::Main(argc,argv), main_window(0) { try { ref_xml = Xml::create("helloapp.glade"); } catch(const XmlError& ex) { std::cerr << ex.what() << std::endl; return; } ref_xml->get_widget("main_window", main_window); assert(main_window); //v2+++++++++++++++ /* 取得标签控件的指针，后面用它来设置输出信息 */ ref_xml->get_widget("lable_msg", label_msg); assert(label_msg); /* 将响应"button_sayhello"按钮的点击事件的处理函数连接到 “HelloApp::on_button_sayhello_clicked”函数。 connect_clicked() 函数的第二参数需要一个信号槽；而 sigc::mem_fun()在运行时、动态地返回一个信号槽。其中： 第一个参数是信号槽要操作的类对象实例，在此就是本类的实例； 第二个参数是响应函数的指针，要用全局限定符。 参考（需要安装libsigc++-2.0-doc包）： 浏览器打开“ /usr/share/doc/libsigc++-2.0-doc/docs/index.html” 点击“Groups”下的“Functors”。 */ ref_xml->connect_clicked("button_sayhello", sigc::mem_fun(*this, &HelloApp::on_button_sayhello_clicked)); /* 通过ref_xml构建一个VariablesMap实例，并保存其指针于var_map。 然后，我们通过var_map，连接控件与变量，之后就能进行数据的交换了。 */ var_map = std::auto_ptr<VariablesMap> (new VariablesMap(ref_xml)); var_map->connect_widget("entry_name", str_name); //v2--------------- } HelloApp::~HelloApp() { } void HelloApp::show_window() { if (main_window) { run( *main_window ); } } //v2+++++++++++++++ /* 按钮"button_sayhello"的点击事件的处理函数 */ void HelloApp::on_button_sayhello_clicked() { /* 进行数据的交换，将所有控件的数据传入变量中。 这时输入到文本框中的内容就存入“str_name”变量中了。 */ var_map->transfer_widgets_to_variables(); /* 支持Unicode的字符串对象 */ Glib::ustring msg = "Hello, " + str_name + "!"; /* 设置输出信息 */ label_msg->set_text(msg); } //v2---------------

保存更改后，按SHIFT+F11编译并生成执行文件，再按F3就能运行了。
（tipfoo 原创作品，转载请注明出处： http://blog.csdn.net/tipfoo/ ，商业用途请联系作者<tipfoo@gmail#com>，未经授权，不得使用。）

Glade 插件问题
────────────────────────────────────
问题1：我们看到演示中窗口标题改成了“Hello Gtkmm！”但显示的还是“Hello World！”。
解决：这是Glade插件的Bug，改完标题后，要将鼠标点击其它地方（就是使输入焦点离开标题内容框），然后再保存Glade文件。记得刷新。

问题2：双击Glade 文件不显示窗口控件，而是一片空白。
如果一个 Glade 文件已打开的话，在文件管理器（或工程管理器）中，双击这个 Glade 文件再次打开它；然后，双击“Widgets”管理器中的主窗体部件（通常是“main_window”）却看不到窗体，在Designer中将显示空白。

这种情况也经常发生在重新打开工程时。由于在关闭工程时，Glade 文件通常是保持打开的。重新打开工程时，Glade 文件将自动被打开。但在Designer中不显示窗体，而是空白，要双击“Widgets”管理器中的主窗体组件（通常是“main_window”）才 能看到。此时，很容易误认为，glade 文件没有打开，而出现上面的情况。

解决：重复点击菜单“Glad”→“关闭”，直到看不到“Glad”菜单项；在左侧面板的文件管理器中，双击 Glade 文件打开它（就是 helloapp/src/helloapp.glade 文件）；再双击“Widgets”管理器中的主窗体部件（名为 main_window）即可。点这里到6楼查看图解

一点技巧
────────────────────────────────────
如何移动控件或更改控件大小
在Glade设计器中，移动控件或更改控件大小需要同时按住SHIFT键。

直观准确地设置窗口的大小
由于Label或Image控件是透明的，用它们来测量出主窗口需要的尺寸就比较直观。
步骤：
1. 在左侧Palette面板中选择Label，在设计（Designer）视图的窗口中单击放置它；
2. 按住SHIFT键、并用鼠标拖动这个Label控件到窗口的左上角，使其水平和垂直坐标均为0（这个可在Properties的“打包”选项页中确认它的值）；
3. 之后按住SHIFT键、并用鼠标拖动这个Label控件的右下角，调整到主窗口所需的大小；
4. 在Properties的“公共”选项页中，“宽度请求”和“高度请求”就是我们所要的数值。
5. 设置主窗口的“常规”选项页中的“默认宽度”值为上面的“宽度请求”，“默认高度”值为上面的“高度请求”。

[align=center][/align] f1ip-dict.png 描述: 基于本例的IP物理地址查询工具，使用纯真数据库新版（ipwry.dat）。从win的dll移植而来。 文件大小: 10.13 KB 看过的: 文件被下载或查看 3565 次 [align=center][/align] [align=center][/align] hello.gtkmm.src.tar.gz 描述: 源码和Glade文件 下载 文件名: hello.gtkmm.src.tar.gz 文件大小: 2.47 KB 下载过的: 文件被下载或查看 126 次 [align=center][/align] _________________