《柔性Web展現框架模型架構設計方法》是國家電網公司、南京南瑞集團公司和南京南瑞信息通信科技有限公司於2013年11月12日申請的專利，該專利的申請號為2013105606028，公布號為CN103605516A，公布日為2014年2月26日，發明人是劉一田、胡牧、劉士進、潘穎、沙衛國、於燁，該專利屬於信息技術領域。
《柔性Web展現框架模型架構設計方法》其通過構造符合AJAX+MVC模式的框架模型，定義了腳本組件模型並通過腳本策略適配器的驅動及事件機制，較好解決了Web軟體開發的柔性不足問題；對界面互動展現組件進行面向對象的封裝，支持繼承和多態，提供了展現組件的按需復用能力，增強了框架可擴展性和可維護性；定義了模型、視圖和控制器合理分層的Web套用單元，並通過內置的資源載入規則，縮短了資源載入時間。通過OSGI框架的模組擴展機制實現了Web組件的線上擴展和維護能力。
2017年5月，《柔性Web展現框架模型架構設計方法》獲得第十屆江蘇省專利項目獎優秀獎。
（概述圖為《柔性Web展現框架模型架構設計方法》摘要附圖）
基本介紹
- 中文名：柔性Web展現框架模型架構設計方法
- 公布號：CN103605516A
- 公布日：2014年2月26日
- 申請號：2013105606028
- 申請日：2013年11月12日
- 申請人：國家電網公司、南京南瑞集團公司、南京南瑞信息通信科技有限公司
- 地址：北京市西城區西長安街86號
- 發明人：劉一田、胡牧、劉士進、潘穎、沙衛國、於燁
- 分類號：G06F9/44（2006.01）I
- 代理機構：南京縱橫智慧財產權代理有限公司
- 類別：發明專利
- 代理人：董建林、汪慶朋
專利背景,發明內容,專利目的,技術方案,附圖說明,權利要求,實施方式,榮譽表彰,
專利背景
柔性展現框架是一個比較新的領域。軟體柔性是指軟體行為能符合用戶預期，動態適應軟體環境的變化。例如，對於長生命周期的大規模軟體系統，軟體的環境是動態變化的，它有可能超出開發階段的預期，需要軟體具備適應能力；對於開發階段未預期的環境及停機維護代價高的系統，這種環境適應能力更需要線上調整，該文主要關注於Web線上套用開發和運行時的柔性，這種柔性體現在Web套用可預期的一些能力，包括兼容不同瀏覽器，界面元素展現主題的線上動態可配置，界面元素位置的線上動態可配置，本地化和國際化的動態可配置，Web資源的按需載入能力，界面視圖及互動的可拖拽設計及配置能力。以及不可預期的外部環境變化時的動態調整能力、組件動態擴展能力等。
AJAX（Asynchronous Java Script and XML）技術的運用使得在瀏覽器與服務端互動時，客戶端的AJAX請求代替了頁面刷新請求，不會打斷用戶思路，保障其更加流暢的完成業務操作，增強了用戶體驗。
但是，大量客戶端腳本的套用，代碼的可維護性、可擴展性、各種主流瀏覽器的兼容性成為了新的挑戰，如何在保證用戶體驗的同時，增強代碼的可維護性和擴展性，禁止主流瀏覽器的差異，亟需一種忽略腳本語言本身的差異性，讓界面設計人員專注於界面設計、讓開發人員專注於業務邏輯編碼、讓系統維護人員更方便升級維護的柔性展現框架。
發明內容
專利目的
《柔性Web展現框架模型架構設計方法》的目的在於給出一種柔性Web展現框架模型架構設計方法，有效提升基於Web的信息系統的在不同瀏覽器訪問時的統一用戶體驗，提高界面互動能力，增強Web頁面中JavaScript腳本的組織和管理能力，提供可視化界面定義、設計和代碼生成能力，提供管理模組的腳本編譯和最佳化功能以加速腳本的傳輸和展現能力，增強Web模組的自適應性和可擴展性等柔性功能，使得Web信息系統的二次開發效率和最終產品具備良好的柔性。
技術方案
《柔性Web展現框架模型架構設計方法》其特徵在於，其包括以下步驟：
1）建立Web展現框架模型的基本層次結構，所述Web展現框架模型包括四個基本層次結構：基礎層、工具層、控制項層、視圖層；
基礎層包括JavaScript語言擴展、JavaScript運行時擴展、國際化以及主題、上下文組件、行為組件、文檔節點選擇器組件、AJAX組件、動畫效果等基礎組件。工具層包括通用工具庫、安全機制和REST服務（Representational State Transfer表述性狀態轉移）客戶端。控制項層包括基礎控制項、編輯器控制項、容器控制項、數據控制項以及數據實體容器。視圖層包括視圖、視圖控制器、視圖容器。
2）在Web展現框架模型的基礎上增加柔性結構特徵。即在基礎展現框架的上層增加套用上下文組件Weblet小程式，實現Weblet小程式的註冊、引用、載入、運行、銷毀等完整的腳本生命周期管理機制。Weblet小程式是Web套用的最小邏輯單元，它將頁面檔案、腳本檔案和資源檔案按照一定的目錄結構管理，其中腳本檔案以MVC2（模型-視圖-控制器）模型進行組織，每個獨立的頁面檔案都是一個視圖檔案和一個視圖控制器檔案的組合，視圖檔案中包含了對數據模型的定義或引用。Weblet小程式允許多級目錄嵌套，提供同模組的Weblet和跨模組的Weblet之間的引用功能。Weblet的結構示例如下:
-WebletName
-resources
Themes --當前上下文組件主題
Aero--主題名
Images--主題圖片
controls.css --主題樣式
Grey
Css --組件通用樣式設定
Locales--本地化語言配置
zh_CN
-scripts
-controls
CustomControl.js --自定義控制項
-views
DetailView.js
DetailViewController.js
MainView.js --主視圖
MainViewController.js --主視圖控制器
weblet.js --引用、註冊、啟動Weblet
展現組件中的樣式通過主題定義進行管理，在全局配置檔案中修改主題配置，展現組件的文字的顯示是通過本地化檔案以及本地化API接口實現國際化文字顯示功能。
3）定義策略連線器，利用不同的組合策略形成不同所述Weblet小程式間的組合級上下文，其中主所述Weblet小程式負責監聽和執行組合上下文中其他所述Weblet小程式之間的互動關係；
4）在步驟1）中基礎層的JavaScript語言擴展提供了面向對象的編程能力。在此基礎上，定義了展現組件的擴展實現規範。主要包含了命名空間，類，類的繼承、多態，事件的定義和傳播機制等的書寫規範，如下所示：
package.subpackage.CustomClass=function(){ --包名.子包名.類名
var me=$extend(MXComponent); --繼承自基礎組件
me.on(eventname)=null; --類的行為的關聯事件
me._protectedKey=null; --類的保護變數
var _privateKey=null; --類的私有變數
var base={};
base.init=me.init;
me.init=function() --類的多態
{
base.init();--父類的初始化
_initConrols();--當前類的初始化
}
me.customMethod=function(){--類的公有方法
vareventParam={cancel:false}--事件參數
me.trigger(eventname,eventParam);--觸發事件
};
returnme.endOfClass(arguments);
};
5）給所述Web展現組件提供線上擴展能力，利用OSGI模組機制提供的模組的裝載、卸載、啟動、停止模組及動態擴展運行時的模組的擴展模組機制，實現所述Web展現組件的線上擴展能力；基於OSGI（OpenServiceGatewayInitiative:技術是面向Java的動態模型架構）的擴展模組提供展現框架的線上擴展能力。OSGI模組機制提供了模組的裝載、卸載、啟動、停止模組等運行時功能，並提供了擴展模組機制，可以動態擴展運行時的模組，基於這些功能，使用步驟4）中描述的面向對象的封裝、繼承、多態機制，實現展現框架的線上擴展能力。
6）定義界面資源描述規範，可視化界面設計器基於該規範對用戶設計的界面進行描述和編譯，生成可在Web上直接運行的代碼。界面資源描述規範以通用擴展標記語言XML格式定義了界面資源組織結構，其中包含視圖、數據源、許可權、資源和國際化配置等描述，以及界面資源的屬性、事件和行為。如下所示：
<xml version="1.0" encoding="UTF-8">
<ui:Application xmlns:ui="http://www.sgcc.com.cn/sguap/ui"title="界面示例">
<ui:views>
<ui:Viewuuid=""id="mainView">
<ui:componentuuid=""id="compid"alias=""width=""height=""datasource="">
</ui:component>
</ui:View>
</ui:views>
<ui:datasources>
<ui:datasource uuid=""desc=""baseUrl=""primaryKey="id">
<ui:actionname=""lable=""/>
<ui:meta>
<ui:property name=""label=""dataType=""editor=""/>
</ui:meta>
</ui:datasource>
</ui:datasources>
<ui:permissions rootIscId=""desc="界面許可權標識根節點">
<ui:permission uuid=""desc=""iscId=""ControlAliases=""/>
</ui:permissions>
<ui:resources>
<ui:resourceuuid=""desc="資源描述"extName=""type=""embedded="false"url=""/>
</ui:resources>
<ui:languages>
<ui:lang locale=""default="true">
<ui:locale key=""value=""/>
</ui:lang>
</ui:languages>
</ui:Application>
即規範中以Web套用模組為根，視圖為主要界面可視區域，對視圖中的展現組件進行自描述和關聯描述，其中涉及到展現組件相關的許可權描述、界面靜態資源描述、國際化配置描述。資源對象中對每種元素都定義了各自的描述屬性，除了唯一標識、資源描述等基本屬性外，其它描述屬性相對獨立。
7）實現可視化界面設計器，將Web展現組件集成到設計器的工具箱中，以可視化拖拽配置的形式提供Web展現組件的可視化設計及代碼生成能力，生成的代碼符合Weblet小程式結構。以MVC2模型將Weblet小程式分為視圖、視圖控制器、模型三部分，實現界面設計人員、業務邏輯開發人員、套用模型設計人員的合理分工、並行開發，方便二次開發人員快速構建一個Web套用。所述可視化界面設計器基於所述界面資源描述規範對用戶設計的界面視圖進行描述和編譯，生成可在Web上直接運行代碼的界面；
8）提供所述Weblet小程式的腳本檔案和資源檔案的模組級編譯能力，在發布套用模組時，將每個所述Weblet小程式中的多個腳本檔案最佳化編譯成一個獨立的腳本檔案，將每個所述Weblet小程式中的多個樣式檔案編譯成一個獨立的樣式檔案，以減少資源的載入量。
優選的，所述Web展現框架模型包括基礎層，所述基礎層包括JavaScript語言擴展、JavaScript運行時擴展、國際化以及主題、文檔節點選擇器組件、AJAX組件、動畫效果組件；所述工具層包括通用工具庫、安全機制和REST服務客戶端；所述控制項層包括容器組件、視圖組件、布局組件、常用工具類、編輯器組件、異常處理機制，本地化和國際化處理機制；所述視圖層包括視圖、視圖控制器、視圖容器。
優選的，所述Weblet小程式將頁面檔案、腳本檔案和資源檔案按照設定的目錄結構管理，其中腳本檔案以MVC2模型進行組織，每個獨立的頁面檔案都是一個視圖檔案和一個視圖控制器檔案的組合，視圖檔案中包含了對數據模型的定義或引用。
優選的，支持不同的所述Weblet小程式組合策略形成不同所述Weblet小程式間的組合級上下文，支持所述Weblet小程式之間的依賴互動，其中主所述Weblet小程式負責監聽和執行組合上下文中其他所述Weblet小程式之間的互動邏輯。
優選的，其還包括一套獨立的JavaScript命名空間，類，類的繼承、多態，事件的定義和傳播機制的書寫規範。
優選的，所述可視化界面設計器包括工具箱，所述工具箱中集成了所述Web展現框架模型中的展現組件；所述可視化界面設計器支持滑鼠拖拽生成界面視圖，支持對通過滑鼠在界面視圖中進行布局定義、支持數據模型定義、支持Web展現組件的屬性定義、支持數據模型和Web展現組件的元數據匹配，支持手工修改界面描述規範的方式實現界面視圖的設計，每個界面視圖包括可修改的界面配置檔案以及對應的視圖控制器檔案。
優選的，其還包括以下步驟：編譯最佳化套用模組中每個所述Weblet小程式的腳本和樣式；發布套用模組時，在Web套用訪問時可直接訪問編譯後生成的所述Weblet小程式的編譯後腳本和樣式檔案。
附圖說明
圖1是《柔性Web展現框架模型架構設計方法》的柔性Web展現框架模型架構的框架圖；
圖2是該發明實施例中Web組件自適應變化的原理圖；
圖3是該發明實施例中柔性Web展現框架模型架構的設計及實現方法的工作流程圖。
權利要求
1.《柔性Web展現框架模型架構設計方法》其特徵在於，其包括以下步驟：
1）建立Web展現框架模型的基本層次結構，所述Web展現框架模型包括四個基本層次結構：基礎層、工具層、控制項層、視圖層；
2）在所述Web展現框架模型的上層增加套用上下文組件的Weblet小程式，並實現所述Weblet小程式的註冊、引用、載入、運行、銷毀的腳本生命周期管理，一個所述Weblet小程式中能引用和組合多個Weblet小程式；
3）定義策略連線器，利用不同的組合策略形成不同所述Weblet小程式間的組合級上下文，其中主所述Weblet小程式負責監聽和執行組合上下文中其他所述Weblet小程式之間的互動關係；
4）定義所述Web展現組件的擴展實現規範，包括：命名空間，類，類的繼承、多態，事件的定義和傳播機制的書寫規範；給所述Web展現框架模型中基礎層的JavaScript語言擴展增加面向對象的編程能力；
5）給所述Web展現框架模型提供線上擴展能力，利用OSGI模組機制提供的模組的裝載、卸載、啟動、停止模組及動態擴展運行時的模組的擴展模組機制，實現所述Web展現組件的線上擴展能力；
6）定義界面資源描述規範，所述界面資源描述規範以通用擴展標記語言XML格式定義界面資源組織結構，其中包含視圖、數據源、許可權、資源和國際化配置，以及界面資源的屬性、事件和行為；
7）實現界面可視化設計器，所述可視化界面設計器提供了Web展現組件的可視化拖拽設計功能，提供了基於所述界面資源描述規範對用戶設計的界面視圖進行描述和編譯功能，並且可生成在Web上直接運行預覽的界面；
8）對所述Weblet小程式的腳本檔案和資源檔案的模組級編譯能力，在發布套用模組時，將每個所述Weblet小程式中的多個腳本檔案最佳化編譯成一個獨立的腳本檔案，將每個所述Weblet小程式中的多個樣式檔案編譯成一個獨立的樣式檔案，以減少資源的載入量。
2.根據權利要求1所述的方法，其特徵在於，所述Weblet小程式將頁面檔案、腳本檔案和資源檔案按照設定的目錄結構管理，其中腳本檔案以MVC2模型進行組織，每個獨立的頁面檔案都是一個視圖檔案和一個視圖控制器檔案的組合，視圖檔案中包含了對數據模型的定義或引用。
3.根據權利要求1所述的方法，其特徵在於，支持不同的所述Weblet小程式組合策略形成不同所述Weblet小程式間的組合級上下文，支持所述Weblet小程式之間的依賴互動，其中主所述Weblet小程式負責監聽和執行組合上下文中其他所述Weblet小程式之間的互動邏輯。
4.根據權利要求1所述的方法，其特徵在於，所述可視化界面設計器包括工具箱，所述工具箱中集成了所述Web展現框架模型中的展現組件；所述可視化界面設計器支持滑鼠拖拽生成界面視圖，支持通過滑鼠在界面視圖中進行布局定義、支持數據模型定義、支持Web展現組件的屬性定義、支持數據模型和Web展現組件的元數據匹配，支持手工修改界面描述規範的方式實現界面視圖的設計，每個界面視圖包括可修改的界面配置檔案以及對應的視圖控制器檔案。
5.根據權利要求1所述的方法，其特徵在於，其還包括以下步驟：編譯最佳化套用模組中每個所述Weblet小程式的腳本和樣式；發布套用模組時，在Web套用訪問時可直接訪問編譯後生成的所述Weblet小程式的編譯後腳本和樣式檔案。
實施方式
如圖1至圖3所示，《柔性Web展現框架模型架構設計方法》的具體實施流程為：
1、Web展現框架模型實現，提供組件自身的柔性。
首先實現JavaScript的面向對象機制，並JavaScript原生的對象類型進行擴展。其次，對組件進行分類劃分命名空間，避免組件命名衝突等問題。設計實現主題樣式原型，為主題定義提供依據。
然後，實現基礎的上下文組件、行為組件、文檔節點選擇器組件、AJAX組件、動畫效果等基礎組件。
在此基礎上，進行組件應用程式接口設計，定義每個展現組件的方法、屬性、事件，實現容器組件、視圖組件、布局組件、常用工具類、編輯器組件、異常處理組件、數據處理組件。由於數據處理組件要和服務端互動並要對業務數據進行處理展現，這裡需要規約好數據處理組件解析的數據格式和結構，並對主流數據格式進行柔性適配處理。
然後，實現本地化和國際化機制以滿足國際化展現需求，實現特徵檢測機制以適應跨瀏覽器需求。
定義展現組件和主題的擴展實現規範，主要包含了命名空間，類，類的繼承、多態，事件的定義和傳播機制、CSS擴展的機制等書寫規範。
2、開發時柔性實現，實現快速配置開發，靈活適應需求變更。
首先，在Web展現框架的基礎上增加柔性開發特徵。實現套用上下文組件Weblet小程式，提供Weblet的註冊、引用、載入、啟動、銷毀等完整的腳本生命周期管理機制。定義策略連線器。在Weblet的weblet.js檔案中對其它模組的Weblet或當前模組的Weblet進行按需載入，如下所示。
$import("demmos.views.MainViewController");
mx.weblets.WebletManager.register({
id:"demos",
name:"套用名稱",
requires:["amod/moduleref","attrtest","testtpt/proj","utils"],
bundleName:"appmod",
onload:function(e)
{
},
onstart:function(e)
{
varmvc=newdemos.views.MainViewController();
e.context.rootViewPort.setViewController(mvc);
}
});
上面偽碼中的requires屬性描述了按需載入的Weblet信息，其中“模組名/Weblet名”表示跨模組的Weblet引用，“Weblet名”表示當前模組的Weblet引用。描述完當前Weblet所需的Weblet信息後，在啟動事件中對自身提供的主功能視圖控制器進行註冊。
接著，定義界面描述規範，將界面組件及許可權定義等以XML文檔的格式進行描述。
然後，實現可視化界面設計器，將Web展現框架中的組件以工具箱的形式集成在界面設計器中，用戶拖拽生成的界面視圖使用界面描述規範進行描述定義，並可以手工修改拖拽生成的視圖配置檔案進行界面設計，基於界面描述規範編譯生成Weblet小程式代碼結構，界面視圖設計的調整僅存在於視圖檔案的描述中，不會影響控制器的邏輯和業務模型，實現開發時的柔性。
3、運行時柔性實現，基於OSGI的模組管理機制和Web展現組件的擴展規範，實現運行時動態組件擴展。
發布套用模組時，編譯最佳化模組中每個Weblet的腳本和樣式，在Web套用訪問時直接訪問編譯後的腳本和樣式檔案。發布後生成最小化可運行的OSGI模組。
線上維護套用模組。在擴展模組中對被擴展模組中所提供的組件進行擴展和覆蓋。並通過OSGI提供的模組管理機制，在套用模組運行期間實現原有模組動態更新和載入功能。Web組件自適應變化的原理如圖2所示，當運行時修改模組配置後，用戶再次刷新頁面時，上下文組件會自動獲取最新的配置，並將配置信息通過Weblet的策略連線器傳遞給展現框架的行為組件，行為組件執行配置更改操作並以事件的形式通知展現組件以最新的配置要求進行展現。
4、實現後的柔性Web展現框架模型如圖1所示。
榮譽表彰
2017年5月，《柔性Web展現框架模型架構設計方法》獲得第十屆江蘇省專利項目獎優秀獎。
