1、所屬部門 BOS Web平臺系統部BOS 新Web平臺培訓-運行框架篇Web動態框架-基本介紹技術框架兩種請求方式EventBusWeb動態框架-JSP與JS說明Web動態框架-EventBus應用Web動態框架-模塊化與多組織實現Web動態框架-開發建議提綱Web動態框架-技術框架Client/BrowserWeb Server界面動態渲染HTTP Service Dispatcher通用業務 ServiceBOTP工作流附件管理顯示風格CSS3業務事件邏輯JS基礎控件JQUERY編碼規則Application Server模塊A后臺服務模塊B后臺服務模塊C后臺服務模塊D后臺服務模塊后臺服務

2、EventBusJSONConvertInterceptor權限LicenseRemoteLocalJsonIOCRemoteLocalRemotelocalRemoteLocalRemoteLocal業務HandlerHTTP緩存處理業務Handler服務注入導入/導出服務模塊后臺服務RemoteLocalRemoteLocal.基礎服務模塊后臺服務基礎服務新的頁面由瀏覽器端發起Http請求或從頁面內部發出的Http請求必須提供頁面方案uipk和初始化動作申請action=initialize頁面內部發出的Http請求可由dynamicForm.addNewWindow發起由Server端響

3、應（DynamicWebController. doEvent）構造改頁面方案對應的事件總線的UIC（UI事件配置）調用initializeAction對應的頁面初始化事件返回具體的頁面內容由Web端重定向到新的JSP頁面由瀏覽器端接收，執行頁面中的初始化方法，發起js端事件總線中的初始化事件渲染頁面、初始化頁面并完成數據加載Web動態框架-頁面請求說明Web動態框架- 頁面請求基礎流程urlJs事件PageOnLoad后插邏輯攔截器Web端框架License用戶監控行為采集性能監控主業務組織處理Web端（onLoad）功能權限前插入邏輯后插入邏輯App端處理邏輯日志數據權限Client/Br

4、owseWeb ServerApp JSP頁面HTML頁面加載HTML頁面提交Ajax請求由瀏覽器端發起Ajax請求（waf.doPost）必須提供頁面方案UIPK并且action=調用的動作名稱由Server端響應（DynamicWebController. doEvent）構造改頁面方案對應的事件總線的UIC（UI事件配置）調用該動作對應的事件返回事件處理器的結果由瀏覽器端接收結果根據接收結果的成功或失敗，刷新頁面的不同區域或數據Web動態框架-AJAX請求Web動態框架- Ajax請求基礎流程actionJs事件處理前插入邏輯覆蓋邏輯后插入邏輯攔截器Web端框架License用戶監控行為

5、采集性能監控主業務組織處理Web端處理邏輯功能權限前插入邏輯覆蓋邏輯后插入邏輯App端處理邏輯日志數據權限Client/BrowseWeb ServerApp EventBus：事件處理總線目標：利用可插拔的插件機制，實現系統可擴展性及松耦合在JS層和WebServer層分別實現并提供插入機制幾個概念：Action：動作PlugIn：插件Event：響應的事件，是一個具體java類Hander：對應的具體實現，是一個具體java類UICUI配置文件，為EventBus提供調用的基礎框架提供基本的三種類型的UIC（CorePage.uic、ListPage.uic、EditPage.uic）業務

6、開發和擴展開發可通過定義工具擴展UIC的內容Web動態框架-EventBus與UIC說明Web動態框架- EventBus事件總線 Event Bus頁面初始化實現器數據服務實現器頁面動作實現器業務組件實現器業務應用實現器擴展開發實現器初始化事件數據查詢新增事件刪除事件提交事件審核事件業務組件實現器業務組件實現器業務應用實現器業務應用實現器擴展開發實現器擴展開發實現器頁面動作實現器頁面動作實現器數據服務實現器數據服務實現器頁面初始化實現器頁面初始化實現器Web動態框架-基本介紹Web動態框架-JSP與JS說明JSP介紹JS介紹Web動態框架-EventBus應用Web動態框架-模塊化與多組織實

7、現Web動態框架-開發建議提綱空白頁面（dynamicForm.jsp）列表界面（dynamicList.jsp）編輯/查看界面（dynamicEdit.jsp）在WAF的MVC概念中，JSP作為View顯示，承載界面顯示功能。主要作為：引用JS腳本和CSS腳本把動態UI模型元數據、數據Model的內容、及一些必要的系統元素賦予給對應的JS中的對象。承載界面顯示Web動態框架-JSP介紹空白頁面（dynamicForm.js）列表界面（dynamicList.js）編輯/查看界面（dynamicEdit.js）其他工具類瀏覽器端EventBus工具（eventbuseventbus.js）多語

8、言資源（i18ndynamicXXX_zh_CN.js）動態頁面構建器（ utilspagerBuilder.js ）數據綁定器（utilsdataBinder.js）Web動態框架-JS介紹Web動態框架-JS介紹-空白頁面主要事件如下：頁面打開事件：pageOnLoadEvent頁面渲染事件：pageOnRenderEvent頁面初始化數據事件：initDataEvent頁面關閉事件：pageOnCloseEvent注冊主業務組織事件：getMainOrgF7Event注冊主業務組織變化事件：afterMainOrgChangedEvent 界面完全裝載之后的事件： pletedEvent

9、頁面打開頁面渲染初始化數據注冊主業務組織頁面完全裝載提供動態頁面的基礎功能主要方法如下：getUIPk：獲得當前頁面的UI方案getPageInitData：獲得后臺返回的初始化數據fireEvent：觸發瀏覽器端eventbus事件addNewWindow：打開一個新窗口closeCurrentWindow：關閉當前窗口updateWindow：更新當前窗口changeTitle：設置頁面標題showMessage：顯示提示信息clearError：清除提示信息Web動態框架-JS介紹-空白頁面 ponent：搜索頁面組件searchField：按元數據屬性搜索頁面組件 ponentVisi

10、ble：設置頁面組件的可見性 ponentEnable：設置頁面組件的使能setFieldVisible：按元數據的屬性設置頁面組件的可見性setFieldEnable：按元數據的屬性設置頁面組件的使能getCurrentModelOrgType：獲得當前數據的主業務組織類型getCurrentModelOrgProperty：獲得當前數據的主業務組織的屬性addEASMutilOrgParam：為Http請求增加多組織參數_getMainOrgF7EventHandler：返回主業務組織對應的頁面F7控件Web動態框架-JS介紹-空白頁面Web動態框架-JS介紹-列表頁面繼承空白頁面增加的主

11、要事件如下：新增事件：addNewActionEvent刪除事件：deleteActionEvent修改事件：editActionEvent復制事件：copyActionEvent刷新時間： refreshActionEvent通用查詢初始化事件：queryOnInitEvent表格配置事件：gridConfigActionEvent 其他業務組件增加的事件主要方法如下：getEditUrl：獲得編輯頁面的UI方案getViewUrl：獲得查看頁面的UI方案getQueryPK：獲得當前頁面表格中查詢使用的queryPKgetQueryUuid：獲得當前頁面表格中虛模式查詢使用的uuidget

12、GridOrg：獲得當前頁面表格中查詢使用的公司Web動態框架-JS介紹-列表頁面Web動態框架-JS介紹-編輯/查看頁面繼承空白頁面增加的主要事件如下：新增事件：addNewActionEvent刪除事件：deleteActionEvent修改事件：editActionEvent復制事件：copyActionEvent保存事件：saveActionEvent保存并新增事件： saveAndAddNewActionEvent提交事件： submitActionEvent提交并新增事件： submitAndAddNewActionEvent信息塊新增一行事件：appendRowActionEve

13、nt信息塊刪除一行事件：deleteRowActionEvent表格新增一行事件：appendEntryRowActionEvent表格刪除一行事件：deleteEntryRowActionEventWeb動態框架-JS介紹-編輯/查看頁面增加的主要事件如下：數據裝載事件：fieldOnLoadEvent數據更新事件：fieldOnStoreEvent判斷數據改變事件：judgeDataModifyActionEvent上一條事件：previousActionEvent下一條事件：nextActionEvent第一條事件：firstActionEvent最后一條事件：lastActionEve

14、nt其他業務組件增加的事件主要方法如下：getCurrentModel：獲得當前頁面的數據getCurrentOperateState：獲得當前頁面的操作狀態getEditUrl：獲得當前頁面的UI方案isJudgeDataModify：判斷頁面中的數據是否修改setFieldValue ：為某個屬性賦值getCurrentModelOrg ：獲得當前數據的主業務組織getQueryPK：獲得當前頁面表格中查詢使用的queryPKgetQueryUuid：獲得當前頁面表格中虛模式查詢使用的uuidWeb動態框架-JS介紹-編輯/查看頁面Web動態框架-基本介紹Web動態框架-JSP與JS說明W

15、eb動態框架-EventBus應用Web動態框架-模塊化與多組織實現Web動態框架-開發建議提綱以下三個實現，是頁面初始化的最基礎的實現首先獲得頁面元數據，輸出元數據中的各種資源（多語言、組件狀態、標題、擴展JS路徑、緩存文件等JSP中需要的資源）框架初始化工作，返回一些組件的使能控制，包括操作狀態的控制、編碼規則的控制，按鈕權限的控制等最后重定向到JSP生成具體頁面空白頁面對應DynamicWebController,映射路徑為dynamicPage.do列表頁面對應DynamicWebListController,映射路徑為dynamicList.do編輯頁面對應DynamicWebEdi

16、tController,映射路徑為dynamicForm.doWeb動態框架-EventBus-初始化實現器CloseAction：正常關閉事件AddNewActionEvent：新增事件，轉發到新的UIPK的初始化方法EditActionEvent：的編輯事件，轉發到新的UIPK的初始化方法ViewActionEvent：查看事件，轉發到新的UIPK的初始化方DeleteActionEvent：刪除事件WebListDataEvent：查詢事件，轉發到表格的getGridDataCopyActionEvent：復制事件SubmitActionEvent：提交事件SaveActionEvent

17、：保存事件AppendRowActionEvent：新增行事件DeleteRowActionEvent: 刪除行事件ModelCreateEvent：數據新建事件ModelLoadEvent：數據加載事件NumberRuleEvent：生成編碼規則事件PermissionFunctionCheckEvent：校驗按鈕權限事件Web動態框架-EventBus-其他事件Web動態框架-模塊化說明每個JS都是一個模塊，模塊可以對外暴露公開的方法和屬性，模塊與模塊之間通過依賴來互相交互。動態框架的每個頁面按需加載JS資源，所以每個加載的JS都必須是一個模塊。框架中模塊分兩種，分別是通用模塊和頁面模塊。

18、通用模塊的依賴關系自己寫在JS中，使用mod.defineModule來定義，通用JS需要自己編寫，然后導入到定義工具中。頁面模塊的依賴關系通過定義工具導入進來，使用mod.definePage來定義，定義工具會自動生成頁面的相關JS結構。前端頁面加載時，會按照模塊的依賴關系以此加載JSWeb動態框架-基本介紹Web動態框架-JSP與JS說明Web動態框架-EventBus應用Web動態框架-模塊化與多組織實現Web動態框架-開發建議提綱Web動態框架-通用模塊定義defineModule(moduleName,deps,callback)moduleName: 為自webviews目錄下的路

19、徑名稱+文件名，不帶文件的后綴，比如上例中的文件路徑為 mon_utils.js，實際模塊名為 mon_utilDeps: 依賴的JS，必須是一個JS數組，框架提供的通用模塊可以從幫助系統中查看.Callback: 當依賴的模塊都加載之后執行的回調函數，回調函數的默認參數是waf, 如果要使用arap_util中提供的方法，可以在代碼中定義變量arap_util，然后使用mod.useSync來獲取arap_util對外暴露的方法。Web動態框架-頁面模塊定義definePage(moduleName, callback)moduleName: 為自webviews目錄下的路徑名稱+文件名，不

20、帶文件的后綴，比如上例中的文件路徑為 mon_utils.js，實際模塊名為 mon_utilDeps: 一般不用定義頁面的依賴關系，頁面的依賴關系在定義工具中導入Callback: 當依賴的模塊都加載之后執行的回調函數，回調函數的默認參數是waf.頁面依賴的JS模塊頁面的主JS永遠位于最后definePage的定義由定義工具自動生成每個頁面都有一個主JS，并且這個JS必須位于導入資源列表的最后一項。Web動態框架-頁面模塊示例definePage中一般不用定義依賴關系。如果在定義工具上導入了5個JS模塊，在A區工具會自動的生成模塊對應的變量。B區中定義了變量_public和_private,

21、 在工具中定義的事件等都會在_public和_private中生成方法，_public中的方法調用_private中的方法。真正的業務代碼都寫在C區間像其他模塊一樣，頁面也會返回_public中注冊的方法，供外部使用。頁面重新保存之后，除C區之外，其他區域的代碼會被覆蓋。Web動態框架-頁面依賴關系說明頁面的依賴關系說明：如果A擴展自B, B擴展自C，則在定義工具資源列表中的順序是C-B-A。每個頁面有一個主JS, 頁面運行時通過這個主JS驅動其他依賴項的加載，主JS必須位于資源列表的最后一項。頁面之間的依賴沒有層級關系，依賴的頁面自動使用主頁面JS的依賴項。比如A擴展自B, B中有三個依賴項

22、分別是B1,B2,B3.A的依賴項就是B1，B2，B3, B.如果A增加了依賴項A1，并且A1與B1，B2，B3，B沒有關系，則A的依賴項順序是：B1,B2,B3,B,A1. 如果A中增加了依賴項A1，A1也依賴了A2，應該將A2也加入到資源列表中，此時A的依賴項就是：B1,B2,B3,B,A2,A1.每個模塊只會被加載一次，比如B1被B頁面加載過之后，A頁面依賴B1的時候，會直接從緩存中獲取。頁面之間不能存在循環依賴，也就是A依賴B，同時B依賴A.Web動態框架-模塊化與打包關系壓縮打包做好業務模塊之后，打補丁的時候會對業務的所有JS進行壓縮壓縮之后的JS放置在bin目錄下，和webview

23、s下的目錄一致，只是把webviews變成了bin開發期（debug=true）：由主JS驅動，會將依賴的JS依次加入進來。加入進來的每個JS是單個的JS文件，方便調試。運行期（debug=false）會從元數據中解析所用到的所有組件，導入的資源等，并依次解析他們的依賴關系。會對這些依賴關系進行排序，并動態的對壓縮后的JS進行連接當某個JS發生變化的時候，會自動的重新進行連接瀏覽器端處理邏輯：通過waf.getContext()獲得contextContext中mainorgunit、mainorgtype參數，分別對應主業務組織和主業務組織類型框架提供了getMainOrgF7和afterM

24、ainOrgChangedEvent兩個事件getMainOrgF7事件，返回當前主業務組織的F7控件afterMainOrgChangedEvent事件，更新Context中mainorgunit發起頁面請求或Ajax請求時，從Context獲得mainorgunit、mainorgtype參數并增加的Http請求的頭信息中通過getMainOrgF7正常改變主業務組織，框架自動更新context中的相關信息如頁面過程中，特殊改變主業務組織，需要通過代碼更新context中的相關信息Web動態框架-多組織處理Web Server端處理邏輯通過攔截器獲得http請求中的mainorgunit和

25、mainorgtype增加這兩個參數的內容到context中列表界面形成MutiOrgPermParam參數空白頁面、編輯界面增加一組數據通過線程變量傳遞當前context的內容到App Server端Web Server端處理邏輯RPC調用時根據線程變量統一轉化調用接口如果有主業務組織，調用XXXRemoteInstanceWithObjectContext接口否則，正常調用XXXRemoteInstance接口Web動態框架-多組織處理Web動態框架-基本介紹Web動態框架-JSP與JS說明Web動態框架-EventBus應用Web動態框架-模塊化與多組織實現Web動態框架-開發建議提綱E

26、ventBus提供給JS和Web Server的唯一擴展方式，務必使用。JS端初始化主要擴展二個事件：pageOnLoad：可增加后處理，完成頁面元數據加載后的業務處理邏輯fieldOnLoad：可增加后處理，完成與數據相關的業務處理邏輯Ajax請求，調用waf.doPost完成，不能使用其他類庫頁面內申請打開新頁面，調用_self.addNewWindow，不要直接使用其他方式。任何后臺請求，都需要通過action調用發起不要輕易覆蓋js的方法，通過事件覆蓋和_self.getOptionFromArguments()獲得doPost的參數，只更改相關內容，再調用框架提供方法即可WebServer端的handle要繼承AbstractWebEventHandler覆蓋框架的action，需要從已有的ActionHandler類繼承其他請參考EAS標準開發規范Web動態框架-開發建議特別聲明沒有金蝶軟件國際軟件集團有限公司的特別許可，任何人不能以任何形式或為任何目的復制或傳播本文檔的任何部分。本文檔中包含的信息如有更改，恕不另行通知。由金蝶軟件（中國）