（计算机应用技术专业论文）嵌入式图形界面自动生成技术研究.pdf

i 摘摘 要要 随着嵌入式系统在家电、娱乐、通讯等领域的广泛应用和硬件水平的不断提高， 嵌入式系统越来越需要一个美观的用户界面。用户界面的设计通常需要图形界面开 发工具的支持，一款稳定、高效的图形界面开发工具可以帮助用户更好、更快的开 发图形界面，提高开发效率。 在嵌入式图形系统 clearx 上开发了图形界面开发工具 developgui，它为用户提 供了良好的操作界面，实现了基于控件库 clearwidget 的界面可视化设计。把设计过 程中的操作简化为一系列小图标，每个图标对应含义一致的控件，用户只需要点击 图标就可以完成相应的功能，可以方便、直观的开发图形界面。 developgui 利用 xml 文档作为图形界面的中间表示形式，一方面可以解析 xml 文档生成图形界面，便于修改图形界面；另一方面便于生成应用程序代码。根据图 形界面特点设计合理、高效的文档对象树，然后利用 expat 解析器和 scew 提供的接 口函数生成文档对象树，最后设计一个文档对象树解析模块对文档对象树进行解析， 生成存储图形界面信息的 xml 文档。用户如果修改图形界面，对应的文档对象树也 会随之改变，生成最新的 xml 文档。 developgui 根据 clearx 的程序风格，设计一个代码生成器，其功能是把存储图 形界面信息的 xml 文档解析成应用程序代码。同时还自动生成应用程序的编译文 件，用户直接对应用程序编译就可以生成图形界面。 关键词：控件，可视化，文档对象树，代码自动生成 ii abstract with the extensive application of embedded system in the fields of home-electron, amusement, communication and the increasing improvement of hardware, a beautiful user interface is more needed in the embedded system than before. design user interface always need the support of graphic interface tool. a stable, efficient graphic interface development tool can help users to develop graphic interface better and quicker, and enhance the development efficiency. we develop a graphic interface development tool named developgui on the basis of embedded graphic system clearx. it provides a nicer operation interface, implement the interface visual design on the basis of widget library clearwidget. simplify the operation in design process as a series of icons, each icon correspond a widget with the same meaning, users only click the icon can finish the corresponding function, develop graphic interface in convient and intuitionistic. developgui use xml document as the middle-description of graphic interface,one hand can parse xml document to graphic interface, modify the graphic interface easily, on the other hand, can generate application program code easily. according to the feature of graphic interface，a reasonable and efficient dom tree is designed, then use expat parser and interface function provided by scew to generate a dom tree. at last design a dom tree analysis module to parse dom tree, generate xml document to store graphic interface information. if users modify the graphic interface, the corresponding dom tree will also be changed, generate the lateset xml document. developgui design a code generator on the basis of clearxs style. its function is to parse the xml document with storage of graphic interface information to application program code. it also automatic generate complier file of application program. users can directly complie the application program to generate graphic interface. key words：widget, visual, document object model tree, code atuo-generation 独创性声明独创性声明 本人声明所呈交的学位论文是我个人在导师指导下进行的研究工作及取得的研 究成果。尽我所知，除文中已经标明引用的内容外，本论文不包含任何其他个人或 集体已经发表或撰写过的研究成果。对本文的研究做出贡献的个人和集体，均已在 文中以明确方式标明。本人完全意识到，本声明的法律结果由本人承担。 学位论文作者签名： 日期： 年 月 日 学位论文版权使用授权书学位论文版权使用授权书 本学位论文作者完全了解学校有关保留、使用学位论文的规定，即：学校有权 保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。 本人授权华中科技大学可以将本学位论文的全部或部分内容编入有关数据库进行检 索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。 保密 ，在_年解密后适用本授权书。 不保密。 （请在以上方框内打“”） 学位论文作者签名： 指导教师签名： 日期： 年 月 日 日期： 年 月 日 本论文属于 1 1 绪论绪论 1.1 课题背景课题背景 嵌入式系统1是以应用为中心，以计算机技术为基础且软硬件均可裁剪，适用于 系统对功能、可靠性、成本、功耗严格要求的专用计算机系统。嵌入式系统一般要 求实时性，代码小，速度快，可靠性高。近年来，随着计算技术、通信技术的飞速 发展，特别是互联网的迅速普及2和 3c（计算机、通信、消费电子）合一的加速， 微型化和专业化成为发展的新趋势，嵌入式产品成为信息产业的主流。 随着嵌入式系统在家电、 娱乐、 通讯等领域的广泛应用3和硬件水平的不断提高， 嵌入式系统越来越需要一个外观漂亮、控件资源丰富、功能强大的图形系统4。嵌入 式系统对图形系统的基本要求5一般包括轻型、占用资源少、高性能、高可靠性和可 配置。从用户角度考虑，图形系统应该易于使用并且非常可靠，同时还需要有内存 意识，以便在内存受限的微型嵌入式设备上6可以无缝执行。现在 pda、娱乐消费 电子、 机顶盒、 dvd 等影音设备、 wap 手机7等高端电子产品得到了广泛应用， 这 一切都需要一个高性能、高可靠的 gui 图形系统的支持。 对于需要图形系统支持的机顶盒等信息家电产品而言， 一个美观且易于使用的用 户界面是非常重要的，它能够方便用户的使用，也能够在一定程度上左右用户对同 类产品的选择。目前存在两种开发用户界面的方式：纯语言式开发和图形界面可视 化开发。纯语言式开发存在着开发语言难于掌握、调试困难、开发周期长的缺点， 不便广泛应用。图形界面开发工具具备较大的优势：采用可裁减的控件库，可根据 实际开发需要进行调整，实现资源占有少、效率高；可以进行可视化开发，通过按 钮、窗口等图标方便、直观的开发图形界面8,9；能够保存图形界面，方面以后的使 用和修改。因此，开发一款稳定、高效的图形界面开发工具具有重要的现实意义。 1.2 国内外概况国内外概况 1.2.1 嵌入式图形系统的概况 1.2.1 嵌入式图形系统的概况 现 在 比 较 成 熟 的 嵌 入 式 图 形 系 统 有 国 外 的 microwindows 、 opengui 、 2 qt/embedded以及国内的minigui。 1. microwindows microwindows是一个开放源码的嵌入式gui软件， 目的是把图形视窗环境引入到 运行linux 的小型设备和平台上。 microwindows的体系结构是基于客户机/服务器的 10，并且采用分层设计11,12，可以通过改写不同的层以满足具体的要求13。在最底 层，屏幕和输入设备驱动程序(关于键盘或鼠标)与实际硬件交互；在中间层，可移 植的图形引擎提供对线的绘制、区域的填充、多边形的裁剪以及颜色模型的支持14； 在最上层，实现了可以用来开发图形应用程序的多种api函数。目前，micro windows 支持两种api函数15：microwindows api和nano-x api。与xlib实现不同，nano-x 仍在每个客户机上同步运行, 这意味着一旦发送了客户机请求包，服务器在为另一 个客户机提供服务之前一直等待，直到整个包都到达为止。这使服务器代码非常简 单，而运行的速度仍非常快。nano-x api采用的控件库16是tinywidgets，它具有结 构简单、遵循lgpl许可证等优点，但也有种种弊端，比如控件17不丰富和事件处理 机制不完善、不支持键盘事件进行焦点切换、控件的智能化程度低、组合控件内部 的协调比较差。 nano-x的内部结构18清晰、运行稳定高效、驱动层接口简单、移植 性很强，充分体现了嵌入式图形系统的优点。但是，nano-x 联网功能部件至今没有 经过适当地调整(特别是网络透明性)，提供的窗口处理19功能也不是很完善，同时 也还没有太多现成的应用程序可用。 2. opengui opengui在linux系统上已经存在了很长时间。opengui也分为3层，最底层是由 汇编编写的快速图形引擎；中间层提供了图形绘制 api，包括线条、矩形、圆弧等， 并且兼容于borland的bgi api；最高层用c+编写，提供了完整的gui集。opengui 提供了一个二维绘图原语、消息驱动的apl及bmp文件格式支持。opengui支持鼠 标和键盘的事件11，在linux上基于frame buffer或者svgalib实现绘图。由于其基 于汇编实现的内核并利用mmx指令进行了优化，opengui运行速度非常快20。也正 因为其内核是用汇编实现的，因此可移植性受到了影响。在驱动程序这一级上，性 能和可移植性是矛盾的，开发人员必须找一个折衷。 3. minigui minigui是由清华大学魏永明主持开发的，并由许多自由软件开发人员支持的一 个自由软件项目。minigui 体系结构是分层设计的，在最底层，图形抽象层(gal) 3 和输入抽象层21,22 (ial) 提供底层图形接口以及输入接口，如鼠标和键盘的驱动； 中间层是 minigui 的核心层，其中包括了窗口系统必不可少的各个模块；最顶层的 api 是提供给用户的编程接口。minigui 的主要特点有：遵循 gpl 条款23的纯自 由软件。提供了完备的多窗口机制，包括：多个单独线程中运行的多窗口；对话框 和与定义的控件类24 (按钮、编辑框、列表框、进度条等)。支持多字符集和多字体， 支持全拼和五笔等汉字输入法25；支持 bmp，gif，jpeg及pcx 等常见图像文件。 此外minigui 还具有小巧、可配置、移植性好等优点。可移植性好主要表现在：将 minigui 移植到其他基于不同硬件的嵌入式 linux 系统上， 只需实现新的 gal 和 ial 引擎，而不需要对minigui 的上层代码进行丝毫修改26。但是，minigui 还存 在诸多不足。譬如，它还缺乏开发应用程序的集成开发环境，以及一些必要的应用 程序。minigui 对图形设备的抽象层次太高，图形功能尚不完善，不支持opengl 的三维显示27，api没有封装，不便移植28。 1.2.2 嵌入式图形界面开发工具 1.2.2 嵌入式图形界面开发工具 1. fluid fluid 是一个简单又灵活的 gui 工具箱，它在 linux 世界中赢得越来越多的关注， 特别适合于占用资源很少的环境。 fluid 提供了 gui 工具箱中获得的大多数窗口控件 29，如按钮、对话框、滑动块、组合框、滚动条、树形列表、刻度盘等。fluid 可以 用来产生 fltk 的源代码，也能自动生成应用程序。fluid 大约占用 380k，非常小的 资源占用率使 fluid 在嵌入式开发世界非常受欢迎。fluid 的优点包括：fluid 提供了 一个 c+库30，面向对象模型的选择是一个良好的选择，因为大多数 gui 环境都是 面向对象的。这也使将编写的应用程序移植到类似的 api 中变得更容易。fluid 实现 了控件的可视化，提供了良好的用户界面，用户只需要点击控件窗口中的图标便可 以自动在窗口上生成所对应的控件，窗口控件还有一个属性窗口，可以方便的修改 控件的坐标值和大小以及其它的属性（名字、要不要边框等） 。其缺点是 fluid 的兼 容性不是特别的好，阻碍其在许多项目上的使用。 2. glade glade 是传统界面设计工具 gtk/gdk 的扩展， 能满足基于 gtk+库的图形用户界面 可视化开发的基本需求。它向用户提供可视化的界面设计环境，并以 xml 文件的格 式保存31图形界面。glade 提供了一个类库，在程序运行的时候，它可以通过读取 4 xml 文件32,33自动生成相应的图形界面，从而达到了程序代码逻辑与用户界面的完 全分离。可以把这些 xml 文件直接生成相应的 gtk+/gtkmm 代码，这种通过 xml 对界面进行描述34的特性极大地增强了程序的灵活性，对于比较小型的项目，这种 方法是比较适用的。glade 可以自动生成应用程序，并且它生成应用程序的模式使设 计界面与其它部分代码完全分开35，并且有可能做到在对界面进行改动后不必对应 用程序进行编译。这种分工开发的形式符合软件工程的要求，对 gui 软件的开发也 更方便。glade 虽然是用 c 语言编写的，但其使用了类和回调函数36的思想。glade 也有自己的 gtk图形库，它提供了构件(widget)，包括窗口、按钮、树、组合框等， 对用户透明。glade 为了对用户的操作作出反应，在 gui 设计中，需要调用消息和 回调函数。glade 的优点是：功能强大，拥有丰富的图形库，便于用户的实际开发。 但是 glade 的体积较大，占用的系统资源也较多，速度慢，效率较低37。 3. kylix kylix 是 borland 公司推出的 linux 环境下一款强大的可视化开发工具，被形象地 称为 linux 下的 delphi。kylix 具有最前沿的开发环境、集成的调试器、直观的、可 视化的设计界面、综合的组件套装、web 服务开发平台，是 linux 平台上快速、简单 地开发具有 web 服务功能的电子商务应用程序的工具。 kylix 具有众多先进特性： 面 向对象、数组边界检查、多线程、内嵌汇编等。该编译器将直接生成优化的本机代 码，而并非字节码，可以直接通过不同的选项对代码进行符合自己需要的优化，并 可通过集成的调试器对程序进行调试和除错。 kylix 是双向rad 工具， 界面(form) 的改变立即就会在代码(code)中反映出来。kylix 采用 win32 开发者熟悉的拖放方 式来设计所见即所得的用户界面， 它将极大地提高 linux 平台上 gui 应用程序的开发 效率。 kylix 支持 clx ，clx 开发库提供了一个综合的组件库，包含了 165 种以 上可重复使用的、可定制的和可扩展的组件，从而实现快速建立图形用户界面的应 用。 1.3 课题主要研究工作课题主要研究工作 通过对以上几种主要的嵌入式图形界面开发工具的介绍， 可以看出无论是功能强 大的 kylix 还是界面易于操作的 glade，都由于其本身的复杂、庞大等特点，不太适 合嵌入式环境。fluid 是一款轻型的适合嵌入式开发的图形开发工具，但是 fulid 的 兼容性比较差，在许多环境下都不太兼容，也限制了其应用。相比之下，glade 利用 5 xml 对图形界面进行存储，实用性较强。 本课题的主要研究工作就是借鉴 glade 和 fluid 的实现原理，在嵌入式图形系统 clearx 上开发出一款图形界面自动生成工具 developgui，具有以下特征：提供良好 的操作界面38，实现控件的所见即所得，利用 xml39存储图形界面信息，自动生成 应用程序代码40和编译文件41。本课题的具体研究工作包含以下几个方面： 1. 设计人性化的操作界面，在设计整个开发工具框架时，采用结构化的设计思 想，实现代码模块化，便于对用户界面进行修改和完善。 2. 应用界面的可视化设计，实现控件的所见即所得，用户通过形象化的图标可 以方便、直观的开发图形界面。 3. xml文档作为图形界面的中间表示形式， 用xml文档保存图形界面的数据。 一方面可以解析 xml 文档生成图形界面，便于修改图形界面；另一方面便于 生成应用程序代码。首先根据图形界面的特点设计合适的文档对象树，然后 根据 expat 解析器和 scew 提供的接口函数生成文档对象树，最后对文档对 象树解析，生成最终的 xml 文档。 4. 代码的自动生成，根据 clearx 图形系统的程序风格，构造一个代码生成器， 自动生成应用程序代码和编译文件。 6 2 图形界面开发工具的整体结构设计 图形界面开发工具的整体结构设计 clearx 借鉴了 x 的客户/服务器模式，服务器端采用层次结构设计，层次清晰， 代码简洁高效，客户端则封装了一套完整的控件库，极大方便了图形界面的可视化 开发。本章首先介绍图形界面开发工具 developgui 的设计思想，然后阐述 clearx 的整体结构和控件层的设计，最后介绍 developgui 的整体结构设计。 2.1 设计思想设计思想 developgui 是在嵌入式图形系统 clearx 上开发的，clearx 的优点在于：轻型、 占用资源少；高性能、高可靠；跨平台、可配置。clearx 已经被成功地应用在武汉 精伦电子的新一代身份证读卡器、视频监控等许多项目中，并且运行稳定。 鉴于 c 语言编写的代码执行效率高，便于移植，并且 clearx 图形系统可运行在 linux 操作系统下，linux 操作系统为 c 语言的开发提供了一套完整的编辑、编译和 调试工具等特点，图形界面开发工具选用 c 语言作为开发语言。 developgui 是一款图形界面可视化开发工具，它需要为用户提供一个良好的人 机交互界面，使用户可以直观、方便的使用该开发工具。用户界面选用 clearx 和其 控件库 clearwidget 开发，clearwidget 提供了丰富的控件资源和用户回调函数机制， 实现了数字拼音输入法，用它们编写用户界面十分方便。 在功能上，developgui 实现了应用界面的可视化设计、图形界面的中间表示、 代码的自动生成。应用界面可视化设计是把开发过程所进行的编辑、运行、控件生 成等操作简化为一系列小图标(操作按钮)，每个图标都有与其命令含义一致的控件， 用户只需要点击图标就可以完成相应的功能。图形界面的信息用 xml 文档保存， xml 具有可扩展性，用户可以随意定义适合自己的数据属性和标签，描述那些具有 逻辑结构和丰富语义的数据，也可以清晰地描述出数据元素间的层次结构与先后顺 序，选用 xml 文档可以高效、直观的保存图形界面的数据，便于还原图形界面和生 成应用程序代码。设计一个代码生成器，对保存图形界面数据的 xml 文档解析，生 成符合 clearx 风格的应用程序代码。 在 developgui 中，在图形界面开发完成以后，根据图形界面的风格，设计合理 的文档对象树结构，调用接口函数生成文档对象树，并对文档对象树进行解析，生 7 成 xml 文档，最后设计代码生成器，根据代码生成器生成应用程序代码，并自动应 用程序的编译文件，用户只需要执行 make 指令，就可以对应用程序进行编译，还原 图形界面。用户可以通过修改文档对象树或 xml 文档对图形界面进行修改，也可以 通过对应用程序代码编辑和修改实现对图形界面的修改。 developgui 的总体设计目标如下： 1、实现图形界面的自动生成，提供良好的操作界面，集成化程序设计界面。 2、占用资源少、效率高，所依赖的库函数只有 xlib，可以方便的进行移植。 3、实现可视化编程，所见即所得。模块化开发，层次分明，容易扩展。 4、控件内容丰富，操作简单。支持 x 协议，便于嵌入式开发。同时提供学习和 帮助系统。 2.2 clearx 整体结构整体结构 clearx 是一款基于 linux 的嵌入式图形系统，具备以下特征： 1. 支持 x 核心协议中的绝大多数函数接口，许多基于 x 的应用程序都可以直接 运行在 clearx 上。 2. 服务器采用模块化思想，可以随意增减功能模块，实现了透明窗口方式和普 通帧缓存方式的无缝组合。 3. 以模块的方式内置中英文点阵字库，也可以通过 freetype 函数库支持多种外 部字库的显示。 支持中英文 （gb2312 和 iso-8859-1） 混合编码和 unicode （utf-8）编码。 4. 支持多种图片格式，包括具有 alpha 通道和透明色的 png 图片格式，服务器 支持多进程，客户端支持多线程。 5. 具有较强的移植性，可以在四种硬件平台（x86, arm, adsp-bf533, mips） 上的 linux 环境中运行， 可以通过 sdl 多媒体库移植到 windows 平台上运 行。 clearx的整体结构如图2.1所示。 8 图 2.1 clearx 整体结构 1、驱动层 驱动层直接作用于底层硬件，它包括鼠标、键盘和显示驱动。鼠标驱动的作用 是获得光标位置信息和鼠标按键状态，然后返回给上层；键盘驱动用于获取键盘的 键值和按键状态；显示驱动则负责将图形系统的显示内容输出到显示设备中。驱动 层是可以配置的。clearx 提供了基于 sdl、帧缓冲（framebuffer）和 x11 的三种驱 动，用户还可以编写自己的驱动，然后修改相关的配置文件，重新编译即可。 2、引擎层 引擎层提供完善和丰富的图形显示功能，包括画点、画线、画矩形、绘制图像、 字体等，以及全面灵活的窗口管理机制，包括窗口的创建、窗口显示、窗口隐藏、 窗口移动及窗口销毁等等。引擎层主要的功能就是利用驱动层提供的接口对窗口层 提供透明的服务，它是窗口层和驱动层的桥梁。 3、窗口层 窗口层利用引擎层所提供的功能实现了一个完整的窗口系统。窗口层负责客户/ 服务器模式的事件管理，窗口管理器的活动（如窗口的创建和销毁） ，窗口的显示、 隐藏和移动，窗口暴露和绘制，绘图环境的管理等。它对引擎层中的对屏幕的操作 和在屏幕上绘图的操作进行了基本的封装，增加了一套完善的发送、接收事件消息 的机制。 4、控件库 9 控件是用户可与之交互以输入或操作数据的对象， 它是专门为方便编写图形用户 界面而设计的实现某种特定功能的窗口小部件。clearx 的控件库 clearwidget 借鉴 tinywidgets 的基本框架，内部结构重新实现。clearwidget 提供了丰富的控件资源， 它提供了窗口、按钮、复选按钮、单选按钮、单行文本框、列表框、复合框、滚动 条、滑动块、多列列表、树形结构、多行文本框、弹出式菜单、菜单栏、增值框等 控件。为了使文本编辑框等可输入控件具有汉字输入的功能，clearwidget 还实现了 适合在嵌入式设备环境中使用的数字拼音输入法。 clearwidget 从逻辑上把控件分为显示和事件两部分，在显示方面，控件可以由 一个个的小显示单元组成，设置一个显示单元模块来实现各种效果的显示单元，从 而可以实现各种显示效果的控件。在事件方面就由事件模块来负责对各种控件事件 的响应。在编写显示模块时只需要考虑外观的绘制，而不用考虑事件的影响。同理， 处理事件时只需要调用显示模块的函数接口改变控件的外观，而不用去考虑实现细 节。控件结构中用一个结构指针指向存储在显示模块中对应的显示块，此外还包括 关于事件处理的属性和函数。控件的事件处理主要负责：删除控件，鼠标事件、焦 点组的切换、热键处理和键盘事件处理。每种控件都具有一些共同的属性和行为， 比如都具有父控件、长、宽、起始点坐标等属性以及移动和显示等操作，因此采用 控件类的思想，把这些公共属性和操作抽象出来，封装到控件类中。对于各个控件 的私有属性，则通过在控件类的最后加上一个指针指向各个控件的特有结构。控件 类的结构如下表示： struct widget /控件的公共属性和行为 控件的名字，用来查找控件的风格； 控件类型标志； 指向主显示单元的指针； 指向父控件的指针； 无符号整型的控件标志，用于表示该控件是否显示等标志； 控件的事件回调函数指针数组； 控件的私有数据； 控件的标题字符串指针； 控件的当前值、坐标、宽、高等； 10 控件销毁的函数指针； 控件事件处理的函数指针； 控件显示或隐藏的函数指针； 设置控件焦点的函数指针； 设置控件标题的函数指针； 设置控件值的函数指针 ； int wspec0 ；/指向每种控件特有结构的指针 ； 2.3 developgui 的模块结构设计 的模块结构设计 我们在嵌入式图形系统 clearx 上开发了一款图形界面自动生成工具 developgui。其模块结构图如图 2.2 所示。 用户 服务接口 expat解析代码生成器 编译运行 可视化开发模 块 基于xml界面 表示模块 代码自动生成 模块 图形界面xml文档应用程序代码 图 2.2 developgui 模块结构图 developgui 用 xml 文档保存图形界面信息，自动生成应用程序代码，使用户 不再需要关心如控件的坐标定位等纷繁复杂的操作，实现所见即所得，从而简化了 编程过程，缩短了开发时间，大大提高了开发效率，使用户编程变得简洁方便。其 友好的开发界面和帮助系统也能让用户编程得心应手。主要包括以下三个功能模块： 1可视化开发模块。首先提供良好的用户操作界面，利用可视化技术增强 developgui 界面的友好性、交互性，使其具有形象化的特征，便于用户操作和使用。 实现了控件的所见即所得，用户可以通过形象的图标、按钮，方便、直观的进行操 11 作和使用，从而建立起该工具和用户之间的联系。图标的风格设计也有一套标准的 规则，有统一的构图布局、色调、图片风格等，字体也要采用统一的标准，这样可 以更好的实现人机交互。其次，clearwidget 提供的控件有统一的外观，一套完整、 灵活的风格变换机制，完备的属性(坐标，名字，颜色，图片等)和事件回调机制。还 有丰富的控件操作函数，满足我们的开发需要。用户创建的控件都是真实的控件， 而不是一张图片，这样我们可以充分的利用控件里面的操作函数和回调机制，用户 创建和操作控件的所有信息均保存在控件中。 2 基于 xml 的图形界面表示模块。图形界面生成后，其信息保存到 xml 项 目文件中， 将每个控件和其基本信息(包括公共属性和私有属性， 注册的回调事件等) 都作为元素保存到 xml 项目文件中。xml 文件生成过程如下：首先，根据图形界 面的特点设计合理的文档对象树结构，然后，利用内嵌的 scew 接口函数和 expat 解 析器在内存中生成对应文档对象树，最后对文档对象树进行解析，生成 xml 文档。 3 代码自动生成模块。利用 scew 接口函数和 expat 解析器编写一个代码生成 器，用来读取和解析 xml 项目文件中的信息，生成符合 clearx 风格的应用程序代 码。同时还提供了自动生成 makefile 文件功能，为用户提供方便。 2.4 本章小结本章小结 本章首先描述了图形界面开发工具 developgui 的设计思想、clearx 图形系统的 整体结构和控件库 clearwidget 的结构。最后介绍了 developgui 的三个主体结构模 块。 12 3 图形界面可视化开发 图形界面可视化开发 现有的可视化开发工具一般都包括两个重要功能：一是提供良好的人机交互界 面，二是实现应用界面的可视化设计。本章主要从这两方面介绍图形界面开发工具 developgui。 3.1 developgui 操作界面操作界面 developgui 的界面由三个窗口组成，分别是：主体窗口(mainwindow)，控件窗 口(widgetwindow)，代码窗口(codewindow)。 mainwindow 作为主体界面，分成三个模块：一个是工具栏，由 clearwidget 中 的菜单栏和弹出式菜单控件生成，每个弹出式菜单都注册了回调函数，实现一定的 功能，满足用户的可视化开发需求。第二个是属性窗口，这个窗口主要显示获得焦 点的控件的属性值(名字、坐标值、宽、高等)和回调函数。第三个是树形控件 (widgetree)，该树形控件根据 developgui 的需要特别定制，用来显示用户在开发图 形界面过程中所调用控件的关系。由于所有的控件都是在窗口控件中显示，所以树 形控件的根结点一定是窗口控件。其余的控件按创建时间的先后顺序依次为兄弟或 孩子结点。树形控件的节点可以是文档内容等，每个节点一般由一个文本和图片共 同组成。树内的节点是有层次的，每个节点都可以有子节点和兄弟节点，单击某个 节点可以扩展或收缩其子节点。节点是树型控件的操作单元，节点的结构定义为： struct tree_node struct tree_node *parent, *children, *siblings; int id, if_expand, if_show; pixmap open, close; tn_vc *expand, *item, *downline; int user_data; ; 其中 parent，children，siblings 分别代表该节点的父节点，孩子节点和兄弟节点， 这样可以使所有节点组成一个节点链表，便于对节点进行操作。一个 id 对应一个节 点，每个节点都有一个唯一的 id 标志号。if_expand 表示是否有子节点, if_show 表 13 示该节点是否显示。 open 和 close 分别表示该节点的孩子节点展开和收缩时该节点所 显示的 pixmap。expand，item，downline 三个显示单元分别用于显示该节点是否有 子节点，该节点的正文和该节点与其子节点的连接线。user_data 是留给用户使用的 用户数据。树形控件也有自己的私有属性，其私有属性如下所示： typedef struct tn_widget *scrollbar_h, *scrollbar_v; tn_vc *virtual_vc; int cur_x, cur_y; int next_id; struct tree_node * root, *selected; tn_struct_treelist; 其中 scrollbar_h，scrollbar_v 分别指向水平和垂直滚动条，virtual_vc 指向整个显 示内容的显示单元。cur_x，cur_y 表示显示单元在显示窗口中的相对坐标，next_id 表示后一个节点的 id 号， root、selected 分别指向根节点和当前被选中的节点。 当用户创建了一个树型控件后， 用户需要调用 tntreelistsetroot 函数接口来设置 根节点， 有了根节点才可以在该控件上通过tntreelistaddnode函数接口来添加节点。 为了灵活方便地使用树型控，clearwidget 还提供了 tntreelistgetexpand 来判断一个 节点是否展开，tntreelistsetuserdata 和 tntreelistgetuserdata 来设置和得到用户数 据 ， tntreelistdeletenode来 删 除 一 个 节 点 ， tntreelistgetnodetext和 tntreelistsetnodetext 来得到和设置一个节点的文本内容，tntreelistgetparentnode 来得到一个非根节点的父节点， tntreelistgetsiblingnode 和 tntreelistfindchildnode 来得到一个节点的兄弟节点和孩子节点。主体界面如图 3.1 所示。 14 图 3.1 mainwidget 主体界面 控件窗口(widgetwindow)由窗口、按钮、复选按钮、单选按钮、单行文本框、列 表框、滑动块、多列列表、树形结构、多行文本框、弹出式菜单、菜单栏、增值框 控件图标组成，用户在实际编程时，只需要点击对应的控件图标，就会自动生成控 件。widgetwindow 如图 3.2 所示。 图 3.2 widgetwindow 界面 代码窗口(codewindow)生成时，自动内嵌一个多文本框控件，用来显示用户开 发的图形界面的代码。用户点击控件后，在 mainwindow 的树形控件中会显示一个 对应的节点，该节点有一个 user_data，它链接着对应的控件，通过对树型控件的解 析，可以获得图形界面的主要代码信息。然后在 codewindow 中显示出来。代码窗 15 口中设置两个功能按钮， 一个是atuorefresh按钮,实现代码的自动更新。 一个是close 按钮，功能是关闭代码窗口。 代码窗口显示代码有两种方法：一是在解析 xml 文档产生应用程序代码后，把 代码显示到 codewindow 窗口上，这种方法简单有效，但是不能保证实时性，只能 在应用程序代码生成以后才能在代码窗口上显示出来。 二是通过 developgui 提供的 树形控件来实现，树形控件的子节点可以链接对应的控件，通过遍历树形控件可以 获得所有控件的基本信息，然后解析控件的基本信息，生成主体代码，这种方法可 以实时显示图形界面的数据。因此，我们采用第二种方法实时显示图形界面的数据， 便于用户查看。 树形控件节点的 user_data 是用户数据，在用户创建完创建控件和树形控件的节 点后，调用 tntreelistsetuserdata()函数把节点的 user_data 和控件作映射，由此可以 根据树形控件获取全部控件的信息。定义了结构体 tinywidget 来存储控件的属性， tinywidget 结构体为： struct tinywdget int type; /控件类型 int x,y,w,h; /控件坐标值、宽、高 tn_widget *parentwidget; /父亲控件 char *name; /控件内容 char info150; /控件属性 struct tinywdget *child; /孩子控件 struct tinywdget *sibling; /兄弟控件 ; 树形控件的解析模块的伪代码如下： 设置标志位 flag = 1； 创建一个 tinywidget 指针结构体； 获得根节点的节点号(window_id)； 映射根节点的控件； 把控件的属性存储到 tinywidget 中； 16 创建一个 tinywidget 指针结构体； 由根节点取得第一个孩子的节点号(first_id)； 映射该节点的控件； 把控件的属性存储到 tinywidget 中； do 创建一个 tinywidget 指针结构体； 由 first_id 获得兄弟节点号 temp_id； 映射 temp_id 节点的控件； 把控件的属性存储到 tinywidget 中； while(temp_id!= -1) 解析 window_id 节点对应的控件； while(节点的 tinywidget 存在) 解析节点对应的 tinywidget； 获得 tinywidget 的兄弟； if(标志位 = 0) 重新载入树形控件的解析模块； 解析tinywidget结构体的方法和第五章中的解析parserwidget结构体的方法类似， 把控件的信息转换成嵌入式图形系统 clearx 可识别的代码，在 codewindow 窗口的 多文本框上显示出来。标志位 flag 为全局变量，但图形界面被修改时，flag 自动设置 为 0，此时重新解析树形控件，获得最新的图形界面对应的应用程序代码并在代码窗 口上显示出来。 3.2 界面可视化设计界面可视化设计 developgui 实现了控件的所见即所得，用户点击控件窗口上的控件图标，就会 自动生成对应的控件。由于只有窗口控件是容器控件，因此首先要生成一个窗口作 为父亲窗口，然后在该窗口上进行图形界面开发。借助于 developgui 开发的一个图 17 形界面如图 3.3 所示。 图 3.3 图形界面 界面可视化设计主要包括以下几个模块：控件生成、控件拖动、控件大小变化、 控件背景和图片设置、控件名字设置、控件焦点设置、控件注册事件。这些模块在 实现时， 需要调用 clearx 的事件处理机制， 因此首先介绍一下控件的事件处理机制： clearx 采用消息队列机制处理事件，即事件产生后，系统相应的用一个消息记 录产生的事件，保证了事件的完整性和次序性。在 clearwidget 中，当收到服务器的 一个消息时，我们习惯的称为事件。clearwidget 控件事件的类型主要有： 1. 键盘松开（tn_event_key_up） ； 2. 键盘按下（tn_event_key_down） ； 3. 得到焦点（tn_event_focus_in） ； 4. 失去焦点（tn_event_focus_out） ； 5. 鼠标进入（tn_event_mouse_enter） ； 6. 鼠标离开（tn_event_mouse_leave） ； 7. 鼠标移动（tn_event_mouse_position） ； 18 8. 鼠标按下（tn_event_button_down） ； 9. 鼠标松开（tn_event_button_up） ； 10. 鼠标双击（tn_event_button_double_down） ； 11. 未知事件（tn_event_unknown）。 未知事件是让用户专门自己定义的事件。 3.2.1 控件生成控件生成 控件生成即控件的所见即所得，用户点击图标，生成对应的控件。通过在控件的 边框上画控制窗口对控件进行控制，控制窗口由两部分组成，一部分包括左上、左 下、右上、右下、左中、上中、下中、右中八个小窗口，这八个小窗口都是正方形， 以蓝色作为背景色，边长设为 6，便于用户的使用。另一部分包括上、下、左、右四 个长方形窗口。左上、左下、右上、右下、上、下、左、右八个窗口和控件拥有同 一个父亲窗口，左中、上中、下中、右中分别是在上、下、左、右四个窗口控件上 创建的。左上、左下、右上、右下、左中、上中、下中、右中实现对控件的大小的 改变，上、下、左、右实现对控件的拖动。用户点击控件图标时，注册一个回调函 数 tnregistercallback (tn_widget * widget, user_event uevent, callbackfuncptr fp, data_pointer dptr)； widget 是控件窗口中的图标对应的控件，uevent 是注册的事件类型，此时设为 clicked 事件， fp 是当 clicked 事件发生时调用的函数， dptr 是对应控件的类型， 只有当控件类型匹配时，才能正确的调用回调函数，比如点击按钮控件时，dptr 应该 设为 tn_button。回调函数 fp 设为 choosewidget()。choosewidget 的功能是判断 控件的类型，如果是窗口控件，调用函数 tn_widget * createwidget(tn_widget * parent_widget, int x, int y, int w, int h, int topwin)； 如果不是窗口控件，则返回 0。createwidget 返回值是控件，topwin 作为判断标 志，如果 topwin 等于 1，创建窗口控件；如果非 1，创建其它类型控件。控件创建后，