基于模板的跨平台可视化界面开发系统设计

刘 娜，奚 玲，岳春生

(信息工程大学 信息系统工程学院，河南 郑州 450001)



基于模板的跨平台可视化界面开发系统设计

刘 娜，奚 玲，岳春生

(信息工程大学 信息系统工程学院，河南 郑州 450001)

针对现有可视化界面开发工具的逻辑代码和界面的耦合性较高，可移植性较弱，可扩展性较低等一系列问题。提出了一种基于模板的跨平台可视化界面开发系统设计方案,该系统采用所见即所得的开发方式，生成能够免移植地运行在多种嵌入式环境中，并与逻辑代码无关的独立用户界面。经实验测试，该系统开发出的界面可以免移植的应用到不同嵌入式环境中。

模板；可视化；跨平台；图形用户界面；脚本解析引擎

用户界面是计算机系统的重要组成部分，直接关系到计算机系统的可用性和使用效率。文献[1]中指出：一个应用系统的成功与否在较大程度上取决于用户使用界面的感受好坏。据统计，用户界面的设计和开发在整个系统研制中所占的比重较大，约占40%～60%。因此，界面开发工具的便捷与否直接影响到用户界面开发的难易程度。早期的嵌入式界面开发模式是针对特定硬件环境开发的专用界面，开发出的界面不具有跨平台通用性、界面和逻辑代码紧密耦合。目前的嵌入式软硬件环境多种多样，设计一种适合嵌入式环境的跨平台通用的可视化界面开发工具，使其开发出的界面不依赖于特定的软硬件环境。对于实现界面和逻辑代码解耦、保证界面风格统一、提高界面开发效率等方面具有现实意义。QT[2]、Tilcon[3-6]提供了嵌入式环境下界面开发手段，但QT的系统资源消耗较大，Tilcon不提供多窗口编辑功能。而Windows[7]下的可视化界面开发工具无法适用于嵌入式环境中。

为适应嵌入式环境多样性、资源有限的运行条件，本文提出了一种基于模板的跨平台可视化[8-9]界面开发工具设计实现方案，以所见即所得[10]的开发方式，生成可以免移植的运行在不同嵌入式环境中、且与逻辑代码无关的独立用户界面。

1 总体设计方案

本文提出的系统分为两个部分，开发环境和运行环境，它们的关系如图1所示。开发环境提供可视化的开发工具，以所见即所得方式开发界面。运行环境采用基于适配层的体系结构，通过对开发环境生成的界面工程脚本的解析，使界面工程可在多种嵌入式操作环境中免移植的运行。

1.1 基于适配层的运行环境设计

基于适配层的跨平台界面运行环境采用分层抽象技术解决了用户界面在不同嵌入式运行环境中免移植运行问题。同时，适配层技术也使用户可以方便地扩展底层的硬件平台和操作系统。该运行环境的体系结构如图 2所示。

图1 总体设计图

图2 跨平台界面体系结构

硬件适配层[11-13]位于操作系统和设备驱动层之间，对与硬件相关的特性进行抽象、封装，封装为与硬件无关的统一设备访问接口，从而不论底层硬件环境如何变化，操作系统及上层软件只要硬件设备访问接口不变，操作系统和上层软件对硬件的访问不变。

中间件核心服务层包括操作系统适配层及建立操作系统适配层之上的各种核心服务中间件。操作系统适配层[11,13]提取不同操作系统通用的核心服务，形成一系列规范接口函数，从而屏蔽了不同操作系统之间接口上的差异。

应用支撑构件层[14]利用中间件核心服务层提供的接口函数，以构件方式提供和界面开发相关的资源管理、控件管理等功能。

脚本解析引擎位于应用支撑构件层上，对开发环境生成的界面工程脚本进行解析，并调用应用支撑层构件重现用户界面。

1.2 跨平台可视化开发环境设计

可视化开发环境的结构如图3所示，该系统包括工程管理模块、模板编辑器、资源编译器、界面编辑器和连接器等模块。

图3 可视化开发环境

可视化开发环境中的模板提供界面工程、界面以及各种连接关系规范描述的范本。模板分为输入模板和输出模板，输入模板为开发工具软件提供输入信息的规范记录方式，包括控件模板、系统命令模板控件属性模板等；输出模板则规定了界面开发工具输出的界面工程、界面以及各种连接关系的脚本文件的格式规范，主要包括工程脚本、界面脚本以及映射脚本。运行环境中的脚本解析器对符合输出模板要求的脚本文件进行解析，可在嵌入式环境中复原原始用户界面外观及调用关系。模板编辑器的作用在于编辑生成各种不同类型的模板，并实现对模板的管理。资源编译器提供编辑位图、字形、图标、光标等资源的功能；界面编辑器以拖、拽、组合等操作编辑生成独立界面，而且界面编辑器也输出界面脚本，界面脚本以规范格式记录窗口和控件的布局以及它们的静态属性信息；连接器是实现界面和逻辑代码松耦合的关键，它通过可视化方式让用户手工建立控件和控件、控件和应用函数以及界面和界面之间的调用关系和调用方式，并将其按照映射模板提供的规范格式记录在工程脚本中。由于工程中的各种连接关系并非通过代码实现，而是表现为脚本中的一条记录，因此实现了界面和代码之间的松耦合。工程管理模块对整个工程进行管理，按功能分为资源管理、界面管理、模板管理和连接管理4部分，4部分各司其职，管理界面工程中的不同模块。

2 界面工程模板设计

模板是一系列为了规范可视化开发工具的输入输出信息而设计的xml文档。输出模板规定了界面工程脚本文件的格式，在运行环境中为脚本解析器正确解析脚本提供了格式的保证。

输出脚本模板中包括有3种类型的规范：工程规范、界面规范和映射规范，其格式如表1所示。工程规范以树型结构记录界面窗口间从属关系的规范格式；界面规范提供描述窗口和控件的静态属性，如布局、外观、类型等信息的规范；映射规范则为记录连接器输出的调用关系和映射关系提供范本，映射关系是界面工程动态特性的描述，基于映射规范建立关系保证了可视化界面开发工具能够开发具有完整功能的用户界面工程，而不是仅能设计界面外观的工具。

表1 输出模板的格式

3 脚本及脚本解析引擎设计

脚本是按照界面工程模板提供格式规范记录的用户利用界面开发工具设计的界面工程的文本文件。脚本可以采用最通用的txt格式记录，也可以采用Python脚本文件形式。脚本解析是运行环境的重要环节，脚本解析引擎根据界面工程模板提供的规范，全面解析界面工程脚本，在嵌入式运行环境中实现界面外观的重建以及关系及映射的重建，最终完全再现用户通过开发工具建立的界面工程。脚本解析引擎在嵌入式运行环境中运行，因此采用适合嵌入式环境C语言编写或采用Python实现。Python实现的脚本解析器可以不需编译地直接解释执行，运行速度快，且其具有内建于语言本身的高级数据结构，缩短了开发时间和代码编写量，并可以与多种语言保持良好的兼容性和互操作性[15]。用Python做脚本解析可无缝的调用C模块程序，既运用了C的快速计算功能，也兼具了Python简单的流模式记录特性，是作为界面工程脚本的良好选择。文本文件对操作系统的适应性更强，增强了系统可移植性，扩展了脚本的适用范围，提高了可视化界面开发工具的稳定性，但是需要设置专门的文本格式和解析引擎。

4 可视化界面开发工具的实现

可视化界面开发工具是基于Visual Studio C#.NET4.5框架实现的，主要由界面设计窗口、工具箱、错误提示窗口、属性窗口、菜单栏、轮廓窗口和缩略图窗口组成。其组成结构图如图 4所示。

图4 可视化开发工具的主界面

(1)界面设计窗口。界面设计窗口是可视化开发环境的关键模块，由提供拖、拽、组合等可视化编辑方式的界面编辑窗口，及自动生成xml格式界面工程脚本文件的xaml窗口两部分组成。xaml窗口会随着界面编辑窗口的变化而自动更新界面工程脚本文件；

(2)属性窗口。属性窗口显示窗口和控件的属性信息，方便进行窗口和控件的属性配置；

(3)错误提示窗口。错误提示窗口提供运行界面时出现错误的提示信息；

(4)工具箱。工具箱提供编辑界面所需的控件，并且可扩展，用户也可根据需求添加自定义的控件；

(5)菜单栏。菜单栏对界面设计器的功能提供功能分组；

(6)轮廓窗口。轮廓窗口提供界面编辑窗口上控件的结构信息，并显示控件间的从属关系。

5 实测分析

为验证本文提出的可视化界面开发系统的有效性，在实际系统上进行了测试。用可视化开发工具编辑得到如图 5的测试界面，界面由按钮、编辑框和静态文本框组成。通过脚本解析引擎在WinCEARM环境下还原出如图 6的界面。

实测结果与实验预期结果相符，实现了逻辑代码和界面松耦合，印证了系统的可行性，即跨平台可视化界面开发系统开发出的界面，能够免移植的在不同嵌入式环境中运行。

图5 界面开发工具编辑的界面

图6 复原的界面

6 结束语

本文提出的基于模板的跨平台可视化界面开发工具的设计方案实现了代码和界面的解耦。用户只需解析保存好的界面工程脚本文件就可将界面应用到多种嵌入式环境中。这显著提高了开发效率，缩短了开发

周期，降低了开发成本。

[1] 江国星,陈坤,沈琼霞.基于事件—目标驱动的人机界面设计[J].单片机及嵌入式系统应用,2005(8):8-11.

[2] CSDN.Qt开发手册[EB/OL]. (2012-05-18)[2016-09-12]http://download.csdn.net/download/xiaotengyi2012/3560161.

[3] Tilcon公司.Tilcon evaluation guide[M].加拿大:Tilcon公司,2006.

[4] Tilcon公司.Tilcon white paper[M].加拿大:Tilcon公司,2006.

[5] 张士福.基于Tilcon的VxWorks图形界面开发技术[J].舰船电子对抗,2011(4):25-28.

[6] Wang Q,Zhu S,Li B,et al.A method on designing graphical interfaces of VxWorks based on Tilcon[J].Ordnance Industry Automation,2014(5):59-62.

[7] 侯俊杰.深入浅出 MFC[M].2版.武汉:华中科技大学出版社,2001.

[8] 董传刚,刘卫荣.可视化技术在雷达侦察信号分析中的应用[J].电子科技,2015, 28(7):15-17.

[9] 竺涌楠,方景龙.基于Web的生物通路图可视化与编辑工具的设计[J].电子科技,2015,28(10):83-85.

[10] 顾琪,岳春生.基于MVC模型的嵌入式GIS可视化集成开发环境研究[J].信息工程大学学报,2010,11(2):248-251.

[11] 王同合,岳春生,胡泽明.基于抽象层的嵌入式GIS跨平台体系结构设计[J]. 淮海工学院学报:自然科学版,2009(S1):31-32.

[12] 王彦刚,吕遵明,万留进.基于SCA规范的硬件抽象层应用程序接口分析[J].计算机应用,2014(S2):98-103.

[13] Shang Haizhong,Zhu Peiyan.OSAL-A new technology of supporting cross platform[J].Computer Engineering,2002,28(2):109-111.

[14] 卢青,岳春生.军用导航系统中通用嵌入式GIS应用构架研究[J].军事运筹与系统工程,2008,22(1):65-68.

[15] Davide A,Michele F,Roberto V,et al. Minerva and minepy: a C engine for the MINE suite and its R,pythonand Matlab wrappers[J].Bioinformatics,2013,29(3):407-408.

Design of Cross Platform Visual Interface Development System Based on Template

LIU Na，XI Ling，YUE Chunsheng

(School of Information System Engineering,Information Engineering University,Zhengzhou 450000,China)

In view of the problems that existing visual interface development tool are the logic code and interface are higher coupled, and little weaker in portability and lower extensibility .This paper presents a cross platform visual interface development tool based on template and introduces its key design technologies and system structure. The system uses the method of What You See Is What You Get generates the independent UI, which can free transplantable run on multiple embedded environment and separates from logical code. Through testing, UI, the system developed, can be free transplantable applied to multiple embedded environment.

template;visualization;cross platform;GUI; script parsing engine

2016- 10- 18

刘娜(1991-)，女，硕士研究生。研究方向：软件无线电。奚玲(1975-)，女，博士，副教授。研究方向：软件无线电。岳春生(1966-)，男，博士，教授。研究方向：软件无线电。

10.16180/j.cnki.issn1007-7820.2017.08.032

TP311.5

A

1007-7820(2017)08-117-04