基于數據驅動的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.