基于數(shù)據(jù)驅(qū)動(dòng)的GUI設(shè)計(jì)與實(shí)現(xiàn)

汪嬋 付勇智

摘 要：軟件開發(fā)中需求變化是經(jīng)常發(fā)生的，而且對(duì)開發(fā)成本影響很大，需求中變化最頻繁的就是界面，文章提出用數(shù)據(jù)驅(qū)動(dòng)技術(shù)，利用來數(shù)據(jù)結(jié)構(gòu)描述界面，解決GUI界面頻繁變化的問題，取得較好的實(shí)踐效果。

關(guān)鍵詞：數(shù)據(jù)驅(qū)動(dòng)；GUI界面；面向?qū)ο蠹夹g(shù)

中圖分類號(hào)：TP311.5 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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

引言

計(jì)算機(jī)產(chǎn)品的根本目的是為人們的工作與生活提供服務(wù)的，為了使計(jì)算機(jī)產(chǎn)品更好的服務(wù)于人們的工作和生活，計(jì)算機(jī)產(chǎn)品的操作界面即用戶接口從最初的命令行接口一路走來，發(fā)展到圖形用戶接口，而且工程師正在努力提高用戶接口的智能化。近年來計(jì)算機(jī)產(chǎn)品的開發(fā)工程師更是把產(chǎn)品的用戶體驗(yàn)效果作為產(chǎn)品設(shè)計(jì)開發(fā)的主要質(zhì)量目標(biāo)，使得人們對(duì)計(jì)算機(jī)產(chǎn)品的操作和功能的理解越來越簡單了。

許多公司與學(xué)者都在研究基于數(shù)據(jù)驅(qū)動(dòng)的GUI設(shè)計(jì)與實(shí)現(xiàn)，基于數(shù)據(jù)驅(qū)動(dòng)的移動(dòng)前端的框架有AngularJs 2.0、vue.js等，研究數(shù)據(jù)驅(qū)動(dòng)編程的學(xué)者：周學(xué)海、李為民等研究的數(shù)據(jù)驅(qū)動(dòng)與軟件設(shè)計(jì)；蘇曉華研究的數(shù)據(jù)驅(qū)動(dòng)與計(jì)算；畢卓、徐云川、王鎮(zhèn)等研究的數(shù)據(jù)驅(qū)動(dòng)與處理器設(shè)計(jì)。

1 GUI的基本構(gòu)成

GUI用窗口作為容器，用圖標(biāo)、按鈕、菜單表示不同目的的動(dòng)作接口，用文本框及列表顯示輸入輸出的內(nèi)容，用戶鍵盤和鼠標(biāo)及指點(diǎn)設(shè)備進(jìn)行定位與選擇，用鍵盤進(jìn)行輸入。最著名例子就是由蘋果公司在麥金塔所創(chuàng)的圖形用戶界面。

從集合的角度看，GUI是一個(gè)窗口容器，它是由各種圖形元素（組件實(shí)例）組合構(gòu)成：

GUI={x|子窗口，圖標(biāo)，按鈕，菜單，文本框，列表，面板等組件}。

這些組件在界面上是按樹形結(jié)構(gòu)呈現(xiàn)的如圖1所示。

從圖1可以看出，GUI是以窗口作為容器進(jìn)行嵌套組成層次圖形元素樹。每個(gè)圖形元素都是一個(gè)組件實(shí)例，因此圖形元素除了形狀之外還應(yīng)該有屬性和方法，屬性定義圖形元素的位置與外觀，方法規(guī)定圖形元素的行為（功能）。圖形元素與屬性集和方法集之間的關(guān)系如下：

圖形元素={x|位置屬性，外觀屬性，鼠標(biāo)事件響應(yīng)方法，鍵盤事件響應(yīng)方法，屬性值修改方法}。

鼠標(biāo)事件響應(yīng)方法、鍵盤事件響應(yīng)方法負(fù)責(zé)約定用戶行為及響應(yīng)方式，根據(jù)用戶行為和后臺(tái)消息請(qǐng)求修改圖形元素的屬性值，圖形元素的屬性及鼠標(biāo)鍵盤事件響應(yīng)方法都是編碼時(shí)確定的，這樣就可以使用數(shù)據(jù)結(jié)構(gòu)來描述圖形元素，用一種鍵值對(duì)表示屬性與屬性值、事件名與方法名，為了區(qū)別屬性與事件還需要定義不同的標(biāo)志，這樣特性的數(shù)據(jù)結(jié)構(gòu)現(xiàn)在一般用xml或json形式來描述。

2 數(shù)據(jù)驅(qū)動(dòng)GUI設(shè)計(jì)

由圖1可以看出，GUI都是由一些標(biāo)準(zhǔn)圖形元素組成，如果能夠用某種數(shù)據(jù)結(jié)構(gòu)把圖形元素描述出來，就可以把GUI用數(shù)據(jù)結(jié)構(gòu)進(jìn)行描述。然后就可以在后臺(tái)程序根據(jù)不同的功能產(chǎn)生相應(yīng)描述GUI的數(shù)據(jù)結(jié)構(gòu)，傳送到前臺(tái)用程序進(jìn)行解析，就能顯示出來了，這樣在需求變化時(shí)就不需要重寫GUI了。

Jquery代碼如下：

$（function（）{

var btn=$（""）；

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

addBtnEvent（"testBtn"）；//綁定事件響應(yīng)函數(shù)

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

}）；

function addBtnEvent（id）{//定義事件響應(yīng)函數(shù)

$（"#"+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的組件可以分成三個(gè)相關(guān)的集合：組件類型集、屬性集、事件響應(yīng)方法集。而事件又可分為鼠標(biāo)事件、鍵盤事件，不同用戶可能要求對(duì)同樣的事件做出不同的響應(yīng)。如圖2所示。

數(shù)據(jù)驅(qū)動(dòng)GUI設(shè)計(jì)的本質(zhì)就是以數(shù)據(jù)為中心，用數(shù)據(jù)封裝變化，用數(shù)據(jù)結(jié)構(gòu)描述GUI界面，GUI界面外觀完全依賴數(shù)據(jù)，GUI的代碼只負(fù)責(zé)解析數(shù)據(jù)，利用自動(dòng)生成技術(shù)，生成相應(yīng)的圖形元素完成可視化。

一個(gè)實(shí)例：這是一個(gè)信息系統(tǒng)的GUI界面，其中有些是必填的，有些是可選，有些直接輸入，有些是要查表選擇的，這個(gè)界面是非常常見的GUI界面，如圖3所示。

圖3對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，按json標(biāo)準(zhǔn)描述如下。

{"control"：{"PartID"："部品編號(hào)，string，50"，"PartName"："部件名稱，string，50"，"PartCode"："部品件號(hào)，string，20"，"AutoStyling"："車型，@table"，"PartUnit"："單位，string，5"，"DCAmount"："單車用量，double，2"，"InboundContainer"："入庫包裝，@table"，"InboundPackageAmount"："每包數(shù)量，int，0"，"OutboundContainer"："盛具，@table"，"OutboundPackageAmount"："每包數(shù)量，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 結(jié)束語

在所有講授面向?qū)ο蠹夹g(shù)的教材中都會(huì)說世界是由對(duì)象組成，所以軟件開發(fā)才需要面向?qū)ο蠹夹g(shù)，面向?qū)ο蠹夹g(shù)是采用事件消息機(jī)制來改變對(duì)象的狀態(tài)。把GUI界面看成一個(gè)對(duì)象，界面外觀布局就是通過后臺(tái)發(fā)給的數(shù)據(jù)（消息），通過對(duì)象自身的行為改變的。

參考文獻(xiàn)：

[1]李為民.軟件開發(fā)中的數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)思想[J].電腦編程技巧與維護(hù)，2012（24）：14-15.

[2]陳廣山.基于WPF的UI設(shè)計(jì)模式研究[J].雞西大學(xué)學(xué)報(bào)，2016（08）：32-35.

[3]畢卓，徐云川，王鎮(zhèn).采用數(shù)據(jù)驅(qū)動(dòng)機(jī)制的多核處理器[J].上海交通大學(xué)學(xué)報(bào)，2013（01）：81-85.

[4]蘇曉華.數(shù)據(jù)驅(qū)動(dòng)計(jì)算及其應(yīng)用[J].世界電子元器件，2008（03）：82-84.

[5]周學(xué)海，羅賽，王峰，等.一種數(shù)據(jù)驅(qū)動(dòng)的可重構(gòu)計(jì)算統(tǒng)一編程模型[J].電子學(xué)報(bào)，2007（11）：2123-2128.