基于数据驱动的GUI设计与实现

汪婵 付勇智

摘 要：软件开发中需求变化是经常发生的，而且对开发成本影响很大，需求中变化最频繁的就是界面，文章提出用数据驱动技术，利用来数据结构描述界面，解决GUI界面频繁变化的问题，取得较好的实践效果。

关键词：数据驱动；GUI界面；面向对象技术

中图分类号：TP311.5 文献标志码：A 文章编号：2095-2945（2018）18-0079-02

Abstract： In software development， requirement changes occur frequently and have a great impact on the development cost. The interface is the most frequent change in the requirement. This paper proposes to use data-driven technology to describe the interface by using the data structure. The problem of frequent change of GUI interface is solved and good practical results are obtained.

Keywords： data-driven； GUI interface； object-oriented technology

引言

計算机产品的根本目的是为人们的工作与生活提供服务的，为了使计算机产品更好的服务于人们的工作和生活，计算机产品的操作界面即用户接口从最初的命令行接口一路走来，发展到图形用户接口，而且工程师正在努力提高用户接口的智能化。近年来计算机产品的开发工程师更是把产品的用户体验效果作为产品设计开发的主要质量目标，使得人们对计算机产品的操作和功能的理解越来越简单了。

许多公司与学者都在研究基于数据驱动的GUI设计与实现，基于数据驱动的移动前端的框架有AngularJs 2.0、vue.js等，研究数据驱动编程的学者：周学海、李为民等研究的数据驱动与软件设计；苏晓华研究的数据驱动与计算；毕卓、徐云川、王镇等研究的数据驱动与处理器设计。

1 GUI的基本构成

GUI用窗口作为容器，用图标、按钮、菜单表示不同目的的动作接口，用文本框及列表显示输入输出的内容，用户键盘和鼠标及指点设备进行定位与选择，用键盘进行输入。最著名例子就是由苹果公司在麦金塔所创的图形用户界面。

从集合的角度看，GUI是一个窗口容器，它是由各种图形元素（组件实例）组合构成：

GUI={x|子窗口，图标，按钮，菜单，文本框，列表，面板等组件}。

这些组件在界面上是按树形结构呈现的如图1所示。

从图1可以看出，GUI是以窗口作为容器进行嵌套组成层次图形元素树。每个图形元素都是一个组件实例，因此图形元素除了形状之外还应该有属性和方法，属性定义图形元素的位置与外观，方法规定图形元素的行为（功能）。图形元素与属性集和方法集之间的关系如下：

图形元素={x|位置属性，外观属性，鼠标事件响应方法，键盘事件响应方法，属性值修改方法}。

鼠标事件响应方法、键盘事件响应方法负责约定用户行为及响应方式，根据用户行为和后台消息请求修改图形元素的属性值，图形元素的属性及鼠标键盘事件响应方法都是编码时确定的，这样就可以使用数据结构来描述图形元素，用一种键值对表示属性与属性值、事件名与方法名，为了区别属性与事件还需要定义不同的标志，这样特性的数据结构现在一般用xml或json形式来描述。

2 数据驱动GUI设计

由图1可以看出，GUI都是由一些标准图形元素组成，如果能够用某种数据结构把图形元素描述出来，就可以把GUI用数据结构进行描述。然后就可以在后台程序根据不同的功能产生相应描述GUI的数据结构，传送到前台用程序进行解析，就能显示出来了，这样在需求变化时就不需要重写GUI了。

Jquery代码如下：

$（function（）{

var btn=$（""）；

$（"body"）.append（btn）；

addBtnEvent（"testBtn"）；//绑定事件响应函数

$（"#testBtn"）.attr（"disabled"，true）；

}）；

function addBtnEvent（id）{//定义事件响应函数

$（"#"+id）.bind（"click"，function（）{

alert（"Test"）；

}）；

}

Java代码如下：

JButton testbnt = new JButton（"testbnt "）；

testbnt.addActionListener（new ActionListener（） {

@Override

public void actionPerformed（ActionEvent e） {

method_testbnt（）；

}

}）；

public static void method_testbnt（）{

//方法代码

}

组成GUI的组件可以分成三个相关的集合：组件类型集、属性集、事件响应方法集。而事件又可分为鼠标事件、键盘事件，不同用户可能要求对同样的事件做出不同的响应。如图2所示。

数据驱动GUI设计的本质就是以数据为中心，用数据封装变化，用数据结构描述GUI界面，GUI界面外观完全依赖数据，GUI的代码只负责解析数据，利用自动生成技术，生成相应的图形元素完成可视化。

一个实例：这是一个信息系统的GUI界面，其中有些是必填的，有些是可选，有些直接输入，有些是要查表选择的，这个界面是非常常见的GUI界面，如图3所示。

图3对应的数据结构，按json标准描述如下。

{"control"：{"PartID"："部品编号，string，50"，"PartName"："部件名称，string，50"，"PartCode"："部品件号，string，20"，"AutoStyling"："车型，@table"，"PartUnit"："单位，string，5"，"DCAmount"："单车用量，double，2"，"InboundContainer"："入库包装，@table"，"InboundPackageAmount"："每包数量，int，0"，"OutboundContainer"："盛具，@table"，"OutboundPackageAmount"："每包数量，int，0"，"Disabled"："是否在装，bool，0"，"PinyinAbb"："名称简称，string，20"，"PartCategory"："部品类别，@table"，"PartPicture"："部品图片，byte，0"，"PartBaseInfoRemark"："备注，int，0"，"PSAddress1"："送装地址1，string，50"，"PSAddress2"："送装地址2，string ，50"，"PSAddress3"："送装地址3，string，50"}，"mustwrite"：["PartName"，"PartCode"，"AutoStyling"，"PartUnit"，"DCAmount"，"InboundContainer"，"InboundPackageAm

ount"，"OutboundContainer"，"OutboundPackageAmount"，"Pa

rtCategory"]，"unique"：["PartCode"，"PartName"]，"datas"：[]}

3 結束语

在所有讲授面向对象技术的教材中都会说世界是由对象组成，所以软件开发才需要面向对象技术，面向对象技术是采用事件消息机制来改变对象的状态。把GUI界面看成一个对象，界面外观布局就是通过后台发给的数据（消息），通过对象自身的行为改变的。

参考文献：

[1]李为民.软件开发中的数据驱动设计思想[J].电脑编程技巧与维护，2012（24）：14-15.

[2]陈广山.基于WPF的UI设计模式研究[J].鸡西大学学报，2016（08）：32-35.

[3]毕卓，徐云川，王镇.采用数据驱动机制的多核处理器[J].上海交通大学学报，2013（01）：81-85.

[4]苏晓华.数据驱动计算及其应用[J].世界电子元器件，2008（03）：82-84.

[5]周学海，罗赛，王峰，等.一种数据驱动的可重构计算统一编程模型[J].电子学报，2007（11）：2123-2128.