使用Glade和libGlade设计Gtk+图形界面

张威、曹剑
  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的源代码,也可从网上下载,目前能方便获得源代码的网站是www.Glade.pn.org,下载的文件可能是rpm或zip格式。
  2.解压、编译并安装Glade
  在获得源代码后,对压缩包解压缩,然后再运行make编译Glade。

  三、设计界面

  在对Glade有了初步的了解之后,让我们来看一看它的真面目吧,在Linux上先运行Xwindow,调出图形化界面后,你可以在虚拟控制台上输入Glade或在命令选单上找到开发子选单下的Glade项,点击即可。
  调出Glade后,我们一般能看到三个窗口(如图1):一个工程管理窗口(主窗口)、一个常用构件窗口和一个属性管理窗口。这三个窗口构成了一个GUI的开发环境,对于使用过可视化编程的用户而言,这三个窗口应是很熟悉的。
  工程管理窗口主要负责对一个工程项目的管理,我们所说的工程项目就是指所设计的图形界面。这个窗口中使用最多的是它的选单,常用的选单是创建新的工程项目,打开一个已有的项目文件进行编辑修改,以及改变对项目的视角等。


  图1

  常用构件窗口则是由Glade提供的常用Gtk+构件的图形化集。在需要调用某构件时只需在这个窗口中点击该构件的图标,然后在设计好的位置单击鼠标,这时构件就被安排到适当的位置。

  属性窗口主要负责对项目对象的属性调整,它本身是一个分页式的notebook构件,在各页上集中了项目对象(构件)某个方面的属性,如构件的标题名称、尺寸大小、位置、停靠对齐方式、快捷键设置和信号处理等。

  值得一提的是有些构件是根构件,或者说是顶层容器构件(如顶层窗口构件,对话框构件等),每一个顶层容器构件都会出现在工程管理窗口的主区内,顶层容器之间是独立的,要使它们能产生连接调度关系还需对由Glade生成的源码进行少量编辑。一个顶层构件的所有子孙构件由Glade维护在一个构件树中,我们可以调用工程管理窗口中的“查看构件树”选单项浏览构件树。

  四、生成代码选项

  当我们设计出想要的界面后就要让Glade生成我们需要的代码,点击build按钮,Glade会弹出一个选项窗口,这个窗口中有三页,分别是普通选项、C语言选项和libGlade选项(如图2)。


  图2


  五、Glade生成的文件


  Glade 生成的主要目录及代码文件有如下几个:在项目的根目录(假设为/root/projects/project1)下有三个子目录/po、/src和/macros,程序源代码都放在/src目录中,这个目录下的文件可以用文本编辑器再修改以增加应用。
  六、运用XML指针建立构件
  libGlade在程序运行时才根据XML文档 (.Glade文件)构造构件,为了应用libGlade,我们在程序的开始要对Gnome和libGlade进行初始化。初始程序如下:

  /初始化 gnome /
   gnome_init("phonebook", VERSION, argc, argv);

  / 初始化libGlade /

   Glade_gnome_init();

  获得一个构件指针的代码如下:

   /声明指针/

   GladeXML xml;

   GtkWidget dialog1;

  /在由Glade软件生成的XML界面文件中找到名为“about1”的根构件,生成XML构件并将构件指针赋给 xml /

   xml = Glade_xml_new("phonebook.Glade", "about1");

   dialog = Glade_xml_get_widget(xml, "dialog1");

  /对不用的指针要及时释放/

   gtk_object_unref(GTK_OBJECT(xml));

  设计界面时往往有相对独立的构件,在建造应用工程时要在这些构件之间建立联系,如主窗口和对话框的父子关系等,步骤如下:

  1.用XML建立两个构件:

  dialog = Glade_xml_get_widget(xml, "dialog1");

  app= Glade_xml_get_widget(xml, "app1");

  2.用gnome_dialog_set_parent(GNOME_DIALOG(dialog), GTK_WINDOW(app))函数将对话框设定为app窗口的从属构件。

  注意:在用Glade设计界面时有一点需要注意的是所有的构件名不能重名,因为我们要以它们的名字对该构件进行访问。


  七、消息处理函数


  对于消息处理函数,我们可以在设计构件时就在构件的属性管理窗口中的signal页指明(如图3),Glade在生成的代码中自动加入函数名。如果用libGlade则有两点限制:

  1. 回呼函数接收的参数不能指定类型而只能用空指针类型gpointer(void);


  图3

  2. 因为libGlade是在运行时才调用回呼函数,所以这类函数不能设为 static型。


  八、实例代码


  以下是用Glade生成的一个示例程序,它是一个简单的电话薄程序,共有三个用Glade设计的独立构件,一个主窗口、一个录入对话框和一个用于展示录入内容的clist列表构件。

  我们可以从主窗口点击按钮弹出对话框,在对话框中有两个录入条,分别用于录入人名和电话号码,当点击对话框中的“确定”之后,人名和电话号码会加入到clist列表中,对话框关闭。有兴趣的读者可以对这个应用程序加以丰富。

  #include 〈string.h〉

  #include 〈gnome.h〉

  #include 〈Glade/Glade.h〉

  #define VERSION "1.0"

   static GtkWidget app;

   static GtkWidget clist;

   void do_nothing(GtkWidget w);

   void run_about_dialog(GtkWidget w);

   void add_number(GtkWidget w);

   void do_nothing(GtkWidget w){

   gnome_app_message(GNOME_APP(app), "Doesn't do anything!");

   }

   void run_about_dialog(GtkWidget w){

   GladeXML xml;

   xml = Glade_xml_new("phonebook.Glade", "about1");

   if(!xml) {

   g_warning("We could not load the interface!");

   return;

   }

   gtk_object_unref(GTK_OBJECT(xml));

   }

  static void

  really_add_number(GtkWidget w, int button, gpointer data){

   char strings[2];

   GtkWidget name_entry;

   GtkWidget phone_entry;

   GladeXML xml = data;

   if (button != 0)

   return;

   name_entry = Glade_xml_get_widget(xml, "add_name_entry");

   phone_entry = Glade_xml_get_widget(xml, "add_phone_entry");

   strings[0] = gtk_entry_get_text(GTK_ENTRY(name_entry));

   strings[1] = gtk_entry_get_text(GTK_ENTRY(phone_entry));

   gtk_clist_append(GTK_CLIST(clist), strings);

   }

  void add_number(GtkWidget w){

   GtkWidget dialog;

   GladeXML xml;

   xml = Glade_xml_new("phonebook.Glade", "dialog1");

   if(!xml) {

   g_warning("We could not load the interface!");

   return;

   }

   dialog = Glade_xml_get_widget(xml, "dialog1");

   gnome_dialog_set_parent(GNOME_DIALOG(dialog), GTK_WINDOW(app));

   gtk_signal_connect_full(GTK_OBJECT(dialog),"clicked",GTK_SIGNAL_FUNC (really

  add_number), NULL, xml,(GtkDestroyNotify)gtk_object_unref,FALSE, FALSE);

   }

  int main(int argc, char argv[]){

   GladeXML xml;

   gnome_init("phonebook", VERSION, argc, argv);

   Glade_gnome_init();

   xml = Glade_xml_new("phonebook.Glade", "app1");

   if(!xml) {

   g_warning("We could not load the interface!");

   return 1;

   }

  app=Glade_xml_get_widget(xml,"app1");

  clist=Glade_xml_get_widget(xml,"clist1");

  Glade_xml_signal_autoconnect(xml);

  gtk_object_unref(GTK_OBJECT(xml));

  gtk_main();

   return 0;

   }

  对于使用过或熟悉Gtk+的读者来说,这样的代码就是以前我们要花大量时间和精力来编写的。有了这些代码,我们只要稍作修改就能完成所需的应用界面。


  九、代码的编译与执行


  Glade生成所需的代码后最后一步就是生成可执行文件了。

  1.编译代码的条件

  系统中必须安装automake 1.4和autoconf 2.13以上版本的两个软件,一般来说操作系统在安装时已将这两个软件安装好了,如要获得这两个软件可以到www.rawhide.redhat.com/pub/rawhide/i386/

  redhat/rpms/下载。

  2.编译代码的步骤

  #〉./autogen.sh

  在项目根目录下有一个autogen.sh文件, 它是一个shell脚本文件,运行这个脚本文件就能生成标准的 makefile文件。

  #〉make

  运行make 命令按makefile进行编译。

  (1)#〉make install

  运行install使某些资源如图片等安装到程序中,如果没有这一步程序也能运行,但当资源文件的路径有变化时,程序就会因找不到资源文件而出现问题。

  (2)已生成的可执行文件放在/src子目录下,在该目录下运行该程序名即可。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
UIDesigner(腾讯公司出品) 在软件设计阶段,交互设计师或者产品经理等常常需要使用一些工具(比如Visio、Axure RP、Flash或者OmniGraffle等)制作出静态稿或者原型来表达设计思想。这些工具是各有各的优势,当然也各有各的缺点啦。那么腾讯CDC是如何设计软件原型的呢?这里向大家介绍我们正在研发的原型设计利器UIDesigner。   首先,先让我们来体验一下UIDesigner制作出来的原型效果。这个原型是一个设置窗体,主要由按钮、复选框、分组框和文本框等控件构成,其中一些按钮还具有响应的动作(如打开另一个界面,关闭窗体等)。如图一所示,这是使用Firework制作出来的交互图。 图一、使用Firework制作出来的设计稿   这种交互图的特点是简单明了,能够表示出各种控件的基本属性(如文本、位置和选中状态等),但它只是一个静态的图片,不能真实表现出每个控件的响应动作,如仅看这张图,是不清楚点击代理服务器设置分组框上的“设置…”按钮会有什么响应的。   那再看看你若使用UIDesigner制作出来的效果:最终输出的是一个EXE可执行文件(见图二左上角),双击运行后就会出现一个与最终实现效果完全一致的窗体(见图二右)。另外,它还是一个具有响应动作的真实原型,例如你若点击了“设置…”按钮,那就会弹出一个新的窗体(见图三)。 图二、使用UIDesinger制作出来的原型 图三、点击“设置…”按钮后弹出的另一窗体   实际上,这个新弹出的窗体都是一个独立的原型,也是由UIDesigner制作出来的。由于它里面的控件同样可以设置下一步的响应动作,所以从总体上来看,众多原型就像一个树状结构,而其中的父节点就是图二中的设置窗体了。这种结构具有一个很大的好处:无论你完成了多个界面的原型,只需要它们之间有链接关系,最后输出的只是一个EXE可执行文件。这样,你可以很方便地与其它人员表达自己的设计思路,让沟通变得更加快捷。   接下来,我们看看这个原型是如何制作出来的。   第一步:建立空白窗体,调整它的大小、风格、标题和Icon 图四、使用UIDesigner制作原型—建立窗体   第二步:从工具箱中拖曳控件到窗体上,修改这些控件的属性(如Text等) 图五、使用UIDesigner制作原型—加入控件   由于UIDesigner具有自动对齐的功能,所以在拖动控件到窗体时就可以完成排版工作,不需要再逐个像素去调整。另外,不单单在加入控件到窗体时,在改变已存在于窗体内的控件的位置或者大小时,自动对齐功能一样会生效。这样,设计者在调整控件大小或者位置时(包括控件与控件,控件与窗体边缘等的距离等情况),工作变得很简单。 图六、使用UIDesigner制作原型—自动对齐功能   第三步:几分钟后,所有的控件都放到窗体并设置好属性了,如下图。 图七、使用UIDesigner制作原型—整体界面效果   此时,设计者就可以使用软件的导出图片或者导出原型功能分享你的设计成果了。当然,现在这种效果还只是一个没有响应动作效果的原型。接下来,我们再给“设置…”按钮加入响应动作。首先,选中“设置…”按钮,然后点击工具栏的“响应”按钮,你将会看到如图八的响应设置窗口。此时,你可以选择打开窗体、打开网页、弹出对话框、修改属性值和关闭本身窗体等五种效果,这里我们选择“打开窗体”,然后在弹出的对话框里指向弹出窗体的文件。最后,点击“完成”按钮即可。 图八、使用UIDesigner制作原型—设置控件的响应动作   到此为止,你就完成了一个与最终实现效果完全一致的高保真原型了。产品经理和开发人员等若想了解你的设计思想就不需要看着长长几页的说明文档了,而只需要运行你输出的原型文件,就可以对你的设计思路一目了然。   UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板库功能,让使用者可以方便地重用以前的设计资源;提供了32个Windows客户端软件常用控件,满足使用者的设计需求;提供了多个属性设置入口,分别实现最常用属性设置、一般属性设置和高级属性设置功能。当然,UIDesigner不是专用来设计QQ的,其它的Windows客户端产品都在它的工作范围之内。总的来说呢,使用UIDesigner来制作原型是很高效的,而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通,减少不必要的工作内耗。 ------------------------------------------------------------------ GUI_Design_Studio_3.5.94.0 在2008年,这款软件的作者从1,322位付费用户那获得了162,302美元的收入(其中仅12月份就有39,000美元),这令人鼓舞地证明了只要是提供真正价值的服务和软件,就能够创造很好的收入,即使在经济萧条的寒冬里。 GUI Design Studio是一款图形用户界面设计工具,您能用它在不需要编写任何代码或脚本的情况下快速地创建演示原型。使用标准元素绘制个人化的屏幕、窗口以及控件;将它们整合以展示操作工作流然后运行模拟程序测试您的设计。 当您需要绘制一款应用程序的外观或显示怎样将程序的各个部分连接起来时,您就可以使用GUI Design Studio来实现,如: 将产品创意文档化 制作项目提案 需求记录 创建屏幕图样 为开发人员制作详细的规格 为现有产品提出加强方案 以及更多其它用途 为用户以及股东甚至您自己制作展示文件以: 验证设计 找出替代项 评估多个使用场景 系统需求 Microsoft Windows Vista/XP/NT/2000 至少15MB的硬盘空间 推荐不少于256MB的内存 工程 将您的工作组织放到工程里。 每个工程都拥有它自己的文件夹结构。 可连接您计算机或网络上任何地方的其它库工程。 可连接到您计算机或网络上任何地方使您能够方便地获取图片以及其它文件。 创建您想要的并独立于所有工程的个人化设计文件。 创建能重复使用设计库以及工程之间的一致性。 将图片直接从剪贴板中粘贴到工程文件夹的文件中。 屏幕设计程序 可同时打开多个设计文档并能使用分页界面在文档间快速切换。 可使用标准Windows元素创建图形用户界面(GUI)屏幕,包括框架窗口、会话、菜单、工具栏、标签、按钮、复选框、单选按钮、滚动条、滑动调节框、微调框、组合框、树列表、列表框、编辑框以及静态文本等。 通过现有元素或其它自定义控件创建自定义控制组件。 在其它设计中创建将要使用的控件设计。 以常用的文件格式添加图标与图片。 从能够显示您将获得什么的控件面板中进行拖放操作。 属性编辑程序使您能将每个元素进行自定义。 元素的自动生成功能。 您能在任何地方放置任何元素。 Edge snapping能通过“点击”对屏幕元素进行统一记录。 设计网格向您提供了简单的制作具有一致性设计布局的方法。 只需单键点击就能排列元素组。 均衡地隔开元素组。 调整元素大小以适应其它元素或测量一组其它元素。 聚焦缩小以查看细节设计或聚焦放大以浏览设计概况。使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释。 为每个设计添加说明。 选择色彩主题以避免实际功能窗口的混淆。 图标 为图标面板提供快速的访问方式。 工程间可共享常用图标。 工程也能拥有它们独享的图标集。 使用将来在实际产品开发中可能用到的标准ICO文件。 包含的Icon Express编辑程序支持16色、256色以及最大尺寸为127 x 127的真彩图标。 如果愿意同样能整合任意其它的图标编辑应用程序。 展示与原型 在可导航元素(如按键与窗口)之间创建连接以显示控制流程。 为图象添加覆盖保护以及添加其它元素以创建可导航的热点。 支持形式化与非模态的窗口并支持显示、隐藏或微调窗口,以及窗口替换以实现切换效果。 锚点使您能对窗口进行准确定位。 能立即在模拟程序中测试或展示您的设计。 添加消息框以描述可能在真实应用程序中出现的功能。 可创建多种场景,如正常条件下的场景与多个出错场景。 选择要激活的场景或让模拟程序为您选择。 更改有效的屏幕分辨率以查看您的设计如何适应不同的屏幕大小。 在没有进行脚本或代码编写的情况下,所有操作都是以图形模式完成。 ------------------------------------------------------------------ Balsamiq_Mockups_1.8.4 1. 首先安装 AdobeAIRInstaller.exe 2. 安装主程序 MockupsForDesktop.air 3. 使用 keygen 进行注册 在Balsamiq Mockups中绘制界面原型,就像在纸张和白板上手工绘画一样方便快速,而且不用担心出错,因为你完全可以进行回复/重做。在Balsamiq Mockups中设计原型比在纸张和白板可有趣多了! 丰富的控件支持 Balsamiq Mockups预先提供了丰富的控件,如浏览器窗口、媒体播放器组件、圆形图表等,让你信手拈来! 丰富的控件 方便的属性设置 当你选择一个控件时,会立刻出现该控件的属性选项,你可以随时编辑修改属性。 属性设定 无限的恢复/重做,不用担心出错,你可以无限制的进行回复和重做。 开放,可移植的数据 Balsamiq Mockups所生成的数据是易于阅读的XML格式数据,你可以进行方便的移植和重用集成。 开放的数据 多种方式的集成应用,你可以将Balsamiq Mockups集成倒Confluence, Jira, XWiki中. 集成应用 Balsamiq Mockups是一款免费的带有手绘风格的原型设计软件,可以帮助你设计桌面应用软件,Web 2.0 站点, RIA富网络应用程序, Web站点和Web应用软件。 功能和亮点: 操作方面:拖拽,控件分组,甚至元素之间的对齐都做得很到位; 预制了六十多个界面元素,从简单的输入框,下拉框,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,其实比用白板都快; 界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字; 使用xml语言来记录和保存界面元素和布局,从而使其能够快速的导入到你所需的任何一个项目中,或其他工具中。 可以将设计导出成PNG格式的图片; 随着使用的熟练,快捷键便派上用场,超过一半的元素均有快捷方式,这更有助于原型的快速构造,几乎几分钟便可实现一个满意的而复杂的原型设计; 跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用; 不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效。 可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经理,工程师甚至客户那; 跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效;据作者说,现在这款软件的设计就是用它自己来设计的,经典的“吃自己的狗粮”,这也让我对其更有信心,因为它是开发者为开发者写的软件。 还有值得一提的是Balsamiq Mokups的在GetSatisfaction上的用户支持和服务,作者Peldi对问题报告,新需求的回应很积极和及时。而且根据这个讨论上看,到月底就会有一个专门用来分享界面控件设计的社区网站了,很期待。 再要说的一点是这款软件是要付费的,79美元(也可以免费,具体如何免费,请看网站上的说明),相对于它能节省下来的时间和提高的效率,是很值得的。Peldi说在2008年,这款软件就从1,322位付费用户那获得了162,302美元的收入(其中仅12月份就有39,000美元),这令人鼓舞地证明了只要是提供真正价值的服务和软件,就能够创造很好的收入,即使在经济萧条的寒冬里。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值