一種可快速模塊化配置的web界面構(gòu)建方法
【專利摘要】本發(fā)明公開了一種可快速模塊化配置的WEB界面構(gòu)建方法。該方法以Tag技術(shù)構(gòu)建可重用的界面元素，采用虛擬事件的方式，利用事件驅(qū)動機(jī)制發(fā)送和監(jiān)聽事件，使產(chǎn)品Web界面快速構(gòu)建，并可以使不同Web界面間快速交互。與現(xiàn)有技術(shù)相比，本發(fā)明的可快速模塊化配置的WEB界面構(gòu)建方法可快速實(shí)現(xiàn)內(nèi)容豐富、業(yè)務(wù)邏輯復(fù)雜、交互頻繁的Web界面構(gòu)建、重組、交互，具有很好的推廣應(yīng)用價值。
【專利說明】一種可快速模塊化配置的WEB界面構(gòu)建方法
[0001]

【技術(shù)領(lǐng)域】
[0002]本發(fā)明涉及一種Web界面構(gòu)建方法，具體地說是一種可快速模塊化配置的WEB界面構(gòu)建方法。

【背景技術(shù)】
[0003]隨著internet的迅速發(fā)展,越來越多的工作流程,商務(wù)交易，教育、培訓(xùn)、會議和講座，以及個人消費(fèi)娛樂都被轉(zhuǎn)移到WEB上來。與此相對應(yīng)的是交互操作的復(fù)雜性越來越高，Web界面展現(xiàn)和交互也越來越豐富。
[0004]在多種情況下，各種元素往往需要進(jìn)行互動，但是，由于其中有些元素歸屬于不同的界面區(qū)塊，因此，直接互相操作會造成較高的耦合，后續(xù)維護(hù)成本也很高，并且當(dāng)邏輯關(guān)系較復(fù)雜時容易出現(xiàn)程序錯誤。


【發(fā)明內(nèi)容】

[0005]本發(fā)明的技術(shù)任務(wù)是針對上述現(xiàn)有技術(shù)的不足，提供一種結(jié)合Java Tag技術(shù)，基于Tag和Javascript EDA (事件驅(qū)動架構(gòu))的可快速模塊化配置的WEB界面構(gòu)建方法。
[0006]本發(fā)明的技術(shù)任務(wù)是按以下方式實(shí)現(xiàn)的:一種可快速模塊化配置的WEB界面構(gòu)建方法，其特點(diǎn)是以Tag技術(shù)構(gòu)建可重用的界面元素，采用虛擬事件的方式，利用事件驅(qū)動機(jī)制發(fā)送和監(jiān)聽事件，使產(chǎn)品Web界面快速構(gòu)建，并可以使不同Web界面間快速交互。其中Tag提供模塊化元素，EDA提供交互解耦，支持產(chǎn)品界面快速重組定制，通過控制模塊代碼可直接增減界面組件及改變其特性。
[0007]上述方法的具體實(shí)現(xiàn)步驟為:
A、設(shè)計各系統(tǒng)各Web界面需要的模塊化元素，并以Tag的形式表示；
B、不同的Web界面依據(jù)需要引用相應(yīng)的Tag標(biāo)簽；
C、各Web界面設(shè)立事件廣播通道，所述廣播通道用于當(dāng)界面元素放生變化時向廣播站發(fā)送消息；
D、各Web界面設(shè)立事件監(jiān)聽通道，所述監(jiān)聽通道用于監(jiān)聽廣播站廣播的消息，以促使界面元素做出相應(yīng)改變。
[0008]為了更好的實(shí)現(xiàn)上述方法，還可以設(shè)置廣播站，所述廣播站用于接收所有界面元素發(fā)生變化時發(fā)送的消息，并把這些消息全部廣播出去。
[0009]上述方法中不同元素之間的交互方法為:
當(dāng)一個元素發(fā)生改變時，委托事件代理觸發(fā)一個虛擬事件，事件中包含這次改變的類型、名稱、變量信息，觸發(fā)事件后結(jié)束該元素的處理程序；注冊其他界面元素監(jiān)聽事件代理，當(dāng)上述元素觸發(fā)的虛擬事件發(fā)生時，其他界面元素各自作出相應(yīng)改變。
[0010]例如，假設(shè)某界面元素A發(fā)生改變時，需要若干其他界面元素B1、B2等作出相應(yīng)改變:
а.A發(fā)生改變時，委托事件代理觸發(fā)一個虛擬的事件，事件中包含這次改變的類型、名稱、變量等信息。觸發(fā)事件后結(jié)束A的處理程序。
[0011]b.注冊其他界面元素監(jiān)聽事件代理，當(dāng)A觸發(fā)的虛擬事件發(fā)生時，這些界面元素各自做出相應(yīng)改變。
[0012]本發(fā)明的可快速模塊化配置的WEB界面構(gòu)建方法與現(xiàn)有技術(shù)相比具有以下突出的有益效果:
(一)可快速構(gòu)建內(nèi)容豐富的不同Web界面；
(二)降低程序代碼的耦合度，提高代碼的重復(fù)利用度，但是又能使相關(guān)Web界面快速交互；
(三)降低邏輯復(fù)雜的程序代碼的錯誤率，減低維護(hù)成本。

【專利附圖】

【附圖說明】
[0013]附圖1是本發(fā)明方法中Web界面快速重組與交互的流程圖，
其中，
1.Tagl、Tag2、Tag3是構(gòu)成Web界面的元素模塊；
2.Web界面A、Web界面Bl、Web界面B2、Web界面B3是產(chǎn)品不同的Web界面；
3.元素Al、元素A2是構(gòu)成Web界面A的模塊化元素；
4.元素BI是構(gòu)成Web界面BI的模塊化元素之一；
5.元素B2是構(gòu)成Web界面B2的模塊化元素之一；
б.元素B3是構(gòu)成Web界面B3的模塊化元素之一。

【具體實(shí)施方式】
[0014]參照說明書附圖以具體實(shí)施例對本發(fā)明的可快速模塊化配置的WEB界面構(gòu)建方法作以下詳細(xì)地說明。
[0015]實(shí)施例:
本發(fā)明可快速模塊化配置的WEB界面構(gòu)建方法的實(shí)現(xiàn)包括以下步驟:
通過Tag實(shí)現(xiàn)界面元素模塊化，不同的Web界面引用不同的界面元素實(shí)現(xiàn)Web界面的快速重組與交互。
[0016]1.創(chuàng)建Tag標(biāo)簽 Funcpub.tag lsmenupanels.tag favpanel.tag searchpanel.tag topfloatbar.tag
2.Web界面引入Tag 〈mainbody:funcpub />
〈mainbody:lsmenupanels />
<mainbody:favpanel />
〈mainbody:searchpanel />
〈mainbody:topfloatbar />
3.建立廣播通道，發(fā)送消息
$eh_mf.1aunchevt(〃funcOpenRequested〃，iconsrc);
$eh_mb.1aunchevt(〃menubuttonclick〃，mf—nav);
$eh_md.1aunchevt(〃userChangedDate〃，〃wdate〃);
4.建立監(jiān)聽通道，監(jiān)聽虛擬事件，并快速響應(yīng)
$eh_mf.catchevt(〃funcOpenRequested〃，funct1n (e) {
$ ("#url").show ();
$ (〃#mbody_funcpub〃).show ();
var funcName = $ (〃#mainfunc_funcName〃).val();
var funclcon = $(〃#mainfunc_funcIcon〃).val();
var funcType = $ (〃#mainfunc_funcType〃).val();
})；o
[0017]如附圖所示，Web界面快速重組與交互的流程如下:
當(dāng)Web界面A中的元素Al、元素A2發(fā)生改變時，向廣播站發(fā)送改變消息1、消息2 ;廣播站再把消息1、消息2廣播出去；Web界面Bl、Web界面B2、Web界面3同時監(jiān)聽廣播站發(fā)出的消息，當(dāng)Web界面BI監(jiān)聽到與自己相關(guān)的消息1、消息2時，界面元素BI依據(jù)消息內(nèi)容做出相應(yīng)的快速響應(yīng)，同時Web界面B2、Web界面B3也分別監(jiān)聽到與自己相關(guān)的消息1、消息2，界面元素B2、界面元素B3依據(jù)消息內(nèi)容做出相應(yīng)的快速響應(yīng)。
【權(quán)利要求】
1.一種可快速模塊化配置的WEB界面構(gòu)建方法，其特征在于:以Tag技術(shù)構(gòu)建可重用的界面元素，采用虛擬事件的方式，利用事件驅(qū)動機(jī)制發(fā)送和監(jiān)聽事件，使產(chǎn)品Web界面快速構(gòu)建，并可以使不同Web界面間快速交互。
2.根據(jù)權(quán)利要求1所述的可快速模塊化配置的WEB界面構(gòu)建方法，其特征在于，該方法的具體實(shí)現(xiàn)步驟為: A、設(shè)計各系統(tǒng)各Web界面需要的模塊化元素，并以Tag的形式表示； B、不同的Web界面依據(jù)需要引用相應(yīng)的Tag標(biāo)簽； C、各Web界面設(shè)立事件廣播通道，所述廣播通道用于當(dāng)界面元素放生變化時向廣播站發(fā)送消息； D、各Web界面設(shè)立事件監(jiān)聽通道，所述監(jiān)聽通道用于監(jiān)聽廣播站廣播的消息，以促使界面元素發(fā)出相應(yīng)響應(yīng)。
3.根據(jù)權(quán)利要求2所述的可快速模塊化配置的WEB界面構(gòu)建方法，其特征在于，設(shè)置有廣播站，所述廣播站用于接收所有界面元素發(fā)生變化時發(fā)送的消息，并把這些消息全部廣播出去。
4.根據(jù)權(quán)利要求2所述的可快速模塊化配置的WEB界面構(gòu)建方法，其特征在于，具體交互方法為: 當(dāng)一個元素發(fā)生改變時，委托事件代理觸發(fā)一個虛擬事件，事件中包含這次改變的類型、名稱、變量信息，觸發(fā)事件后結(jié)束該元素的處理程序； 注冊其他界面元素監(jiān)聽事件代理，當(dāng)上述元素觸發(fā)的虛擬事件發(fā)生時，其他界面元素各自做出相應(yīng)改變。
【文檔編號】G06F9/44GK104133686SQ201410382849
【公開日】2014年11月5日 申請日期:2014年8月6日 優(yōu)先權(quán)日:2014年8月6日
【發(fā)明者】張壯 申請人:浪潮通用軟件有限公司