UniEAP V4 WorkShop用戶手冊

 

 

版權聲明
《UniEAP V4 WorkShop用戶手冊》的版權歸東軟集團（大連）有限公司全部。未經東軟集團（大連）有限公司的書面准許，不得將本手冊的任何部分以任何形式、採用任何手段（電子的或機械的，包括照相複製或錄製）、或爲任何目的，進行復制或擴散。
Copyright© 1997-2011 東軟集團（大連）有限公司。版權全部，翻制必究。
®是東軟軟件股份有限公司的註冊。

更改履歷
版本號 更改時間 更改的圖表和章節號 狀態 更改簡要描述 更改申請編號 更改人 批准人
1.0 2011-07-08 全部 N 於洋
2.0 2013-01-31 部分 M 顏仲南
3.0 2013-07-19 部分 M 張冬威



注：狀態能夠爲N-新建、A-增長、M-更改、D-刪除
目錄
前言 10
本手冊面向的受衆 10
手冊的結構 10
閱讀建議 10
手冊約定 11
第1章 UniEAP V4 簡介 11
1.1 UniEAP V4 簡介 11
1.2 UniEAP V4 的開發模式 12
1.3 UniEAP V4 WorkShop的定位 12
第2章 安裝與配置 14
2.1 安裝UniEAP V4 Workshop 14
2.1.1 UniEAP V4 WorkShop運行環境 14
2.1.2 JDK 以及環境變量配置 14
2.1.3 Eclipse啓動參數的配置 17
2.1.4 安裝WorkShop Eclipse插件 18
2.1.5 經常使用第三方插件推薦 19
2.1.6 插件安裝失敗的處理方法 20
2.2 配置UniEAP V4 WorkShop 20
2.2.1 切換到UniEAP透視圖 20
2.2.2 設置源碼默認包路徑前綴 22
2.2.3 設置Web瀏覽器 23
2.2.4 校驗設置 25
第3章 快速入門 27
3.1 開發樣例功能描述 27
3.2 安裝及準備工做 29
3.2.1 準備數據庫腳本 29
3.2.2 導入V4工程 29
3.2.3 配置數據庫鏈接 35
3.3 樣例開發 36
3.3.1 創建軟件組件（SC）和開發組件（DC） 36
3.3.2 創建模型 40
3.3.3 頁面開發過程 45
3.4 部署TOMCAT服務器 75
第4章 Workshop工具簡介 80
4.1 工具欄 80
4.2 UniEAP 資源管理器 81
4.3 Problems視圖 82
4.4 錯誤日誌視圖 83
4.5 特性視圖 84
4.6 控制檯視圖 84
4.7 Servers視圖 85
4.8 數據集視圖 86
4.9 工具插件自動升級 86
第5章 組件化開發使用指南 90
5.1 UniEAP工程結構簡介 90
5.1.1 UniEAP V4 工程結構一覽 90
5.1.2 UniEAP工程 91
5.1.3 軟件組件 92
5.1.4 開發組件 93
5.1.5 Patch工程 95
5.2 使用UniEAP 工程 97
5.2.1 新建UniEAP工程 97
5.2.2 導入UniEAP工程 100
5.2.3 新建仍是導入？ 104
5.3 使用軟件組件（SC） 105
5.3.1 新建軟件組件 105
5.3.2 設置組件描述信息 106
5.3.3 設置包含的開發組件 108
5.4 使用開發組件（DC） 112
5.4.1 新建開發組件 112
5.4.2 設置組件依賴 114
5.4.3 設置公共訪問包（PP） 117
5.4.4 設置組件描述信息 120
5.5 設置組件發佈 122
5.5.1 UniEAP V4組件發佈機制 122
5.5.2 設置組件發佈 128
5.6 設置組件發佈Filter順序 130
5.7 組件調試設置源 130
5.8 UniEAP工程部署 135
5.8.1 開發測試環境 135
5.8.2 系統上線環境 141
5.8.3 UniEAP V4兼容應用服務器列表 146
第6章 模型化開發使用指南 147
6.1 使用模型開發 147
6.1.1 Entity模型 147
6.1.2 DTO模型 159
6.1.3 DAO模型 172
6.1.4 BO模型 182
6.1.5 View模型 199
6.1.6 View組件 243
6.2 使用可視化UI設計器 249
6.2.1 UIDesigner簡介 249
6.2.2 View如何運做？ 249
6.2.3 進行UI設計 252
6.2.4 模式控件的使用 356
6.2.5 設置入口信息 381
6.2.6 設置過程調用 392
6.2.7 使用腳本編輯器 416
6.3 異常框架 460
6.4 國際化 461
6.4.1 概述 461
6.4.2 模型文件國際化 462
6.4.3 撤銷模型文件國際化 472
6.4.4 JS文件國際化 472
6.4.5 代碼表國際化（CodeList） 474
第7章 組織機構安全使用指南 475
7.1 組織機構 475
7.1.1 基本概念 475
7.1.2 當前登陸用戶 476
7.1.3 擴展屬性 476
7.1.4 事件監聽 479
7.2 安全 479
7.2.1 基本概念 479
7.2.2 資源權限 481
7.2.3 賬號鎖定踢出 483
7.2.4 驗證碼 484
7.2.5 在線用戶 485
7.2.6 非正常登陸請求 485
7.2.7 Session過時 486
7.2.8 菜單受權 486
7.2.9 事件監聽 486
7.3 管理控制檯 487
7.3.1 初始受權 487
7.3.2 組織單元維護 490
7.3.3 職位管理 492
7.3.4 組織單元類型 493
7.3.5 用戶維護 493
7.3.6 管理角色 494
7.3.7 業務角色 496
7.3.8 組織角色受權 497
7.3.9 頁面受權 497

前言
本手冊面向的受衆
本手冊是面向使用UniEAP V4的開發人員專門編寫的，對UniEAP V4 WorkShop的使用方法進行了詳細的描述。
閱讀本手冊的人員須要對以下知識有所瞭解：
1 HTML、JavaScript和Ajax基本知識。
2 UniEAP RIA開發。
3 UniEAP V4的開發流程。
4 Eclipse IDE的使用。
手冊的結構
手冊分主要內容包括五章：
第一章 UniEAP WorkShop簡介。本章對UniEAP V4，UniEAP WorkShop的概念，開發模式，定位等進行了簡述，幫助您瞭解UniEAP V4 Workshop的背景知識。
第二章 安裝與配置。本章節描述了正是使用UniEAP V4 WorkShop前，須要進行的安裝和必要基本配置的操做和設置方法。
第三章 快速入門。一個簡單的樣例，爲您展現使用UniEAP V4開發的全過程。
第四章 WorkShop使用指南。按功能點介紹WorkShop每個功能的詳細使用方法。
第五章 組織機構和安全。介紹UniEAP V4工程自帶的組織機構和安全組件的功能和管理控制檯的使用方法。
閱讀建議
若是您手中沒有一個能夠正常運行的UniEAP V4 WorkShop，請先閱讀第二章，進行安裝配置。
若是您沒有使用過UniEAP V4進行過開發，建議您學習第三章快速入門來感覺UniEAP V4的開發過程。
若是您是一個UniEAP V4的開發人員，對WorkShop的功能使用有問題時，能夠查閱第四章得到幫助。
若是您想了解UniEAP V4的組織機構和安全組件的功能以及管理控制檯的基本使用方法，請查閱第五章。
本手冊中會出現一些UniEAP V4或和V4相關的概念，若是您不清楚它的含義，請查詢附錄。
手冊約定
閱讀本手冊時，您可能會看到以下標記，其含義以下：
【提示】：表示某些信息，讀者能夠參考。
【技巧】：表示讀者能夠參考其中介紹的技巧，提升效率。
【注意】：提醒讀者關注某些事項，這些事項對您後續操做形成影響。
【警告】：請讀者千萬注意某些事項，不然可能會形成嚴重錯誤。
第1章 UniEAP V4 簡介
1.1 UniEAP V4 簡介
隨着業務複雜性的不斷提高，軟件規模變得更加複雜。在技術層面上，如何下降軟件實現的複雜性並可適應業務的快速變化，也衍生出相應的解決方案，典型的如組件化封裝和麪向服務的功能提供方式，能夠顯著的促使生產效率的提高；從下降開發成本角度考慮，特別是對於在相關領域積累多年的企業來講，經過基於可複用資產開發，也是一個務實和不可或缺的手段。
同時，隨着當前業界對於SOA、雲計算的技術的研究和成功應用，不少企業也逐步認識到了把企業現有的資源做爲服務對外提供的重要性和必要性，而體現企業核心智慧的可複用資產做爲服務進行提供，對於企業價值的進一步提高尤爲具有重要意義。
從東軟內部各個行業事業部來看，它們其中一些行業事業部有着多年的領域經驗，也積累必定規模的業務資產，可是在面對一個新的軟件系統開發時，並不可以在已有的業務資產中有效的識別和利用可複用的業務資產，於是制約了其快速構件新系統的能力；還有一些行業事業部它們缺少領域經驗是新興的行業事業部，此類行業線因爲尚未在行業經驗上積累大量資產，指望經過很強的快速開發能力，迅速把業務需求轉變成功能實現，並指望這些功能實如今將來可以做爲可複用資產在新的項目中加以重複使用。
咱們指望有一套新的開發方法和開發平臺可以提升軟件開發的資產複用的能力和快速開發的能力。
UniEAP V4正是這樣一款集合了新的開發方法的業務基礎開發平臺。軟件產品線的開發方法指導軟件開發者採用資產複用而非重複開發的方式來進行軟件生產的方法。業務基礎軟件平臺是指以業務導向和驅動的、可快速構建應用軟件的軟件平臺。
UniEAP V4是面向軟件產品線的業務基礎平臺，其核心技術定位是組件化，即基於組件複用和裝配的方式來快速構建企業應用。
1.2 UniEAP V4 的開發模式
UniEAP V4採用面向軟件產品線的開發思想，將開發過程分爲核心資產積累（領域工程）與應用開發（應用工程）兩個階段。核心資產積累階段，經過對所面向領域的業務、已有項目經驗，已積累軟件資產的不斷抽象，總結其差別，造成一套穩定的核心資產以及詳細的項目差別點描述（可變點）；應用開發階段，根據核心資產與實際需求的差別，配置可變點的值，實現應用快速組裝。軟件產品線的開發模式，能夠有力推進「解決方案產品化」，持續提高生產率，下降開發成本。
目前UniEAP V4的開發模式已經在公司部分事業部有過成功應用，如社保，公衛，勞動力，國土，電信，移動等。這些事業部使用UniEAP V4開發其業務基礎平臺，積累核心資產，在實際項目中，利用裝配的方式快速組裝出產品。
1.3 UniEAP V4 WorkShop的定位
UniEAP V4 WorkShop是UniEAP V4進行模型化開發的核心工具，對於UniEAP V4的各種模型，WorkShop均提供了良好的編輯工具，對於View模型，WorkShop還提供了圖形化、高效的編輯工具UIDesigner。此外，WorkShop實現了Web應用的組件化，並提供了必定的管理功能；WorkShop對UniEAP V4的業務模板，功能模板，控件模板提供了全面的支持，各種模板都可方便地生成模型代碼；對於產品可變點，Workshop提供了特徵樹設置工具和基於特徵的裝配工具，實現了可變點的管理與靈活配置。

第2章 安裝與配置
本章介紹UniEAP V4 WorkShop安裝與配置的方法，若是您手中尚未一個可用的UniEAP V4 WorkShop環境，請仔細按照本章內容操做。
2.1 安裝UniEAP V4 Workshop
2.1.1 UniEAP V4 WorkShop運行環境
UniEAP V4 WorkShop的推薦運行環境以下：
運行環境項目 推薦值
計算機 CPU：英特爾酷睿2 E4500或以上
內存：2GB或以上
硬盤：40G或以上
操做系統 Windows XP、Windows 7
Eclipse版本 3.5.2GA
硬盤空間 40G以上
2.1.2 JDK 以及環境變量配置
UniEAP V4 WorkShop推薦使用的JDK版本爲1.5。安裝JDK後，須要設置環境變量，大體分爲如下三個步驟：
1. 設置JAVA_HOME。具體操做爲：右鍵「個人電腦」> 「屬性」> 「高級」> 「環境變量」，在「系統變量」點擊 <新建> 按鈕，彈出編輯對話框，新增變量名爲JAVA_HOME，變量值爲JDK的安裝路徑，點擊 <肯定> 按鈕完成。以下圖所示：

圖 1 配置JAVA_HOME
2. 設置PATH。具體操做爲：右鍵「個人電腦」> 「屬性」> 「高級」> 「環境變量」，在「系統變量」點擊 <新建> 按鈕，彈出編輯對話框，新增變量名爲PATH，變量值爲JDK的bin路徑，點擊 <肯定> 按鈕完成。爲了方便，能夠直接輸入%JAVA_HOME%\bin，後面用「；」隔開。以下圖所示：

圖 2 配置PATH
3. 設置CLASSPATH。具體操做爲：右鍵「個人電腦」> 「屬性」> 「高級」> 「環境變量」，在「系統變量」點擊 <新建> 按鈕，彈出編輯對話框，新增變量名爲CLASSPATH，變量值爲JDK的lib路徑和tools.jar文件路徑，點擊 <肯定> 按鈕完成。爲了方便，能夠直接輸入%JAVA_HOME%\lib；%JAVA_HOME%\lib\tools.jar，後面用「；」隔開。以下圖所示：

圖 3 配置CLASSPATH
【注意】配置環境變量時最好不要帶中文。
2.1.3 Eclipse啓動參數的配置
Eclipse的啓動參數是在eclipse.ini文件中進行配置的，主要包括如下三方面：
1. 虛擬機堆棧參數設置
參數中-vmargs的意思是設置Java虛擬機的啓動參數。
-Xms80m -Xmx512m，是設置JVM中的堆內存分配，JVM初始分配的內存由-Xms指定，JVM最大分配的內存由-Xmx指定。
-XX:PermSize=256m -XX:MaxPermSize=512m，是設置JVM中的非堆內存分配，-XX:PermSize設置非堆內存初始值，-XX:MaxPermSize設置最大非堆內存的大小。
這些配置可能在有些機器上致使eclipse沒法啓動。出現這種狀況的緣由是-Xmx的值和-XX:MaxPermSize的總和超過了JVM可用內存的最大限制，好比當前操做系統最大內存限制，或者實際的物理內存等等。能夠根據機器具體的狀況，將-Xmx和-XX:MaxPermSize的配置調低。
2. 用戶信息設置
若想全英文顯示Workshop，需在eclipse.ini文件中添加：
-Duser.language=en
若想設置默認的用戶信息，需在eclipse.ini文件中添加：
-Duser.name=用戶名
3. 字符集參數設置
若想設置Java文件的字符集爲中文字符，需在eclipse.ini文件中添加：
-Dfile.encoding=UTF-8
2.1.4 安裝WorkShop Eclipse插件
啓動Workshop後，打開「幫助」菜單，選擇「關於UniEAP Workshop」菜單項，以下圖所示。

圖 4 關於UniEAP Workshop
點擊 <安裝細節> 按鈕，會彈出「UniEAP Workshop安裝細節」對話框，切換到「插件」頁，以下圖所示。注意觀察紅色區域，能夠看到安裝了哪些Workshop Eclipse插件。這些插件缺一不可，於是要仔細排查。

圖 5 插件列表
2.1.5 經常使用第三方插件推薦
插件名稱 簡介
JSEclipse 小巧，免費，功能強大的javascript編輯器。
Oracle Enterprise Pack for Eclipse（OEPE） Oracle提供的企業編程插件，提供了Weblogic調試功能。
Propedit 編寫國際化properties文件的Eclipse插件。
Veloeclipse 在Eclipse下編輯Velocity模板的插件，支持語法着色，代碼嚮導等功能。
Hibernate Tools Hibernate官方插件，其包含的Hibernate Console能夠直接執行HQL語句，查看運行結果，極大提升HQL編寫效率。
Subclipse 使用SVN進行代碼控制環境下，建議使用的客戶端插件。
2.1.6 插件安裝失敗的處理方法
若是發現workshop插件沒有正常加載，請先確認本機jdk的版本是否低於插件的編譯級別，若是不是這個問題，請嘗試如下處理方法：
1. 啓動eclipse時加上 -clean參數
2. 將eclispe安裝目錄下configuration目錄下的config.ini里加入以下語句便可讓eclipse強制搜索插件:osgi.checkConfiguration=true
3. 刪除eclipse安裝目錄下的configuration目錄下的org.eclipse.update目錄
4. 若是以上3種方法均不起做用，則打開eclispe安裝目錄下configuration目錄下的org.eclipse.equinox.simpleconfigurator目錄下的bundles.info文件，在裏面手動加入插件的信息。
2.2 配置UniEAP V4 WorkShop
2.2.1 切換到UniEAP透視圖
啓動Workshop後，默認會打開UniEAP透視圖，以下圖所示。

圖 6 UniEAP透視圖
當打開的透視圖非UniEAP透視圖時，打開「窗口」菜單，選擇「打開透視圖」菜單項，點擊「其餘」會彈出「打開透視圖」對話框，選擇UniEAP（缺省值）則會切換到UniEAP透視圖，以下圖所示。

圖 7 打開透視圖
2.2.2 設置源碼默認包路徑前綴
爲了方便用戶使用，咱們提供一個統一的入口，來設置源碼默認包路徑前綴。當用戶建立一個BO模型，DAO模型，DTO模型或者View模型時，建立的模型源碼文件的包名將由如下部分組成：源碼默認包路徑前綴+該模型所在SC名稱+該模型所在DC名稱。

圖 8 默認包路徑前綴

2.2.3 設置Web瀏覽器
eclipse內置瀏覽器在某些狀況下會致使jvm異常關閉。因此請用戶在使用v4以前務必將eclipse的默認瀏覽器設置成外部瀏覽器，操做以下：選擇「窗口」>「首選項」，在首選項對話框中選擇「常規」>「web 瀏覽器」，選擇「使用外部web瀏覽器」，點擊完成。以下圖所示：

圖 9 設置WEB瀏覽器

若是選擇的是IE，可能在每次預覽時，IE會自動彈出以下討厭的提示：

圖 10 用IE瀏覽器預覽時的提示
這時選擇IE的「工具」>「Internet選項」，選擇「高級」tab頁，在「安全」下找到「容許活動內容在個人計算機上的文件中運行*」，勾選上點擊應用（以下圖所示），重啓IE，之後就不會再彈出提示了。

圖 11 IE瀏覽器設置
2.2.4 校驗設置
若是是新建的工做空間，會看到歡迎界面，關閉掉。找到菜單欄中的「窗口」>「首選項」 在彈出的首選項對話框左側的列表裏選擇「Validation」，將「Suspend all validators」勾選上，點擊應用按鈕。完成後的效果以下圖所示：

圖 12 校驗設置
接下來還須要去掉jsp的片斷校驗，在首選項對話框中選擇「Web」>「JSP Files」>「Validation」，將「Validate JSP fragments」勾選去掉，點擊應用按鈕。完成後的效果以下圖所示：

圖 13 JSP校驗設置
第3章 快速入門
3.1 開發樣例功能描述
本章主要介紹用戶在使用UniEAP V4時，如何在Workshop中建立一個新的工程，並開發一些基本的功能。以下圖所示。上邊爲查詢條件。下方爲查詢結果顯示。
圖14 開發功能顯示界面
當輸入查詢條件後點擊<查詢>按鈕。來顯示查詢的數據。
點擊<修改>按鈕，彈出對話框，對話框裏顯示用戶信息。可對其信息進行修改等操做。彈出對話框以下圖所示。

圖15 彈出對話框視圖
修改對應信息後點擊<保存>按鈕。來保存修改後的信息。點擊< 重置>按鈕來返回原來信息。
3.2 安裝及準備工做
3.2.1 準備數據庫腳本
將咱們提供的oracle數據庫腳本導入oracle數據庫中。其中包括了UniEAP V4啓動所需的全部支撐數據庫表。
3.2.2 導入V4工程
首先，打開Workshop，創建一個新的Workspace，進入以下界面：

圖16 Workshop主界面
而後，點擊Workshop工具欄上的「項目（P）」選項，在彈出的菜單上取消「自動構建（M）」的勾選，以下圖所示：

圖17 取消自動構建
以後，在「UniEAP資源管理器」透視圖內點擊鼠標右鍵，在彈出菜單中點擊「導入」選項，以下圖所示：

圖18 打開導入工程菜單
其後，在彈出的「導入」對話框中，點擊「現有項目到工做空間中」選項，以下圖所示：

圖19 選擇導入的方式
隨後，點擊「下一步（N）>」按鈕，進入「導入」的複選菜單中。點擊「瀏覽（R）…」按鈕，選擇咱們提供的V4工程，以下圖所示：

圖20 選擇要導入的工程
最後，點擊「完成（F）」按鈕，並等待代碼生成完畢。此時點擊Workshop上的「項目（P）」選項，在彈出的菜單中勾選「自動構建（M）」選項，等待工程構建及發佈完成。
工程發佈完成後，再次點擊Workshop上的「項目（P）」選項，在彈出的菜單中點擊「清理（N）…」選項，以下圖所示：

圖21 打開清理項目菜單
在彈出的「清理」對話框中點擊「清理全部項目」選項，以下圖所示：

圖22 選擇須要清理的項目
點擊「肯定」按鈕，等待全部項目清理完成後便可。
3.2.3 配置數據庫鏈接
首先，打開「打開資源」對話框（快捷鍵爲：Ctrl+Shift+R），在對話框中輸入「EAPConfig」，在「匹配項（M）」列表中雙擊文件名爲「EAPConfig」，後方的實際路徑爲「patch/webroot/WEB-INF/conf/platform/core」的文件，以下圖所示：

圖23 選擇patch工程中的EAPConfig文件
而後，在打開的EAPConfig文件中，配置要鏈接數。以下圖所示。

圖24 修改EAPConfig中的數據庫連接信息
最後，保存該文件便可。
3.3 樣例開發
本節介紹如何使用UniEAP V4快速開發一個樣例，該樣例包括對數據庫單表的查詢和修改功能；其中查詢功能支持翻頁，修改功能涉及到兩個頁面之間的數據傳遞。
3.3.1 創建軟件組件（SC）和開發組件（DC）
首先，在「UniEAP資源管理器」透視圖內的根目錄上點擊右鍵，在彈出的菜單中點擊「新」選項，再在彈出的二級菜單中點擊「UniEAP 軟件組件」選項，以下圖所示：

圖25 打開創建軟件組件菜單
而後，在「新建軟件組件」對話框中輸入新軟件組件的ID和名稱，其中ID是必填項；名稱通常爲中文標識，是在UniEAP 資源管理器上的顯示名稱，咱們這裏將軟件組件的ID和名稱都填寫爲「demo」，以下圖所示：

圖26 輸入新軟件組件的ID和名稱
以後，點擊「完成（F）」按鈕以實現軟件組件的創建。
其後，在剛剛新建的軟件組件上點擊右鍵，在彈出的菜單中點擊「新」選項，再在彈出的二級菜單中點擊「UniEAP 開發組件」選項，以下圖所示：

圖27 打開創建開發組件菜單
隨後，在「新建開發組件」對話框中，輸入新開發組件的ID和名稱，其中ID是必填項；名稱通常爲中文標識，是在UniEAP 資源管理器上的顯示名稱，咱們這裏將軟件組件的ID和名稱都填寫爲「test」，以下圖所示：

圖28輸入新開發組件的ID和名稱
最後，點擊「完成（F）」按鈕以實現開發組件的創建。
3.3.2 創建模型
模型是UniEAP V4的一大特色，下面的內容將簡要介紹一下entity和view模型的開發過程。
3.3.2.1 Entity模型
首先，打開剛剛創建的開發組件，展開「metamodel」文件夾，在其中的「entity」文件夾上點擊右鍵，在彈出的菜單中點擊「新」選項，再在彈出的二級菜單中點擊「Entity 模型」選項，以下圖所示：

圖29 打開創建entity模型菜單
而後，在彈出的「新建Entity模型」對話框中輸入和EAPConfig中相同的數據庫連接信息；點擊「測試鏈接」按鈕，若是提示「測試鏈接成功」則點擊「下一步（N）」按鈕，以下圖所示。

圖30 測試數據庫連接
以後，在下一個對話框中，先點擊「刷新」按鈕，待「表或視圖」列表中出現數據庫的內容後，勾選須要的表或視圖（在此咱們以UP_ORG_USER表爲例），以下圖所示：

圖31 創建entity模型和數據庫表的關聯關係
最後，點擊「完成（F）」按鈕便可完成entity模型的建立。
3.3.2.2 View模型
首先，打開剛剛創建的開發組件，展開「metamodel」文件夾，在其中的「view」文件夾上點擊右鍵，在彈出的菜單中點擊「新」選項，再在彈出的二級菜單中點擊「View 模型」選項，以下圖所示：

圖32 打開創建view模型菜單
而後，在彈出的 「新建頁面模型」對話框中輸入該view模型的名稱，在此咱們將其命名爲「test」，以下圖所示：
圖33 輸入view模型的信息
最後，點擊「完成（F）」按鈕便可。
3.3.3 頁面開發過程
這裏主要介紹頁面開發的簡要流程和基本的頁面佈局及簡單的前臺JS代碼。
3.3.3.1 創建數據集
首先，打開「數據集」透視圖，點擊右上角的「 」圖標，以下圖所示：

圖34 打開數據集透視圖
而後，在彈出的「新建DataStore」對話框中雙擊左側的entity模型，這時能夠在左上方的「名稱」輸入框中修改該數據集的名稱，例如咱們創建了一個名爲「upOrgUser1」的數據集，以下圖所示：

圖35 創建數據集和entity的關聯關係
最後，點擊「完成（F）」按鈕，再保存view模型便可完成數據集的創建。
按照上述方法再創建一個不一樣名但同entity的數據集，例如咱們又創建了一個名爲「upOrgUser2」的數據集，後面將做爲查詢條件的數據集爲Form模式控件所綁定，以下圖所示：

圖36 創建第二個數據集
3.3.3.2 過程調用
首先，雙擊「UniEAP資源管理器」透視圖內的view模型，進入「過程調用」tab頁。
而後，點擊左上角的「增長」按鈕，下方的「基本信息」列表中會出現一個新的方法，這時修改「方法名」中的內容能夠爲這個過程調用重命名；如今咱們以實現分頁查詢功能爲例，創建一個名爲「queryProcesser」的方法，以下圖所示：

圖37 創建過程調用
以後，爲過程調用選擇它要依賴的BO。點擊右上角的「增長」按鈕，以下圖所示：

圖38 過程調用選擇依賴BO
其後，在彈出的「增長依賴BO」對話框中，先將「過濾規則」下拉框的內容選爲「當前DC可見的BO」，再雙擊上方的「commonBO.bo」選項，以下圖所示：

圖39 選擇依賴BO菜單
隨後，爲過程調用選擇它要自動調用的bo方法。點擊右下角的「選擇…」按鈕，以下圖所示：

圖40 過程調用選擇自動調用bo方法
而後，在彈出的「選擇BO方法」對話框中，將「選擇依賴的BO」下拉框的內容選爲「commonBO – core」，再雙擊下方列表中的「findByExample（Object,int,int）」方法，以下圖所示：

圖41選擇BO方法菜單
接着，爲過程調用剛剛選擇的bo方法設置參數，點擊左下角的「增長」按鈕，以下圖所示：

圖42 過程調用設置BO方法的參數
最後，在彈出的「增長參數」對話框中輸入一個參數，而後點擊「肯定」按鈕，如此重複三次；每次的輸入內容分別以下圖所示：

圖43 設置過程調用的參數

3.3.3.3 模式控件
首先，雙擊view模型，進入「設計」tab頁，打開左側的「模式控件」菜單，點擊「QueryGrid」選項，以下圖所示：

圖44 選擇模式控件
而後，將鼠標移動到右側的空白區域，這時會發現鼠標的圖標有所改變（右下方出現一個虛線的矩形和一箇中心帶十字花的實線矩形），點擊鼠標左鍵以進入「新建模式控件」對話框；將「Grid數據集」下拉框的內容選爲剛剛創建的第一個數據集（UpOrgUser1），將「Grid控件類型」下拉框的內容選爲「XGrid」，」Grid選擇類型」下拉框的內容選爲「single」，「選擇過程調用」下拉框的內容選爲剛剛創建的過程調用（queryProcesser），以下圖所示：

圖45 創建Grid模式控件
以後，點擊「下一步（N）」按鈕，進入「新建模式控件」對話框，將「數據查詢條件」下拉框的內容選爲另外一個數據集（UpOrgUser2），在「控件信息列表」中取消沒必要要的勾選，以下圖所示：

圖46 創建Form模式控件
點擊「完成」後，保存view模型便可。
通過上述的步驟，查詢的樣例開發基本完成；但還缺乏對數據的修改功能及多頁面交互的過程，所以下一小節主要介紹經過對話框實現多頁面之間的交互過程。
3.3.3.4 多頁面交互
首先，按照上述過程再開發一個頁面，將其命名爲「test2」，一樣要先創建一個數據集，以下圖所示：

圖47 創建數據集
而後，進入這個view模型的「過程調用」tab頁，增長一個新的過程調用，在此咱們將其命名爲「updateProcesser」，其依賴BO的選擇過程和上述相同，「自動調用BO方法」中的選擇以下圖所示：

圖48 選擇BO方法
「參數列表」的內容以下圖所示：

圖49 編輯參數
以後，進入view模型的「設計」tab頁，此次選擇一個Form的模式控件，以下圖所示：

圖50 選擇form模式控件
其後，進入「新建模式控件」對話框，在這個對話框內能夠對form的佈局進行修改，例如咱們把「Form總列數」修改成4，而且能夠勾選「自定義列寬」選項來對form中每一列的大小進行設置，以下圖所示：

圖51 Form模式控件修改樣式
隨後，點擊「下一步（N）>」按鈕，在這個對話框中將「選擇數據集」下拉框的內容選爲剛剛創建的數據集（upOrgUser1），在「控件信息列表」中取消沒必要要的勾選（例如數據庫表的主鍵字段等），同時將「選擇過程調用」下拉框的內容選爲剛剛創建的過程調用（updateProcesser），以下圖所示：

圖52 Form模式控件選擇數據集
最後，點擊「完成（F）」按鈕結束form模式控件的創建。
下面介紹一些頁面佈局的技巧：
首先，返回第一個view模型，進入「設計」tab頁，選擇左側的「基本控件」菜單，先點擊「Button」選項，再點擊右側「查詢」按鈕前的空白處，以下圖所示
圖53 添加button
而後，點擊新增button圖標右上角的小三角，如圖 ，在彈出的「button快速設置」對話框中能夠修改button的ID、顯示名稱和寬度，在這裏咱們修改了button的控件名稱和控件寬度，以下圖所示：

圖54 修改button屬性
這時會發現button的佈局並不理想，以下圖所示：

圖55 頁面button的佈局（修改前）
咱們須要修改button所在的toolbar控件來實現佈局的合理化。
首先，在右側的「大綱」透視圖中點擊「grid1_ToolBarInfo」控件（同時要保持view模型處於「設計」tab頁狀態），以下圖所示：

圖56 找到toolbar
而後， view模型的「設計」tab頁中會有一個控件被框選中，而且在框選的右上角出現一個 ，點擊這個 進入「TableLayout快速設置」對話框，如今咱們將「第5列寬度」改成「145px」，以下圖所示：

圖57 修改toolbar佈局
最後，保存view模型，這樣button的佈局就設置完成了，以下圖所示：

圖58 頁面button的佈局（修改後）
下面介紹如何設置對話框。
首先，進入view模型的「設計」tab頁，打開左側的「容器」菜單，點擊「XDialog」控件，以下圖所示：

圖59 選擇XDialog控件
而後，點擊右側的空白區域，將XDialog控件添加進頁面，以下圖所示：
圖60 添加XDialog控件
以後，點擊XDialog上的 ，打開「XDialog快速設置」對話框，點擊 選項，以下圖所示：

其後，在彈出的「增長當前view依賴的view」對話框中選擇咱們後開發的view模型（test2頁面），以下圖所示：

圖61 選擇XDialog的引用頁
最後，點擊「肯定」按鈕，再保存view模型便可。
如今，咱們須要編寫一些JS代碼完成兩個頁面之間的交互過程,共有以下4個步驟：
打開第一個頁面的view模型（test頁面），進入「設計」tab頁，展開「修改」button的「Button快速設置」對話框，點擊「事件」下的「編輯onClick事件」超連接，以下圖所示：

圖62 編輯button的onClick事件
在其中添加以下的JS代碼：
var gridId = view.grid.getPropertyValue("grid1", "id");
if (gridId != null) {
var dialog = unieap.byId("xdialog1");
var gridDS = view.grid.getRow("grid1");
dialog.dialogData = gridDS;
dialog.show();
} else {
MessageBox.alert( {
title : '確認框',
message : '請選擇一條記錄!'
});
}
1) 打開第二個view模型（test2頁面），進入「腳本」tab頁，將上方的兩個下拉框的內容分別選爲「page」和「load（）」，以下圖所示：

圖63 編輯page的load事件
var gridDS = unieap.getXDialog().getObject();
view.form.setDataStore("form1", gridDS);
在其中添加以下的JS代碼：
這樣就實現了將test頁面的數據經過對話框傳遞到test2頁面中。
下面介紹test2頁面經過對話框回傳數據到test頁面：
2) 打開第二個view模型（test2頁面），進入「腳本」tab頁，將上方的兩個下拉框的內容分別選爲「公共方法」和「updateProcesserSuccess（dc）」，以下圖所示：

圖64 編輯公共方法的updateProcesserSuccess事件
在其中添加以下的JS代碼：
var formDS = dc.getDataStore("result");
unieap.getXDialog().setReturn(unieap.toJson(formDS));
unieap.getXDialog().close();
3) 打開第一個view模型（test頁面）的「設計」tab頁，展開 XDialog的「XDialog快速設置」菜單，點擊「事件」下的「編輯onComplete事件」超連接，以下圖所示：

圖65 編輯XDialog的onComplete事件
以後，在其中添加以下的JS代碼：
var gridDS = unieap.fromJson(returnObj);
view.grid.updateRow("grid1", gridDS);
如此便完成了整個修改功能。
3.4 部署TOMCAT服務器
若是想要訪問剛剛開發完成的頁面，首先，打開「Servers」透視圖，在彈出的菜單中點擊「New」選項，再在彈出的二級菜單中點擊「Server」選項，以下圖所示：

圖66 創建Server
而後，在彈出的「New Server」對話框中展開「Apache」根目錄，選擇相應的Tomcat類型，這裏以Tomcat6.0版本爲例，以下圖所示：

圖67 選擇Tomcat做爲服務器
以後，點擊「下一步（N）」按鈕，再下一個對話框中先點擊「Browse…」按鈕，選擇一個本地的Tomcat程序，以下圖所示：

圖68 選擇一個本地的Tomcat
其後，先點擊「下一步（N）」按鈕，再點擊「Add All」按鈕，以下圖所示：

圖69 選擇web服務的內容
最後，點擊「完成（F）」按鈕便可。
下面介紹下如何啓動Tomcat及訪問頁面：
首先，點擊「Servers」透視圖內的「Tomcat v6.0 Server at localhost [stopped]」選項，再點擊右上角的 ，以下圖所示：

圖70 啓動Tomcat服務
而後，打開web瀏覽器，這裏以IE 8.0爲例進行介紹，在地址欄中輸入以下的內容：「http://localhost:8080/framework/demo/test/test-view.jsp」，就能夠訪問頁面並體驗查詢和修改的功能了。
第4章 Workshop工具簡介
4.1 工具欄
UniEAP透視圖的工具欄包含 和 兩組。前者是與可視化UI設計器緊密相關的，它們依次爲「Undo」、「Redo」、「Delete」、「在上方插入行」、「在下方插入行」、「在左側插入列」、「在右側插入列」、「刪除行」、「刪除列」、「合併單元格」、「取消單元格合併」、「預覽」和「資源引用」按鈕。這13個按鈕與可視化UI設計器具備相同的生命週期，隨着設計器的打開而出現，關閉而消失。後者依次爲「打開及上傳模板」、「發佈啓禁」及「模型升級工具」按鈕。具體功能將在之後章節中詳細介紹。
4.2 UniEAP 資源管理器
UniEAP資源管理器視圖位於Workshop的左側區域，是開發使用UniEAP工程的核心操做區域。這裏能夠看到井井有條的UniEAP工程目錄，以下圖所示。

圖 71 UniEAP資源管理器視圖
【提示】：當UniEAP資源管理器消失時，首先確認，當前透視圖是否爲「UniEAP透視圖」。若是不是，請切換至「UniEAP透視圖」；如已經爲「UniEAP透視圖」，則選擇 「窗口」>「顯示視圖」>「其餘」菜單項，彈出以下對話框：

圖 72 打開UniEAP資源管理器視圖
選擇「UniEAP資源管理器」，點擊<肯定>按鈕，完成視圖的打開設置。
4.3 Problems視圖
Problems（問題）視圖是主要用於顯示Java代碼編譯、各種文件校驗產生的錯誤或警告信息。以下圖所示。

圖 73 Problems視圖
4.4 錯誤日誌視圖
錯誤日誌（ErrorLog）視圖是用來記錄Workshop啓動、運行和關閉時出現的異常等錯誤信息，在使用WorkShop時出現問題時，這些信息對排查問題緣由幫助很大。以下圖所示。

圖 74 Problems視圖
4.5 特性視圖
特性（Properties）視圖是用於打開可視化UI設計器時設置控件的屬性或事件信息。以下圖所示。（UI設計器關閉時，視圖無效）

圖 75 特性視圖
4.6 控制檯視圖
控制檯（Console）視圖主要用來顯示UniEAP V4模型生成代碼和Build相關信息，Tomcat服務啓動、運行和關閉信息，以及調試和運行過程當中出現的異常堆棧信息。以下圖所示。

圖 76 控制檯視圖
4.7 Servers視圖
Servers視圖用於管理本地用於測試的應用服務器。能夠執行新建、調試、啓動、清理和刪除應用服務器的操做。以下圖所示。

圖 77 Servers視圖
4.8 數據集視圖
數據集（DataSet）視圖是用來執行新建、刪除view模型所使用的Datastore。詳細使用方法見「使用可視化UI設計器」章節。（UI設計器關閉時，視圖無效）

圖 78 數據集視圖
4.9 工具插件自動升級
首先用戶須要取得UniEAP最新工程，覆蓋服務器上原有工程併發布，工程結構以下圖所示：

圖 79 工程目錄
此時便可經過配置升級URL來進行插件更新，須要升級的用戶須要在首選項——UniEAP——Update中配置更新站點的URL，該URL只須要修改一次，如更新地址再也不變更則用戶不須要再次進行修改。
點擊「help」菜單——選擇「UniEAP 插件更新」，如圖所示：

圖 80 插件升級菜單
系統會自動從網上下載最新的插件feature，對比本地feature版本號，若是相同，則彈出對話框提示不須要升級，以下圖所示：

圖 81 插件升級提示
如網上的版本爲較新版本，則彈出確認對話框，以下圖所示：

圖 82 異構懶加載樹
【注意】release note暫以Tomcat的版本說明替代。
點擊<升級>按鈕後，會自動下載最新版本插件並替換原有插件，同時更新本地feature版本。
更新結束後會彈出對話框，須要用戶確認是否重啓workshop，以下圖所示：

圖 83 確認視圖
【注意】因爲使用eclipse自帶的彈出對話框，同時測試版本使用的是英文環境，故該對話框語言爲英文，中文環境即爲中文對話框。
第5章 組件化開發使用指南
5.1 UniEAP工程結構簡介
5.1.1 UniEAP V4 工程結構一覽
典型的UniEAP工程結構以下圖，其圖標以下。簡單介紹如下幾個圖標的含義：

圖 84 UniEAP工程結構
1. ：UniEAP工程。
2. ：軟件組件(Software Component)。
3. ：開發組件(Development Component)。
4. ：補丁工程（Patch）。
【提示】：上述四種不一樣的工程的詳細內部結構，將在下面章節中詳細介紹。
5.1.2 UniEAP工程
（原理簡介，說明包含的重要文件夾，文件以及其意義）
5.1.3 軟件組件
軟件組件（SC）工程結構以下圖所示：

圖 85 SC工程目錄結構
軟件組件中一般不包含程序代碼，僅包含配置文件和軟件組件的描述文件（feature.xml）。
content文件夾用於存放軟件組件的配置文件和頁面文件等資源。其中conf文件夾下是配置文件。applicationContext.xml和struts.xml分別爲Spring和Struts的配置文件。generated文件夾下的配置文件是由系統自動生成的，請不要直接修改。
【提示】若是須要在SC中添加自定義的Spring和Struts配置，修改SC下的content/conf/applicationContext.xml和content/conf/struts.xml便可。
軟件組件描述文件feature.xml記錄該SC的描述信息，以及包含開發組件（DC）的信息。
【警告】不要刪除「/content/conf/」下的「applicationContext-import.xml」及「struts.xml」文件，會形成Unieap工程沒法正常啓動。
5.1.4 開發組件
開發組件（DC）工程結構以下圖所示：

圖 86 DC工程目錄結構
src文件夾爲開發組件的源碼文件夾，保存開發組件的Java源碼。
content文件夾下存放開發組件的頁面文件、資源文件和配置文件。
其中：
 content/conf保存開發組件的配置文件，包含Spring，Struts和Hibernate的配置文件和緩存配置文件(ehcache.xml)、日誌配置(log4j.xml)和Web應用描述文件（web.xml）。ehcache.xml ，log4j.xml ，web.xml 中存放該開發組件緩存，日誌和Web應用的配置片斷（這些配置文件中僅包含該開發組件的配置，並不是整個工程的完整配置，這三個配置文件中的片斷將自動合併到UniEAP工程中）。generated文件夾下的內容爲系統自動生成，請不要自行修改。
applicationContext.xml和struts.xml分別爲Spring和Struts的配置文件。若是須要在DC中添加自定義的Spring和Struts配置，直接修改這兩個文件便可。
 content/tld文件夾用於存放該開發組件包含的標籤庫定義文件。
 content/view文件夾下用於存放該開發組件View模型生成的頁面文件，JS腳本文件。用戶能夠自行添加一些資源文件，如圖片等。generated文件夾下的內容爲系統自動生成，請不要直接編輯。

lib文件夾用於存放該開發組件所包含的JAR包。用戶能夠自行添加。該文件夾中JAR包將被自動發佈到UniEAP工程WebRoot/WEB-INF/lib下。

META-INF文件夾中包含DC的配置信息，其中只有一個文件MENIFEST.MF。該配置文件記錄了DC的基本信息（標識、版本、名稱），依賴DC信息和公共部件（PublicPart）的定義。
metamodel文件夾中包含本開發組件下的各種模型定義文件。按照模型類型放在不一樣子文件夾中。以下圖所示：

圖 87 metamodel文件夾目錄結構
build.properties文件中包含本開發組件構建信息，一般不須要關心。
features.xml爲該開發組件的特徵描述文件，用於描述開發組件包含的特徵以及可變點。雙擊便可打開特徵建模工具。
5.1.5 Patch工程
Patch工程結構以下圖所示：

圖 88 Patch工程文件結構目錄
其中：
 src：該文件夾保存待更新的源碼文件。
 META-INF：該文件下僅有一個MANIFEST.MF配置文件，記錄該Patch工程信息及依賴關係等。
 webroot：一個標準web工程的WebRoot目錄（結構與UniEAP工程的WebRoot徹底相同）。
 build.properties：包含該Patch工程的構建信息，一般不須要關心。
5.2 使用UniEAP 工程
5.2.1 新建UniEAP工程
在「UniEAP資源管理器」中空白處單擊鼠標右鍵，在彈出菜單中點擊「新建」->「UniEAP 工程」菜單項。

圖 89 新建UniEAP工程右鍵菜單
新建UniEAP工程嚮導彈出，以下圖：

圖 90 新建UniEAP工程嚮導
在「基本信息」中輸入「工程名稱」和Web應用的「上下文根」。
默認狀況下「保存在默認工做空間中」是勾選的。在這種狀況下，默認UniEAP工程的全部組件使用平面結構，保存在工做空間中。以下圖所示：

圖 91 默認UniEAP工程存儲結構
這類平面工程存儲結構不便於進行版本控制，所以，UniEAP提供了一個樹狀的工程結構。在新建UniEAP工程嚮導中取消勾選「保存在默認工做空間中」，指定一個默認工做空間之外的路徑，便可使用這種樹狀工程結構。嚮導設置以下圖：

圖 92 啓動樹狀工程結構的設置
樹狀工程結構以下圖：

圖 93樹狀工程存儲結構
完成設置後，點擊<完成>，UniEAP工程將被自動建立。
5.2.2 導入UniEAP工程
首先，在菜單欄中點擊「項目」菜單項，將「自動構建」前面的勾去掉屏蔽該功能。以下圖所示：

圖 94 關閉自動構建功能
在「UniEAP資源管理器」中空白處單擊鼠標右鍵，在彈出菜單中點擊「導入」菜單項。以下圖所示：

圖 95 「導入」菜單項
以後導入嚮導彈出，選擇「常規」->「現有項目到工做空間中」，以後點擊<下一步>。以下圖。

圖 96 選擇「導入」類型
在「選擇根目錄」處選擇要導入UniEAP工程和工程的組件所在的根目錄。以後在「項目」區域，勾選要導入的組件，最後點擊<完成>。以下圖所示：

圖 97 導入工程嚮導頁
【提示】一般不建議勾選「將項目複製到工做空間中」。
點擊<完成>按鈕後，啓用「自動構建」功能，執行全Build，以下圖所示：

圖 98 自動構建嚮導頁
5.2.3 新建仍是導入？
在實際項目開發時，UniEAP不建議使用UniEAP WorkShop自帶嚮導建立UniEAP工程，而是使用導入UniEAP工程的方式，主要有以下幾個緣由：
1 UniEAP WorkShop自帶的核心軟件組件（platform和techcomp）的版本是固化在Workshop中的，在實際項目開發時，應該從UniEAP官方渠道得到最新版本的組件。
2 實際項目開發時，一般是由項目管理員根據實際須要，選擇UniEAP工程結構以及適當的軟件組件和開發組件，上傳至版本控制軟件中。開發人員從版本控制軟件中下載整個工程，以後使用導入的方式，進行本地開發。
5.3 使用軟件組件（SC）
5.3.1 新建軟件組件
在「UniEAP資源管理器」視圖的右鍵彈出菜單中點擊「新建」>「UniEAP軟件組件」菜單項。以下圖所示：

圖 99 新建軟件組件
軟件組件建立嚮導頁面以下圖所示：

圖 100 軟件組件建立嚮導
【提示】當軟件組件爲多應用時，勾選「添加子應用」，並設置子應用顯示標題。
點擊<完成>按鈕，則完成新建軟件組件。
5.3.2 設置組件描述信息
如需設置組件描述信息，請雙擊軟件組件工程下的「feature.xml」文件，彈出界面以下圖所示：

圖 101 配置軟件組件信息界面
在圖中標識處可修改軟件組件的版本和名稱，點擊下面tab頁切換至「信息」頁，可設置該軟件組件描述信息，以下圖所示：

圖 102 設置軟件組件描述信息

5.3.3 設置包含的開發組件
若是您想查看或修改當前開發組件所關聯的開發組件，請雙擊軟件組件工程下的「feature.xml」文件，以下圖所示：

圖 103 概述頁面
切換到「插件」頁面，在頁面左側「插件和段」的列表中顯示的是當前軟件組件關聯的開發組件，具體以下圖所示：

圖 104 當前軟件組件關聯的開發組件
點擊<添加>按鈕，彈出「選擇插件」界面。在「選擇插件」輸入框中輸入要關聯的開發組件，在「匹配項」中會快速過濾定位，以下圖所示：

圖 105 選擇開發組件
在「匹配項」中選擇開發組件後，點擊<肯定>按鈕，「插件」頁面以下圖所示：

圖 106 軟件組件修改後關聯的開發組件
若要刪除關聯開發組件，您在選擇要刪除的開發組件後，點擊鍵盤上的「Delete」按鍵，便可刪除關聯。
點擊「文件」>「保存」菜單項，完成關聯開發組件工做。
5.4 使用開發組件（DC）
5.4.1 新建開發組件
在SC組件的郵件菜單中點擊「新建」>「UniEAP開發組件」菜單項。以下圖所示：

圖 107 新建開發組件
在開發組件建立嚮導頁面中，您須要爲開發組件設置惟一的ID和選擇所屬軟件組件，同時您能夠根據須要爲開發組件建立新的啓動類，具體以下圖所示：

圖 108 新建開發組件
【注意】必須保證開發組件的ID在當前工做空間中惟一。
點擊<完成>按鈕，開發組件建立完成。
5.4.2 設置組件依賴
開發組件可能會依賴其餘開發組件，好比全部的開發組件都依賴「core」和「ria」組件，可是這個依賴關係在建立開發組件時就自動設置了。若是須要依賴其餘開發組件，請雙擊開發組件工程下的「/META-INF/MANIFEST.MF」文件，並切換到「依賴性」頁面，在「必需的插件」列表中列出了當前開發組件所依賴的其餘開發組件，以下圖所示：

圖 109 開發組件依賴性頁面
點擊<添加>按鈕，添加依賴的開發組件。彈出「選擇插件」界面後，在「選擇插件」輸入框中輸入要依賴的開發組件，在「匹配項」中會快速過濾定位，以下圖所示：

圖 110 選擇依賴的開發組件
點擊<肯定>按鈕，即可看到新添加的依賴關係，以下圖所示：

圖 111 新增依賴的開發組件
選擇某依賴的開發組件後，點擊<刪除>按鈕，即可取消依賴。
點擊「文件」>「保存」菜單項，完成依賴設置。

5.4.3 設置公共訪問包（PP）
僅僅設置依賴的開發組件還不可以使用這些開發組件，被依賴的開發組件還須要公開其公共訪問包，這樣依賴其的開發組件才能使用其提供的公開接口。雙擊開發組件工程下的「/META-INF/MANIFEST.MF」文件，切換到「運行時」頁面，在左側「已導出的包」列表中列出的是已經設置的公共訪問包，以下圖所示：

圖 112 設置公共訪問包
點擊<添加>按鈕，選擇要導出的包，能夠一次性選擇多個導出包，以下圖所示：

圖 113 選擇導出包
點擊<肯定>，在「運行時」頁面的「已導出的包」列表中已經列出剛纔選擇的導出包，以下圖所示：

圖 114 新增公共訪問包
選中某導出包後，點擊<刪除>按鈕，即可取消導出。
點擊「文件」>「保存」菜單項，完成公共訪問包的設置。

5.4.4 設置組件描述信息
如需設置開發組件的描述信息，打開該DC下「/META-INF/MANIFEST.MF」文件，打開界面以下圖所示：

圖 115 設置開發組件信息界面
【注意】請不要修改DC的標識值，該標識值對應DC的ID，在工程中惟一。
如圖標誌處可修改該開發組件的版本和名稱。
5.5 設置組件發佈
5.5.1 UniEAP V4組件發佈機制
 什麼是「發佈」？
UniEAP V4 中將Web應用按組件化拆分，進行按組件開發，每一個組件中存儲的均是Web應用的一個片斷。「發佈」則是將分佈於各個組件中的Web應用程序片斷組合到UniEAP工程中，造成一個完整的Web應用的過程。

 「發佈」是如何將組件中的Web應用片斷組合成一個完整Web應用的？
分佈於各個組件中的Web應用程序片斷有如下幾類：
（1） Java類（模型生成的Java文件和用戶自行添加的Java文件）編譯而成的class文件。
（2） Entity模型生成的Hibernate實體定義文件。
（3） View模型生成的JSP、JS文件。
（4） BO、DAO模型生成的Spring配置文件。
（5） View模型生成的Struts2配置文件。
（6） 用戶添加的Web應用頁面（JSP，HTML，JS）、圖片、文本，壓縮包等等文件。
（7） 用戶添加的Web應用所需的JAR包。
（8） Web應用的web.xml，ehcache.xml，log4j.xml文件片斷。

對於上述（1）-（7）類資源，UniEAP V4會按照必定的規則，將上述資源複製UniEAP工程中的WebRoot指定目錄。對於（8）類資源，UniEAP V4會分析其中的內容，與其餘組件合併後輸出到UniEAP工程WebRoot下對應位置。

 如何進行「發佈」，怎麼操做？
「發佈」一般狀況下不須要手動觸發，它會自動在合適的時機進行。
但當關閉Eclipse的「自動構建」時，「發佈」也會中止。
一般狀況下，「自動構建」均應爲「啓動」狀態。

設置「自動構建」的方法以下圖所示（圖中狀態爲「啓動」）：

圖 116 設置Eclipse的「自動構建」

 「發佈」的詳細規則是怎樣的？
如前所述「發佈」包含兩類基本動做：「拷貝」和「合併」。「拷貝」指的是將各個組件中的資源直接拷貝到UniEAP工程WebRoot指定位置，「合併」指的是將組件中的某些配置文件的內容讀出，將其合併後，輸出到UniEAP工程WebRoot指定位置。
下面分別介紹兩類動做，先以DC爲例：
 「拷貝」類型的動做規則以下圖：

圖 117 DC「發佈」中「拷貝」類動做規則示意圖

圖中演示了一個DC組件「DemoDC」的「發佈」過程。圖中左側是DemoDC，右側是其所屬的UniEAP工程。

DC下content文件夾保存除Java類Class文件和JAR包以外全部的須要發佈到UniEAP Web工程中的Web應用程序片斷。其中的內容大部分是自動生成的，用戶也能夠自行添加。
content中包含三個子文件夾：
conf（保存配置文件）
tld（保存標籤庫）
view（保存JSP頁面、JS腳本、CSS和圖片等須要在Web端訪問的資源）

conf中的配置文件被拷貝到UniEAP工程WebRoot中WEB-INF/conf/{SC名稱}/{DC名稱}目錄。
tld中的標籤庫文件被拷貝到UniEAP工程WebRoot中WEB-INF/tld/{SC名稱}/{DC名稱}目錄。
view中的文件拷貝到UniEAP工程WebRoot中{SC名稱}/{DC名稱}目錄。

DC下src文件夾中的Java源碼編譯而成的class文件會自動拷貝到UniEAP工程WebRoot中WEB-INF/classes文件夾。

DC下lib文件夾中的JAR包會拷貝到UniEAP工程WebRoot中WEB-INF/lib文件夾。

 「合併」類型的動做規則：
對於DC下content/conf文件夾下的三個配置文件：
web.xml
ehcache.xml
log4j.xml
UniEAP V4將分析其內容，根據全部組件內同名文件的內容進行「合併」。合併完畢後，web.xml將被輸出到UniEAP工程WebRoot中WEB-INF文件夾。ehcache.xml和log4j.xml將被輸出到UniEAP工程WebRoot中WEB-INF/conf文件夾。

如今介紹SC的「發佈」。SC下沒有模型文件，Java源碼和其餘類型文件，僅有配置文件，所以，其「發佈」只包含「拷貝」類型的動做。SC下包含的配置文件以下圖：

圖 118 SC包含的配置文件

圖中所示的配置文件所有被拷貝到UniEAP工程WebRoot中WEB-INF/conf/{SC名稱}目錄。以下圖所示：

圖 119 SC配置文件發佈到UniEAP工程後位置示意圖

最後介紹Patch工程的「發佈」。
Patch工程中的webroot目錄，其結構與UniEAP工程的webroot目錄徹底相同，以下圖所示：

圖 120 Patch工程與UniEAP工程結構對比圖
Patch工程進行「發佈」時，其src源碼文件夾下的Java文件編譯成class文件，將被拷貝到UniEAP工程WEB-INF/classes目錄，其webroot下的內容（除了web.xml，ehcache.xml和log4j.xml），將按照對應路徑拷貝到UniEAP工程webroot下。
web.xml，ehcache.xml和log4j.xml（其路徑參考圖中所示），與其餘組件進行合併後輸出到UniEAP工程的對應位置。
5.5.2 設置組件發佈
在實際開發過程當中，一般須要一邊開發一邊測試，「發佈」保證了在組件內改動的內容能夠實時反映到UniEAP工程，也就能夠實時看到改動的效果。若是每次「發佈」耗時過長，將會影響到開發的速度。從實際狀況來看，並不是全部組件都是須要頻繁發佈的。一般咱們只須要發佈正在進行開發的一個或幾個組件，其餘組件只須要發佈一次就能夠了。
所以，UniEAP V4 WorkShop提供了控制組件發佈的功能。
在WorkShop工具欄上，點擊「設置UniEAP組件發佈」按鈕，啓動「設置組件發佈」功能。
以下圖：

圖 121 設置UniEAP組件發佈按鈕

點擊按鈕後，會彈出「設置組件發佈」功能頁面，以下圖：

圖 122 「設置組件發佈」功能頁面
頁面中會列出當前UniEAP工程下全部的組件，默認狀況下，全部組件均處於「發佈」狀態（勾選），咱們能夠選擇不須要「發佈」的組件，取消其前方的勾。
設置完畢後，點擊<OK>便可。
在頁面下方，有一個選項「在UniEAP資源管理器中隱藏不發佈組件」。若是勾選此項，UniEAP資源管理器中全部不發佈的組件將自動隱藏，取消此項，UniEAP資源管理器將顯示全部組件。
5.6 設置組件發佈Filter順序
在須要調整順序的filter中加入load-on-startup參數，以下所示：
<filter>
<filter-name>loginfilter</filter-name>
<filter-class>com.neusoft.report.sample.AccountFilter</filter-class>
<init-param>
<param-name>load-on-startup</param-name>
<param-value>1</param-value>
</init-param>
</filter>
load-on-startup參數值爲非負數，取值越小順序越靠前。該參數是在相應組件（包括Patch工程）的web.xml文件中進行修改，在發佈到UniEAP工程時自動去掉。
5.7 組件調試設置源
因爲UniEAP工程中沒有java源碼文件，只有來自各個組件編譯後的class文件。咱們在開發組件的java源碼中設置斷點，調試啓動服務後，會出現找不到源碼文件的提示，以下圖所示：

圖 123 調試時出現找不到源狀況
您能夠點擊「編輯源查找路徑」按鈕，在彈出的對話框中進行設置，以下圖所示：

圖 124 編輯源查找路徑對話框
點擊<添加>按鈕，選擇「Java 項目」選項，以下圖所示：

圖 125 編輯源查找路徑對話框
點擊<肯定>按鈕，在彈出的對話框中選擇引用源的項目（可多選，通常爲DC或Patch工程），以下圖所示：

圖 126 選擇項目
點擊<肯定>按鈕，完成設置。您也能夠在「調試」透視圖下，從工具欄中的 下拉選項中選擇「調試 配置」項，彈出以下對話框，設置過程同前。

圖 127 在調試配置中設置源
【提示】若採用上述方法仍不可用，則在workshop的eclipse.ini文件中增長以下參數「-Duser.language=en」，從新啓動workshop便可。

5.8 UniEAP工程部署
5.8.1 開發測試環境
在開發過程當中，常常須要對開發的內容進行測試，所以須要將UniEAP工程部署到應用服務器。建議使用Tomcat 6.0測試環境。
將UniEAP工程部署到應用服務器的方法以下：
1 在UniEAP透視圖中下方，找到「Servers」視圖。在視圖空白處鼠標右鍵單擊，在彈出菜單中選擇「New」->「Server」。以下圖：

圖 128 打開新建Server嚮導
在彈出的「New Server」對話框中，選擇「Tomcat v6.0 Server」，其餘字段以下圖，以後點擊<Next>。

圖 129 Server設置嚮導——選擇應用服務器
若是以前沒有配置過Tomcat 6.0應用服務器的位置，嚮導會提示進行配置，以下圖。頁面中「Name」文本框能夠定義應用服務器的名稱（一般保持默認便可），「Tomcat Installation directory」文本框中須要輸入Tomcat 6.0應用服務器所在目錄，點擊其右側的<Browse>按鈕能夠直接選擇。設置完畢後點擊<Next>繼續。

圖 130 Server設置嚮導——配置應用服務器
這一頁面中須要配置部署到應用服務器的UniEAP工程，以下圖：

圖 131 Server設置嚮導——設置部署的UniEAP工程

頁面左側列出了當前工做空間中的UniEAP工程，點擊要進行部署的UniEAP工程，單擊屏幕中間的<Add>按鈕，選中的UniEAP工程會從左側移動到右側，表示設置部署成功。以後點擊<Finish>按鈕。
配置嚮導關閉，配置好的應用服務器出如今「Servers」視圖，以下圖：

圖 132 配置應用服務器後的Servers視圖
如今雙擊剛配置好的應用服務器。出現以下界面：

圖 133應用服務器設置界面
勾選「Serve modules without publishing」，以後點擊UniEAP透視圖左上角的<保存>。至此，應用服務器配置完畢。
進行測試時，在Server視圖中點擊配置好的應用服務器，點擊<Start the server in debug mode>啓動應用服務器，便可進行調試。以下圖所示：

圖 134以Debug模式啓動應用服務器
5.8.2 系統上線環境
一般在系統上線前進行系統測試時，須要將整個UniEAP工程導出爲可部署到最終生產環境應用服務器的Web應用，下面介紹操做過程：
1 首先，確認UniEAP工程中已經引入了全部必要的組件（SC、DC、Patch工程）。
2 打開「設置組件發佈」對話框，確認全部組件均處於「發佈」狀態（組件前面的CheckBox均爲勾選狀態）。
3 從新編譯所有組件。操做方法以下：點擊「Project」>「Clean」。同時請確認「Build Automatically」選項處於勾選狀態。以下圖：

圖 135以Clean當前工做空間
4 在接下來的對話框中，選中「Clean all projects」，以後點擊<OK>按鈕。

圖 136選擇Clean全部工程
5 不要進行任何操做，等待Build動做所有完成。進行Build時，WorkShop右下角會有正在運行任務的滾動提示。同時Console視圖也會不斷輸出Build信息。以下圖：

圖 137等待Build完成
6 全部操做完成以後，就能夠正式導出可部署到最終生產環境的Web應用了。分兩種狀況：
 生產環境Web應用不使用WAR包。
直接將UniEAP工程下的webroot文件夾下的內容做爲最終部署的Web應用文件便可。
 生產環境須要使用WAR包。
鼠標右鍵單擊UniEAP工程，選擇「Export」。以下圖：

圖 138 UniEAP工程右鍵菜單
在彈出的「Export」嚮導中「Select an export destionation」對話框中輸入「war」，在下方的樹形列表中選中「WAR file」，以後點擊<Next>按鈕。以下圖：

圖 139 選擇導出「WAR」類型文件
在接下來的嚮導頁面中，在「Destination」文本框右側點擊「Browse」，爲導出的WAR文件選擇一個路徑並輸入一個名稱。以後點擊<Finish>按鈕。以下圖：

圖 140 設置導出「WAR」文件位置以及名稱。
等待導出完成，生產環境使用的Web應用WAR包就生成了。
5.8.3 UniEAP V4兼容應用服務器列表
UniEAP V4兼容以下應用服務器：
Tomcat 5.五、Tomcat 六、WebSphere 6.0、WebSphere6.一、Weblogic 9.0、Weblogic 10。
第6章 模型化開發使用指南
6.1 使用模型開發
6.1.1 Entity模型
 新建Entity模型
選擇當前DC工程下的「metamodel」>「entity」文件夾，點擊右鍵，在右鍵菜單中選擇「New」>「Entity 模型」菜單項。具體以下圖所示：

圖 141 Entity顯示視圖對話框
點擊菜單項後，會打開Entity建立嚮導，以下圖所示：

圖 142 新建Entity文件嚮導
【提示】 「數據庫類型」目前版本僅支持Oracle數據庫。
6.1.1.1 從數據庫表建立
輸入正確的數據庫URL、用戶名和密碼後點擊右上角<測試鏈接>按鈕會對所輸入的數據庫進行鏈接測試，測試結果會以對話框形式彈出，以下圖所示：

圖 143 測試鏈接失敗對話框

圖 144 測試鏈接成功對話框
如測試鏈接成功，則點擊<下一步>，頁面以下圖所示：

圖 145 映射Entity模型嚮導頁
此時點擊上圖中標註的<刷新>按鈕，便可根據上頁輸入的數據庫鏈接信息讀取到數據庫中的表，並提供過濾框支持對錶名進行過濾，以下圖所示：

圖 146 映射Entity模型嚮導頁過濾框
【提示】該向導頁下方的「ID生成策略」可參考Hibernate主鍵生成策略，默認爲「uuid」。
該向導支持批量生成Entity，當用戶選擇好所須要的數據庫表以後，點擊<完成>，則會在「metamodel」>「Entity」下生成對應「*.entity」文件，並同時在「Unieap工程/當前SC/當前DC/Content/conf/generated/hbm/*.hbm.xml」路徑生成相應的Hibernate配置文件。
除此以外，每一個Entity文件將會對應生成java文件，自動生成Entity中屬性的「get」和「set」方法，存放於「src」>「com.sc.dc.entity」包下。
【警告】對於數據庫表中沒有「id」屬性的狀況，生成Entity文件時將不生成Hibernate配置文件及對應java文件，僅在「metamodel」>「entity」中生成「*.entity」文件。
6.1.1.2 從已有Entity模型建立
選擇<從已有Entity模型建立>後，建立界面以下圖所示：

圖 147 從已有Entity模型建立框
在<文件名>中填入即將建立的Entity模型名稱，以後點擊<繼承>按鈕，選擇須要繼承的Entity模型，點擊<finish>便可。
6.1.1.3 刪除Entity模型
選擇要刪除的Entity模型，單擊鍵盤<delete>鍵或在右鍵菜單中選擇<刪除>選項，彈出對話框，以下圖所示：

圖 148 刪除Entity模型對話框
點擊<肯定>將刪除該Entity模型，並自動刪除對應Hibernate配置文件。但不會刪除對應java文件，須要用戶手動刪除。
6.1.1.4 編輯Entity模型
雙擊Entity模型，以下圖所示：

圖 149 打開Entity模型
Entity模型文件以XML格式存儲，其中<id>節點記錄該Entity中的主鍵信息。
 Name：記錄該Entity對應主鍵ID的屬性名。
 Type：id類型，通常爲string，如不爲經常使用類型則需使用全路徑名。
 Column：記錄主鍵數據庫字段，其中name屬性對應Class屬性名，length屬性對應主鍵數據庫列字符串類型字段的長度。
 Generator：爲持久化類生成主鍵，其中class屬性記錄主鍵生成算法，默認爲「uuid」。
Entity模型中每一個字段對應模型中的一個<property>節點，屬性以下：
 Name：對應主鍵ID屬性名，同時對應於java文件中的「get」和「set」方法。
 Label：標識名稱。
 Type：類型，如不爲經常使用類型則需使用全路徑名。
每個<property>所對應數據庫字段內容存放於其下的<column>節點中，其屬性介紹以下：
 Name：對應於class的屬性名。
 Not-null：非空字段，當根據模型自動生成數據庫時，須要設置此屬性。值爲「true」或「false」。
 Length：數據庫列字符串類型字段的長度，當根據模型自動生成數據庫時，須要設置此屬性。
【提示】當有須要對Entity文件進行修改或更新時，只需修改該模型文件，即修改該模型文件的XML內容，修改完畢使用「ctrl+s」保存後將自動對Hibernate配置文件及java文件進行更新。而且Entity文件支持java文件反向生成到模型，用戶能夠經過在java文件中增改方法，保存後將自動同步到Entity模型中。
6.1.1.5 檢查更新
右鍵點擊Entity模型，點擊<UniEAP工具>--<檢查更新>，以下圖所示：

圖 150 Entity模型文件檢查更新菜單
點擊後彈出彈出對話框，填入正確URL及用戶名和密碼，以下圖所示：

圖 151 Entity模型文件檢查更新界面
填寫完畢後點擊下一步，會自動鏈接數據庫檢查數據是否有變化，以下圖所示：

圖 152 Entity模型文件檢查更新結果
圖中所示爲數據庫更新結果，用戶可針對自身須要勾選須要同步更新的屬性，點擊<finish>與數據庫進行同步。
6.1.1.6 非持久化屬性
當業務數據中某字段不須要持久化到數據庫，主要由其餘字段或實體計算或推斷出來的時候，須要在entity中加入非持久化屬性，下面舉例說明：
在研發過程當中每一個」backlog」須要統計其相應的」實際工做量」，該數據不對應持久化屬性，由」 COMMON_JOURNAL」數據庫表中」 timeConsume」(所用時間)計算獲得，那麼開發人員須要在」backlog」實體中加入對應字段記錄」實際工做量」，以下所示：
<property name="realWorkload" label="實際工做量"
formula="(select nvl(sum(j.time_consume),0) from COMMON_JOURNAL j,COMMON_TASK t where j.task_id = t.id and t.backlog_id = ID)" type="float" />
爲方便對比，截取一個持久化屬性作爲參照，以下所示：
<property name="expectWorkdays" label="估計所需工做的人日。生成啓動報告時須要"
type="string">
<column name="EXPECT_WORKDAYS" not-null="false" />
</property>
能夠看到，」實際工做量」對應的property未對應任何」column」節點，即未進行持久化。其中name及label屬性由用戶自行定義，分別對應數據集界面的名稱及標題。用戶還須要根據該數據類型定義type屬性，其中，formula屬性代筆該數據在數據集被調用時會自動去後臺發送並執行的sql語句，即圖中的：
"(select nvl(sum(j.time_consume),0) from COMMON_JOURNAL j,COMMON_TASK t where j.task_id = t.id and t.backlog_id = ID)"
經過該sql語句能夠看出該字段由表」COMMON_JOURNAL」及」COMMON_TASK」控制並獲取數據，因此該字段不須要進行持久化，不然會形成數據的冗餘。
在生成數據集時，該屬性與其餘持久化屬性相同，以下圖所示：

圖 153 Entity模型文件檢查更新菜單
【注意】類型爲」real」表示該屬性爲number類型，會經過工具自動將float等類型轉化爲」real」屬性。

6.1.2 DTO模型
6.1.2.1 應用場景
DTO模型的主要應用場景以下：
 對Entity模型進行擴展，增長新屬性但並不須要持久到數據庫中，示例以下：

圖 154 DTO應用場景示例1
 須要在一個數據集中同時使用多個實體模型，此時能夠使用DTO模型將所須要的Property加入進來，示例以下：

圖 155 DTO應用場景示例2
6.1.2.2 新建DTO模型
選擇當前DC工程下的「metamodel」>「dto」文件夾，點擊右鍵，在右鍵菜單中選擇「New」>「DTO 模型」菜單項。具體以下圖所示：

圖 156 顯示視圖對話框
點擊菜單項後，會打開DTO建立嚮導，以下圖所示：

圖 157 建立DTO文件嚮導
點擊<下一步>可選擇依賴的entity模型，以下圖所示：

圖 158 建立DTO文件嚮導中選擇依賴entity
選擇一個entity後點擊<下一步>，選擇依賴該entity中的屬性選擇界面，以下圖所示：

圖 159 建立DTO文件嚮導中根據entity選擇依賴屬性
以後點擊<完成>，會自動打開並切換到該DTO文件視圖界面，所生成的DTO文件爲XML格式文件，以下圖所示：

圖 160 DTO模型界面
其中，<baseInfo>節點中存儲該DTO的基本信息，包括「做者」、「建立時間」、「修改時間」、「版本號」及「描述信息」。
若是在新建時選擇依賴entity中的部分屬性，則DTO文件中會存在<dependence>節點，標識該DTO依賴特定entity中的屬性。下面簡單介紹<dependence>節點的屬性含義。
 type：標識該DTO對象所依賴的數據類型，目前只支持entity。
 name:標識該DTO對象的屬性值。
 ref:標識該DTO對象所依賴的entity模型名稱。
 property：標識所依賴entity模型的對應屬性名稱，對應entity中property節點下的name屬性。
 dc:標識該DTO對象所依賴entity所在的開發組件(dc)名稱。
目前DTO模型不支持圖形化修改，只能經過手動編輯XML文件進行增長、刪除或修改操做，下面對在DTO文件中增長屬性的操做進行介紹。
對不依賴entity屬性的DTO對象，在DTO模型中以<property>節點標識，該節點用來定義DTO對象成員變量，其下共有三個屬性：
 name:該DTO對象的屬性名稱。
 type:java中的經常使用類型，或特殊類型的全路徑，如:「string」、「java.util.List」等。
 label:DTO對象屬性概述，爲前臺顯示所用。
例如對DTO模型增長一個名爲「spState」的節點，其顯示名稱爲「審批狀態」，類型爲「string」。以下圖所示：

圖 161 增長DTO對象
【提示】DTO能夠依賴多個entity，因爲新建DTO嚮導中只可綁定一個entity模型，若依賴其餘entity模型則須要用戶手動添加XML節點，添加方式如上所述，格式同單一entity依賴狀況，以下圖所示：

圖 162 增長依賴entity的DTO對象
6.1.2.3 刪除DTO模型
選擇要刪除的DTO模型，單擊鍵盤<delete>鍵或在右鍵菜單中選擇<刪除>選項，彈出對話框，以下圖所示：

圖 163 刪除DTO模型
點擊<肯定>後便可刪除該DTO文件。
6.1.2.4 使用示例
當業務上須要在同一數據集中使用多個表中的數據時，能夠使用DTO做爲數據對象，新建DTO方法參考用戶手冊DTO相關章節，新建後效果以下所示：

當用戶須要使用該DTO時首先須要根據該DTO構建數據集，以下圖所示：

圖 164 新建數據集
建完數據集後便可經過該數據集新建模式控件等，如下圖Grid爲例：

圖 165 Grid模式控件
該Grid經過其餘按鈕的查詢操做來返回數據，查詢所對應的DAO後臺方法以下，該方法也經常使用來構造DTO對象：
public List getUnitsByUserId(String userId) {
String dimensionId = OrgConstant.DEFAULT_DIMENSION_ID;
// 對DTO每一個屬性進行查詢並拼成一個DTO對象的List返回
String sql = "select dimUnit.ALIAS_NAME as aliasName, dimUnit.UNIT_PATH as unitPath,dimUnit.UNIT_ID as unitId,unit.CODE as unitCode,unit.DESCRIPTION as unitDescription "
+ "from UP_ORG_DIMENSION_UNIT dimUnit,UP_ORG_UNIT unit,UP_ORG_UNIT_USER unitUser "
+ "where dimUnit.UNIT_ID = unit.ID "
+ "and unit.ID = unitUser.UNIT_ID "
+ "and unitUser.USER_ID = ? " + "and dimUnit.DIMENSION_ID= ?";
SQLQuery query = super.getSessionFactory().getCurrentSession()
.createSQLQuery(sql);
query.setParameter(0, userId);
query.setParameter(1, dimensionId);
// 各屬性的存放類型
query.addScalar("aliasName", Hibernate.STRING);
query.addScalar("unitPath", Hibernate.STRING);
query.addScalar("unitId", Hibernate.STRING);
query.addScalar("unitCode", Hibernate.STRING);
query.addScalar("unitDescription", Hibernate.STRING);
// 返回結果爲鍵值隊(map)
query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
// 獲得查詢結果，爲List<Map(propName,value)>的形式
List<UnitDTO> lists = query.list();

……

return results;
}
其中，query的構造也可寫做以下形式：
Query q = super.getSessionFactory().getCurrentSession().createSQLQuery(
sql).setResultTransformer(
Transformers.aliasToBean(UnitDTO.class));
List list = q.list();

6.1.3 DAO模型
6.1.3.1 新建DAO模型
選擇當前DC工程下的「metamodel」>「dao」文件夾，點擊右鍵，在右鍵菜單中選擇「New」>「DAO 模型」菜單項。具體以下圖所示：

圖 166 DAO顯示視圖對話框
點擊菜單項後，會打開DAO建立嚮導，以下圖所示：

圖 167 新建DAO嚮導頁
 配置數據源
該向導最下方能夠選擇數據源，其中多數據源的具體配置存放在」webroot/WEB-INF/conf/platform/core/applicationContext-datasource.xml」中：
<!-- 定義系統數據源 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"
destroy-method="close">
<property name="driverClassName">
<value>${unieap.datasource.driverClass}</value>
</property>
<property name="url">
<value>${unieap.datasource.jdbcUrl}</value>
</property>
<property name="username">
<value>${unieap.datasource.user}</value>
</property>
<property name="password">
<value>${unieap.datasource.password}</value>
</property>
<property name="initialSize">
<value>${unieap.datasource.initialSize}</value>
</property>
<property name="maxActive">
<value>${unieap.datasource.maxActive}</value>
</property>
<property name="maxIdle">
<value>${unieap.datasource.maxIdle}</value>
</property>
<property name="maxWait">
<value>${unieap.datasource.maxWait}</value>
</property>
</bean>

輸入文件名後點擊<完成>按鈕，即完成建立DAO模型。與此同時，將同時建立該DAO模型對應接口類(當選擇已有接口時不建立接口類，具體細節參見6.1.4.2)和實現類，當建立完成後會自動打開該DAO實現類，以下圖所示：

圖 168 DAO實現類
6.1.3.2 刪除DAO模型
選擇要刪除的DAO模型，單擊鍵盤<delete>鍵或在右鍵菜單中選擇<刪除>選項，彈出對話框，以下圖所示：

圖 169 刪除DAO文件對話框
點擊<肯定>後將會自動刪除DAO模型文件，並更新spring配置文件，但不會刪除對應實現類和接口，可在當前DC下的「src」文件夾中對其進行手動刪除。
6.1.3.3 使用自動注入
DAO有時須要調用其餘DAO，這種場景下會使用spring依賴注入特性。UniEAP V4提供了自動注入功能，只須要用戶在DAO實現類中提供「set」方法，UniEAP WorkShop會自動幫用戶生成注入相關的spring配置。用戶不須要自行修改配置文件。
下面提供一個簡單的自動注入的例子來講明這一點：
某DAO（爲保證描述清晰，該DAO文件如下簡稱爲「D」），須要調用另外一個DAO中的部分方法，按照Spring的規範，在D中增長另外一個DAO的私有成員變量，並提供對應的set方法，並在Spring配置文件中增長相應的注入片斷，由Spring實現自動依賴注入。在UniEAP V4中，咱們只須要在D中增長另外一個DAO的私有成員變量，和set方法便可，UniEAP WorkShop將自動生成相應的Spring注入片斷。
增長私有成員與set方法示例，以下圖所示：

圖 170 在DAO文件中添加「set」方法
保存DAO後，UniEAP WorkShop會自動爲DAO（圖中所示爲「myDAO」）生成Spring注入片斷。以下圖所示（「<property name=」myDAO」 ref=」planManagement_myDAO_dao」>」）：

圖 171 DAO文件對應spring配置文件內容
【注意】使用DAO自動注入特性的私有成員變量，必須以「DAO」結尾。
6.1.3.4 使用存儲過程
【提示】在閱讀本節前，首先要了解存儲過程的基礎知識和使用方法。
在V4中推薦在DAO(該DAO需繼承默認的BaseHibernateDAO基類或其餘以BaseHibernateDAO爲基類的子類)中調用存儲過程，調用方法示例以下，具體細節及用法在代碼註釋中給出：
public void callProcedure(User user) {
// 存儲過程名稱由存儲過程在數據庫中的「包名.存儲過程名」定義，即如下調用PKG_TEST_FEEAUDIT包中的prc_a_commAuditing存儲過程
String procedurename = "PKG_TEST_FEEAUDIT.prc_a_commAuditing";
int i = 0;
// ProcPara爲V4爲存儲過程提供的參數對象
// 建立格式爲:new ProcPara(序號,參數爲輸入或輸出<分別對應: ProcPara.IN 和ProcPara.OUT>,輸入的參數值<當該參數爲輸出時不須要該屬性>,參數類型<通常由java.sql.Types定義>)
ProcPara[] paras = new ProcPara[] {
// 五個輸入參數
new ProcPara(++i, ProcPara.IN, "", Types.VARCHAR), // 繳費類型
new ProcPara(++i, ProcPara.IN, "", Types.VARCHAR), // 繳費主體
new ProcPara(++i, ProcPara.IN, 201211, Types.DECIMAL), // 結算期
new ProcPara(++i, ProcPara.IN, "", Types.VARCHAR), // 繳費對象
new ProcPara(++i, ProcPara.IN, "", Types.VARCHAR), // 款項
// 兩個輸出參數
new ProcPara(++i, ProcPara.OUT, Types.VARCHAR),
new ProcPara(++i, ProcPara.OUT, Types.VARCHAR) };
// 執行存儲過程
super.callStoredProcedure(procedurename, paras);
//輸出參數能夠直接經過paras[5].getValue()或paras[6].getValue()取得
Object value = paras[5].getValue();
}

6.1.3.5 使用HibernateTemplate模板
在V4環境中，（DAO模型的實現）須要用戶使用Spring的HibernateTemplate模板，將Hibernate 的持久層訪問模板化。
HibernateTemplate模板能夠知足用戶的絕大部分需求，查詢和保存的使用方法示例以下：
/**
* {@inheritDoc}
*/

public List getDirectAdminRoles(String roleId, String roleType) {
String hql = "from AdminRole adminRole where adminRole.parentRoleId=? and adminRole.roleType=?";
return getHibernateTemplate().find(hql,
new Object[] { roleId, roleType });
}

/**
* {@inheritDoc}
*/
public AdminRole saveAdminRole(AdminRole adminRole) {
getHibernateTemplate().save(adminRole);
return adminRole;
}
當用戶須要對複雜的持久層訪問或使用SQL語句時，須要使用HibernateTemplate提供的doInHibernate方法，示例以下：
/**
* {@inheritDoc}
*/
public List getUsersByUnitIdExceptAdminRoleId(final String unitId,
final String adminRoleId, final int pageNumber, final int pageSize) {
List result = (List) getHibernateTemplate().execute(
new HibernateCallback() {
public Object doInHibernate(Session session)
throws HibernateException, SQLException {
String sql = "select unitUser.* from Unit_User unitUser where unitUser.UNITID = ? ";
SQLQuery query = session.createSQLQuery(sql).addEntity(UnitUser.class);
query.setParameter(0, unitId);
query.setFirstResult((pageNumber - 1) * pageSize);
query.setMaxResults(pageSize);
return query.list();
}
});
return result;
}

6.1.4 BO模型
 新建BO模型
選擇當前DC工程下的「metamodel」>「BO」文件夾，點擊右鍵，在右鍵菜單中選擇「New」>「BO 模型」菜單項。具體以下圖所示：

圖 172 BO顯示視圖對話框
點擊菜單項後，會打開BO建立嚮導，以下圖所示：

圖 173 新建BO嚮導頁
6.1.4.1 新建BO模型
當新建的BO模型接口爲已有接口時，在新建BO對話框中點擊<選擇已有接口>，在彈出的對話框中選擇已有的接口類，該接口類能夠選擇本DC或依賴DC中的BO接口類，以下圖所示：

圖 174 BO模型選擇已有接口

如不選擇已有接口則不須要上述操做，輸入文件名後點擊<完成>按鈕即完成建立BO模型。與此同時，將同時建立該BO模型對應實現類（及接口類，取決因而否基於已有接口建立），當建立完成後會自動打開BO實現類的視圖，以下圖所示：

圖 175 BO編輯器
其中implements的類名即爲以前選定的接口名。
6.1.4.2 新建BO實現類(多實現)
當須要BO模型的多實現功能時，右鍵點擊須要實現的接口類對應的BO模型，依次點擊<New>-<BO模型>，彈出對話框以下圖所示：

圖 176新建BO多實現類
在<實現類名>一欄填入新實現類名，點擊完成，便可對該BO添加新的實現類，添加後BO模型在視圖中的效果以下圖所示：

圖 177 BO多實現類結構圖
對多實現的BO模型，能夠指定其中一個實現類爲默認實現類，如不指定則以新建時間前後爲準，指定默認實現類的操做以下圖所示：

圖 178 BO模型設置默認實現類
當所選實現類變爲粗體則代表成功設置該實現類爲默認實現。
6.1.4.3 刪除BO模型
選擇要刪除的BO模型，單擊鍵盤<delete>鍵或在右鍵菜單中選擇<刪除>選項，彈出對話框，以下圖所示：

圖 179 刪除BO文件對話框
點擊<肯定>後將會自動刪除BO模型文件，並更新spring配置文件，但不會刪除對應實現類和接口，可在當前DC下的「src」文件夾中對其進行手動刪除。
6.1.4.4 事務管理
 BO事務控制
當BO模型須要事務控制時，BO方法要知足applicationContext-datasource.xml文件中事務代理所定義的前綴命名規範。
platform/core/content/conf/applicationContext-datasource.xml文件定義了事務控制相關配置。當用戶須要修改事務控制相關信息時，須要使用patch工程，在相同路徑patch/webroot/WEB-INF/conf/platform/core/，建立同名文件。該文件在發佈時將覆蓋原core組件下的對應文件，前綴的命名規範定義以下：
<bean id="baseTxProxy" lazy-init="true"
class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean">
<property name="transactionManager">
<ref bean="transactionManager" />
</property>
<property name="transactionAttributes">
<props>
<prop key="add*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="create*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="update*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="config*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="delete*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="save*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="do*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="register*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="remove*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="start*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="pause*">PROPAGATION_REQUIRED,-DataAccessException,-HibernateException,-PersistenceException
</prop>
<prop key="find*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="query*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="get*">PROPAGATION_REQUIRED,readOnly</prop>
</props>
</property>
</bean>
即在該事務代理下用戶的BO方法命名須要知足以上定義的（如：add/create/update等）前綴命名規範，當用戶須要添加前綴時可在patch工程中複寫該配置文件。
 事務代理
UniEAPV4工程，默認提供的是基於JDBC的事務管理，是面向一個鏈接的。若是想在多個數據庫鏈接之間控制事務，就須要使用JTA事務管理。根據用戶的使用場景不一樣，主要能夠分爲兩種狀況：
1經過第三方的jar包來支持JTA事務。
2使用應用服務器提供的JTA事務管理功能。
當用戶須要使用JTA事務管理時，須要在新建BO對話框下方<事務代理>中選擇<jtaTxAdvisor>。
6.1.4.5 使用自動注入
BO開發時，常常須要調用DAO和其餘BO，這種場景下會使用spring依賴注入特性。UniEAP V4提供了自動注入功能，只須要用戶在BO實現類中提供「set」方法，UniEAP WorkShop會自動幫用戶生成注入相關的spring配置。用戶不須要自行修改配置文件。
下面提供一個簡單的自動注入的例子來講明這一點：
某BO，須要調用DAO完成數據持久化操做。這時，須要在BO的實現類中提供DAO的私有成員變量與對應的set方法，以下圖所示。

圖 180 在BO文件中添加「set」方法
添加完私有成員變量與對應的set方法後，保存BO模型，UniEAP WorkShop會自動爲「myDAO」（圖中所示）生成對應的Spring注入片斷。以下圖所示：

圖 181 BO文件對應spring配置文件內容
【注意】使用BO自動注入時，BO私有成員名稱必須以「BO」結尾，DAO私有成員變量必須以「DAO」結尾。
6.1.4.6 多返回值處理
當業務邏輯須要多返回值時，須要使用到BOContext對象，後臺構造並返回該對象代碼以下所示：
public BOContext getManagedAdminRoleUnits() {
BOContext bc = new BOContextImpl();
// 根據管理角色類型得到當前登陸用戶相應的管理角色id和超級管理角色id
User user = UniEAPContextHolder.getContext().getCurrentUser();
String roleType = user.getAdminRoleType();
if (roleType==null)
return bc;
List<String> roleIds = user.getRoleIds(roleType);
if (roleIds==null||roleIds.size()==0)
return bc;
if (roleIds.get(0).equalsIgnoreCase("adminRole")){
bc.put("isSuperAdminRole", true);
return bc;
}
List<AdminRoleUnit> l = unitDAO.getAdminRoleById(roleIds.get(0));
if(l != null && l.size() > 0){
List<Boolean> cascadeStatus = new ArrayList<Boolean>();
for(AdminRoleUnit aru : l){
cascadeStatus.add(aru.getIsCascade());
}
bc.put("cascadeStatus",cascadeStatus);
}
return bc;
}
後臺構造該對象時能夠將該對象看作Map進行處理，將多返回值遵照KEY-VALUE的方式放入。數據傳回前臺後，根據數據類型前臺又不一樣的取值方式，具體以下：
 當返回值爲簡單類型時，即：Number、String、Boolean、Character、BigDecimal，前臺經過dc.getParameter(key)方法取值。
 當返回值爲List（Array）時，分爲兩種狀況：
 List（Array）中爲簡單類型，此種狀況List（Array）經過dc.getParameter(key)方法取值。
 List（Array）中爲複雜類型時，此種狀況BoContext將該List（Array）轉爲DataStore，用戶在前臺經過dc.getDataStore(key)取得該返回值
 當返回值爲QueryResult或其餘複雜對象時，該返回值將被轉爲DataStore，經過dc.getDataStore(key)取值
6.1.4.7 一鍵發佈WebService
【注意】能夠經過CXFServlet的映射地址，使用瀏覽器訪問查看已發佈的WebService列表。本例中訪問地址爲http://主機名 + 應用名 +「/unieapServices」便可查看服務列表。
按如下步驟進行操做：
1. 右鍵點擊Bo模型，在菜單中選擇「UniEAP 工具」-> 「一鍵發佈Webservice」。
2.在該dc的content/conf文件夾下會自動生成名爲applicationContext-ws.xml的文件。
3. 須要手動在該dc的content/conf/applicationContext.xml中，添加「<import resource="applicationContext-ws.xml" /> 」。
4. 客戶端代碼編寫：舉例說明，假設須要調用TestBO的print方法來打印用戶列表，BO代碼以下：
public interface TestBO
{
public void print(List<User> userList);
}

@ModelFile(value = "testBO.bo")
public class TestBOImpl implements TestBO
{
@Override
public void print(List<User> userList)
{
if (userList != null && userList.size() > 0)
{
for (User user : userList)
{
System.out.println("User name is :" + user.getName());
}
}
}
}

public class User
{
private String name;

public String getName()
{
return name;
}

public void setName(String name)
{
this.name = name;
}
}
調用該BO被髮布的WebService的代碼爲以下：
public static void main(String[] args)
{
ClientProxyFactoryBean factory = new ClientProxyFactoryBean();
factory.setServiceClass(TestBO.class);
factory.setAddress("http://localhost:8090/framework/ unieapServices/demoSC/demoAF/test?eap_username=admin&eap_password=1");
/*注：須要注意的是，客戶端調用的地址配置爲：主機名 + 應用名 + CXFServlet的映射地址 + 相對地址（可在applicationContext-ws中的對應address屬性）。*/
factory.getServiceFactory().setDataBinding(new AegisDatabinding());// 指定aegis綁定
TestBO service = (TestBO) factory.create();
List<User> userList = new ArrayList<User>();
User user1 = new User();
user1.setName("aa");
User user2 = new User();
user2.setName("bb");
userList.add(user1);
userList.add(user2);
service.print(userList);
}
【注意】客戶端調用地址後面必須拼接上用戶名密碼，調用請求才能經過安全認證。
附applicationContext-ws配置文件內容簡要說明：

圖 182配置文件說明

6.1.5 View模型
6.1.5.1 新建View模型
選擇當前DC工程下的「metamodel」>「view」文件夾，在右鍵菜單中點擊「New」>「View模型」菜單項，以下圖所示：

圖 183 新建View模型菜單
點擊菜單項後，會打開新建view模型的嚮導，以下圖所示：

圖 184 新建View模型嚮導
在嚮導中輸入View模型的相關信息後，點擊< Finish >按鈕，完成新建view模型。
完成新建後，會打開view模型的UIDesigner編輯器，並默認切換到UIDesigner編輯器的概要頁面以下圖所示：

圖 185 View模型編輯器
【提示】UIDesigner編輯器中其它頁面的使用將在後面的章節中介紹。
6.1.5.2 View模型編輯器
做者輸入域中能夠編輯View模型的做者信息。
【技巧】做者輸入域的默認值爲Eclipse啓動參數配置中所設置的用戶信息。
版本號輸入域中能夠編輯View模型的版本號信息。
描述輸入域中能夠編輯View模型的描述信息。
標題輸入域中能夠填寫View模型的標題屬性，即頁面的標題。
勾選支持腳本國際化，頁面便可支持腳本國際化。
勾選支持頁面受權，頁面便可在管理控制檯進行頁面控件權限設置。
點擊入口信息連接能夠切換到UIDesigner編輯器的入口信息頁面。
點擊過程調用連接能夠切換到UIDesigner編輯器的過程調用頁面。
點擊設計連接能夠切換到UIDesigner編輯器的設計頁面。
點擊腳本連接能夠切換到UIDesigner編輯器的腳本頁面。
點擊源碼連接能夠切換到UIDesigner編輯器的源碼頁面。
點擊數據集連接能夠打開數據集視圖。
完成view模型建立後，會自動生成模型相關的代碼文件，包括2個Javascript文件和一個Jsp文件，點擊對應的代碼連接將用新的編輯器打開這些代碼文件，以下圖所示：

圖 186 打開View模型相關代碼文件
【提示】Javascript文件和Jsp文件的路徑爲：當前DC工程/content/view/generated。
6.1.5.3 刪除View模型
選擇要刪除的View模型文件，在右鍵菜單中點擊「Delete」菜單項，以下圖所示：

圖 187 刪除View模型文件
點擊菜單項後，會彈出確認刪除對話框，以下圖所示：

圖 188 確認刪除對話框
點擊< OK >後，該View模型文件被刪除而且彈出是否自動刪除建立View模型自動生成的Javascript文件和Jsp文件的確認對話框，以下圖所示：

圖 189 刪除View模型文件對應源碼文件確認對話框
點擊< Yes >後，建立該View模型文件自動生成的Javascript文件和Jsp文件被刪除。
【注意】刪除View模型文件不會刪除建立該View模型文件自動生成的Java文件，須要用戶手動刪除。
6.1.5.4 View模型繼承
 View模型繼承簡介
經過View模型的繼承，能夠複用原有模型的控件，公共方法，控件事件，而且支持方法的覆蓋和追加達到減小頁面開發重複工做的目的。
 建立繼承的View模型
打開新建View模型嚮導時，勾選<繼承>選項，以下圖所示：

圖 190 新建繼承的View模型嚮導
點擊與<繼承>選項同行的<瀏覽>按鈕，選擇要繼承的View模型，以下圖所示：

圖 191 選擇要繼承View模型對話框
選擇要繼承的View模型後，點擊<肯定>按鈕後，回到建立View模型的嚮導，此時與<繼承>選項同行的文本框中將會顯示剛纔選擇要繼承View模型的完整路徑名，以下圖所示：

圖 192新建繼承的View模型嚮導
點擊<Finish>按鈕後，會打開view組件的UIDesigner編輯器，並默認切換到UIDesigner編輯器的頁面組件概要頁面。
 公共方法的追加與覆蓋
將UIDesigner編輯器切換到設計頁面，能夠看到父View模型的控件已經被繼承到當前View模型中，以下圖所示：

圖 193 繼承父View模型的控件
將UIDesigner編輯器切換到腳本頁面，經過左上角下拉框選擇<公共方法>選項，再選擇右上角下拉框，能夠看到父View模型的公共方法已經被繼承到當前View模型中，繼承的公共方法後都有「繼承」字樣，以下圖所示：

圖 194 繼承父View模型的公共方法
選擇其中一個繼承自父View模型的公共方法，默認該方法內容是灰顯狀態，在腳本編輯器中按下鍵盤上任意按鍵，彈出是否覆蓋該方法的詢問對話框，以下圖所示：

圖 195 覆蓋繼承自父View模型的公共方法
點擊<OK>按鈕後，腳本編輯器中的代碼馬上出現語法着色，此時就能夠編寫覆蓋的方法體，完成對繼承自父View模型公共方法的覆蓋。
若是想要刪除覆蓋方法，只需簡單點擊腳本編輯器右上角的 ,在彈出的詢問對話框中選擇<OK>按鈕後，覆蓋方法就被刪除，還原爲父View模型中的繼承方法。
經過左上角下拉框選擇<公共方法>選項，再選擇右上角下拉框中的<新建方法>，輸入方法名後，在腳本編輯器就能夠對追加方法進行編輯。
 控件事件的覆蓋和追加
對於控件事件的覆蓋和追加，操做方法參參照共方法的覆蓋和追加。

 

6.1.5.5 View經常使用API簡介
V4的view模型會將部分的源碼翻譯成RIA的代碼，能夠方便的完成JSP靜態代碼部分的轉換，而動態的js腳本能夠在腳本編輯器中來進行編寫。在腳本編輯器中編寫js代碼的過程當中，會使用大量的RIA代碼。考慮到RIA的API組織稍顯凌亂，故V4在其基礎上對一些經常使用的API進行了封裝，現經過使用場景依次對其進行介紹：
1) view.form.setDataStore(id,store)
解釋：設置form對應的DataStore
參數說明: id:對應Form控件的id
store:用於初始化控件的dataStore
場景舉例： 修改人員列表中的某我的員信息時，須要把Grid當行的數據取出來並放入到對應的Form中，以下所示：

圖 196 點擊Grid中的超連接

圖 197 將Grid選中行的數據放入到Form中
要實現上述功能，能夠經過以下的代碼來實現：
//得到Grid當前選中行的數據，以dataStore的格式進行封裝
var ds = view.grid.getRow("user_grid");
//將Grid選中的數據綁定到Form上
view.form.setDataStore("user_form",ds);
可見，當想清空某個Form綁定的dataStore中的數據時，可採起以下方式：
view.form.setDataStore("user_form",null);
2) view.form.getDataStore(id)
解釋：設置form對應的DataStore
參數說明: id:對應form控件的id
場景舉例：新增一我的員的時候，要把其Form的全部信息傳遞到後臺，以下所示：

圖 198 Form中的相關人員信息
當點擊「保存」按鈕時，要獲取Form綁定的dataStore的內容，並向後臺發送processor請求，代碼以下：
var ds = view.form.getDataStore("user_form");
view.processor.saveUser(ds);
3) view.form. setPropertyValue(id, propertyName, propertyValue)
解釋：設置form對應的DataStore的某個屬性值
參數說明: id: 對應form的id
propertyName: 屬性的名稱
propertyValue:屬性值
場景舉例：當新增一個組織單元時，會爲其Form中的名稱字段設置一個初始值，以下所示：

圖 199 點擊「新增」項爲銷售公司增長下級部門

圖 200 Form中「名稱」項會默認添加一個值
要修改Form中某個屬性的值的代碼功能以下所示：
view.form.setPropertyValue("unit_form", "name", randomName);
4) view.form.getPropertyValue(id,propertyName)
解釋： 得到form對應的DataStore的某個屬性值
參數說明: id:對應form的id
propertyName:屬性的名稱
返回值： 對應的屬性值
場景舉例：新增一個用戶的時候，須要判斷Form中輸入的帳戶是否已經存在，若存在則不容許持久化到數據庫中。以下所示：

圖 201 對Form中「賬號」項進行校驗
此時須要向後臺發送該屬性的值校驗數據庫中是否已經存在，則要在「保存」按鈕的事件中添加以下代碼：
var account = view.form.getPropertyValue("user_form", "account");
view.processor.validateAccount(account);
5) view.grid.setDataStore(id,store)
解釋： 設置Grid的綁定的dataStore的數據值
參數： id ：Grid控件的id
store ：綁定的dataStore的值
場景舉例： 在查詢了全部用戶後，要在用戶列表中顯示出來，以下所示：

圖 202 對Form中「賬號」項進行校驗
要實現該功能，在查詢processor的成功回調中添加以下代碼便可：
var ds = dc.getDataStore("result");
view.grid.setDataStore("user_grid",ds);
可見，若是想清空Grid中的內容，可經過以下方式實現：
view.grid.setDataStore("user_grid",null);
6) view.grid.getDataStore(id)
解釋： 得到Grid控件綁定的DataStore
參數： id：Grid控件的id
返回值： Grid控件綁定的DataStore
場景舉例：在彈出的Dialog中，要將主頁面的Grid中的內容原封不動的顯示出來則須要得到主頁面的Grid綁定的dataStore，代碼以下所示：
var gridDs = view.grid.getDataStore("user_grid");
而後將gridDs做爲參數傳遞給Dialog便可。
7) view.grid.insertRows(id, store, index)
解釋： 向Grid中插入行（可插入多行數據）（單選和多選Grid均適用）
參數： id: Grid控件對應id
store : 插入行數據對應的store
index： 插入的位置（從0開始），當不傳該參數時，默認插入到表格末尾
場景舉例： 當新增了一個用戶後，會將該用戶自動的插入到用戶列表的最後一行，以下所示：

圖 203 新增一個用戶

圖 204 新增的用戶自動插入到Grid的最後一行
爲實現該功能，在新增用戶processor對應的成功回調中，添加以下代碼便可：
var ds = dc.getDataStore('result');
view.grid.insertRows("user_grid",ds);
8) view.grid.deleteRow(id,index)
解釋：刪除Grid的選中行（適用於單選Grid）
參數：id: Grid控件的id
index： 待刪除的行的下標（從0開始），當不傳入此參數時，默認選擇刪除選中的行.
場景舉例：當刪除Grid列表中的一個用戶的時候，會首先選中它所在的行，而後點擊刪除，刪除成功後，要在Grid中將這行數據也刪除，以下所示：

圖 205 刪除Grid中的選中行

圖 206 刪除成功後的效果
要實現該功能，只需在刪除人員的processor的成功回調中加入以下代碼便可：
view.grid.deleteRow("user_grid");
9) view.grid.deleteRows(id,indexs)
解釋：刪除Grid中選中的多行（適用於多選Grid）
參數：id: Grid控件對應的id
indexs: 待刪除的Grid的行的下標構成的數組，不傳遞此參數時默認刪除全部選中的行
場景舉例：當爲某個管理角色刪除多個對應的人員時，須要用到多選的Grid，以下所示：

圖 207 爲管理角色刪除多個對應人員

圖 208 刪除成功後的效果圖
要實現這個功能，須要在刪除人員對應的processor的成功回調中執行下面的語句：
view.grid.deleteRows("user_grid");
這樣就會刪除全部選中的行的數據。
若是想刪除指定的某些行，能夠這樣實現：
//刪除第1行、第3行和第4行
view.grid.deleteRows("user_grid",[0,2,3]);
10) view.grid.updateRow(id,store,index)
解釋：更新Grid中的某一行
參數：id : Grid控件對應的id
store： 用來更新行的數據（以dataStore的方式封裝）
index： 待更新的行的下標（當不傳時，默認更新選中的第一行）
場景舉例： 當須要修改某個用戶的信息時，能夠經過以下方式：

圖 209 點擊超連接更新人員信息

圖 210 修改性別信息

圖 211 修改後的數據信息
要實現這個功能，在修改用戶信息的成功回調中，添加以下代碼：
var ds = dc.getDataStore('result');
view.grid.updateRow('user_grid',ds);
11) view.grid.getRow(id)
解釋： 得到Grid選中行的數據，並封裝成dataStore的格式（適用於單選Grid）
參數： id ：Grid控件對應的id
index: 待獲取的行的下標（不傳的時候默認獲取當前選中行）
返回值：Grid選中行的數據（dataStore格式）
場景舉例：要修改某個用戶的信息的時候，點擊超連接會將該行對應的數據設置到一個Form控件上，以下所示：

圖 212 點擊超連接彈出修改頁面

圖 213 修改頁面
爲了實現這個功能，只須要在點擊超連接的事件裏添加以下代碼：
var ds = view.grid.getRow("user_grid");
獲得這個ds將其設置爲Form綁定的dataStore便可（調用view.form.setDataStore()方法）。
12) view.grid.getRows(id,indexs)
解釋： 得到Grid選中行的數據，並封裝成dataStore的格式（適用於多選Grid）
參數： id ：Grid控件對應的id
indexs : 待獲取的行的下標構成的數組
返回值：Grid選中行的數據（dataStore格式）
場景舉例：在多選的Grid中，若是想獲取第1行、第3行和第4行對應的值，可經過以下方法：
view.grid.getRows("user_grid",[0,2,3]);
13) view.grid.getPropertyValue(id, propertyName, index)
解釋： 得到Grid中某指定行的某個屬性值
參數： id: Grid控件對應的id
prpertyName ：屬性名
　 index : 指定行的下標（不傳時，默認爲選中的行）
返回值： 屬性的值
場景舉例： 當要刪除一個用戶的時候，會得到該用戶對應的id並傳遞到後臺進行刪除，其操做流程以下所示：

圖 214 選中一個用戶並刪除

圖 215 刪除成功的頁面
在「刪除」事件中，須要得到當前選中行的id屬性值，並向後臺發送processor請求，代碼以下：
var userId = view.grid.getPropertyValue("user_grid", "id");
view.processor.deleteUserById(userId);
14) view.grid.setPropertyValue(id, propertyName, propertyValue, index)
解釋： 設定Grid某行中某個屬性的值
參數： id: Grid控件對應的id
propertyName: 屬性名稱
propertyValue: 屬性值
index: 要設置屬性值的行的索引，如不傳的話默認修改當前選中行
場景舉例：當須要將Grid選中行的「賬號」屬性值改成」wang-fan」時，可經過添加下面的代碼實現：
view.grid.setPropertyValue("user_grid", "account", "wang-fan");
15) view.tree.setDataStore(id,store)
解釋： 爲Tree控件綁定數據（注意：此方法只適用於全加載的Tree）
參數： id: Tree控件的id
store: Tree所需綁定的dataStore，須要符合樹形結構
場景舉例：對於組織單元類型這樣的一棵樹，它是全加載的，在page-load發送完請求取得全部的數據後，在成功回調中只須要調用以下方法，樹中的全部數據均會被綁定上：
var ds = dc.getDataStore('result');
view.tree.setDataStore("unitType_tree",ds);
數據被綁定後，其顯示效果以下所示：

圖 216 組織類型樹的頁面展現效果
16) view.tree.deleteNode(id,node)
解釋：刪除Tree控件中的node節點
參數：id: Tree控件的id
node: 待刪除的樹中的節點
場景舉例： 在組織機構樹中，能夠刪除某個節點，以下所示：

圖 217 刪除「國際事業部9」這個樹節點

圖 218 刪除成功後的效果
在刪除節點的成功回調中，須要在Tree控件中將該結點刪除，調用以下方法便可：
//刪除右鍵選中的節點node
view.tree.deleteNode("unit_tree",node);
17) view.tree.deleteNodes(id,nodes)
解釋： 刪除Tree中的多個節點
參數： id: Tree控件的id
nodes: 待刪除的節點構成的數組
場景舉例： 對於一個複選樹控件，若是選中了多個節點後要將這些節點刪除，便可經過以下代碼實現：
//獲得全部複選框中選中的節點
var selectedNodes = unieap.byId("unit_tree").getSelectedNodes();
//刪除這些選中的節點
view.tree.deleteNodes("unit_tree",selectedNodes);
18) view.tree.updateNode(id,node,store)
解釋： 更新Tree中的某個節點
參數： id: Tree控件的id
node: 待更新的節點
store: 用於更新節點的dataStore
場景舉例：更新組織機構樹中的某個節點，以下所示：

圖 219 修改前的組織單元信息

圖 220 修改後的組織單元信息
點擊保存按鈕後，選中節點所對應的數據也會發生變化，以下所示：

圖 221 修改後節點的數據值發生了變化
要實現修改節點的功能，只須要在processor對應的成功回調中添加以下代碼便可：
//得到修改後的數據
var ds = dc.getDataStore("result");
//得到當前Tree中選中節點
var node = unieap.byId("unit_tree").getCurrentNode();
//修改Tree中對應的節點
view.tree.updateNode("unit_tree", node, ds);
19) view.tree.getPropertyValue(id,node,propertyName)
解釋： 得到Tree中某一節點對應的屬性值
參數： id： Tree控件的id
node: 待獲取屬性值的節點
propertyName: 待獲取的屬性值
返回值： 屬性值
場景舉例： 當要刪除某個組織單元的時候，須要獲取待刪除節點的id屬性傳到後臺，其效果以下：

圖 222 右鍵刪除樹中某一節點

圖 223 刪除成功後的效果
在點擊「刪除」菜單項的事件中，須要獲取當前選中節點的id屬性，代碼以下：
//得到待刪除節點的id屬性
var nodeId = view.tree.getPropertyValue("unit_tree",currentNode,"id");
view.processor.deleteUnitById(nodeId);
20) view.tree.setPropertyValue(id, node, propertyName, propertyValue)
解釋： 設置Tree中某個節點的某個屬性的值
參數： id: Tree控件的id
node: 待修改屬性的節點
propertyName: 待修改的屬性名
propertyValue: 待修改的屬性值
場景舉例： 當修改了某個組織單元節點的屬性值後，要在樹中對其進行更新，如僅修改了一個組織單元節點的name屬性值，則可經過以下代碼同步更新樹中相應的顯示內容：
view.tree.setPropertyValue("unit_tree", currentNode, "name", "事業部");
21) view.tree.getAllNodes(id,isContainRoot,node)
解釋：得到node下的全部已經渲染出的全部子孫後代節點（即得到以node爲根的子樹的全部節點）
參數：id: Tree控件的id
isContainRoot: 返回的結果集中是否包含當前node節點，true表明包含，false表明不包含
node: 當前節點
返回值：全部node子孫節點構成的數組
場景舉例：當在程序要得到以node爲根的全部子孫節點時，可調用以下方法：
//得到當前節點的所有已渲染出的子孫節點
var nodes = view.tree.getAllNodes("menuTree",false,node);
22) view.tree.addChildren(id,node,store,configMap)
解釋： 爲node節點添加相應的子節點（適用於懶加載的樹）
參數： id: Tree控件的id
node: 要添加子節點的節點
store: 待添加的子節點
configMap: 配置參數Map，如不傳此參數默認使用樹中配置的參數。
這裏須要對configMap參數進行詳細的解釋，此參數適用於異構懶加載樹的場景。在配置樹的相關屬性時，要制定Tree的相關屬性對應的dataStore的屬性名，以下所示：

圖 224 Tree控件的id、label、parent屬性的配置
但若是樹中不一樣層次的節點來自於不一樣的dataStore的時候，沒法爲其設置一個統一的名字，此時須要在程序中動態切換這幾個參數的配置，用來指定這幾個關鍵屬性的名稱，以下所示：
configMap = {
id : 'id',
label : 'title',
parent : 'parentId'
});
此時即表明樹的id爲dataStore中id屬性，label爲dataStore中的title屬性，parent爲dataStore中的parentId屬性。
須要注意的是，只有在異構切換樹中節點的dataStore時才須要使用該參數，不然在Tree的屬性視圖中進行相應的配置便可。
場景舉例：異構懶加載樹
有的時候，樹的不一樣層次的節點可能來自於不一樣的dataStore，以下圖所示：

圖 225 異構懶加載樹
這是一棵懶加載的樹，其中「迭代」爲虛根，第一層節點綁定的是sprint dataStore，而第二層節點綁定的是backlog dataStore。在sprint的dataStore中，幾個關鍵屬性的名稱爲id、title、parentId，而在backlog的dataStore中，幾個關鍵屬性的名稱爲id,name和sprintId。在Tree控件中配置的相應屬性爲id,label,parentId，可見，如何將不一樣的dataStore的相關屬性統一是可否實現異構加載樹功能的關鍵，此時方法中的參數configMap就起到了相當重要的做用。
在查詢sprint節點的成功回調中，編寫以下代碼實現加載出第一層節點的功能：
//獲得查詢返回的dataStore
var ds = dc.getDataStore('result');
//獲得當前Tree的虛根節點
var root = unieap.byId("isomerismTree").getRootNode();
//爲Tree添加第一層節點
view.tree.addChildren("isomerismTree", root, ds, {
id : 'id',
label : 'title',
parent: 'parentId'
});
當展開第一層的某個節點的時候，會去加載該sprint節點下的全部backlog節點，在該查詢方法的成功回調中，須要編寫以下代碼：
//獲得查詢返回的dataStore
var ds = dc.getDataStore('result');
//爲當前展開節點添加第二層節點
view.tree.addChildren("isomerismTree", currExpandNode, ds, {
id : 'id',
label : 'name',
parent: 'sprintId'
});
這樣便可成功的構造出一棵異構的懶加載樹。
6.1.5.6 工具類JS開發
【注意】該工具類js只能在view模型對應的js中調用。
在單幀環境下開發工具類js須要注意如下幾點：
 若是工具類js的function參數爲某一控件的id，須要在調用處經過getRealId方法獲得真實的id再傳入，以下所示：
//demoTool.js
function demoFunction(id){
alert(id);
}
//demo.view
dojo.require("unieap.view.View");

unieap.define("demo", function () {

dojo.declare("_demoDC.demo.View", unieap.view.View, {
...... ,
page_load: function () {
demoFunction(getRealId(「grid1」));
}
});
var view = new _demoDC.demo.View();
view.init();
return view;
})
 該工具類js中，避免定義變量，只能定義function。
6.1.5.7 引用第三方JS庫
咱們在引用第三方js庫的時候，經常會用到其實現的DOMContentLoaded事件，在window.onload以前加入許多初始化的動做，來加強用戶體驗，好比在Jquery中有以下代碼：
$(document).ready(function() {
// put all your init code in here.
});
在單幀環境下，須要使用dojo對於DOMContentLoaded事件的實現，以下所示：
dojo.addOnLoad(function() {
// put all your init code in here.
});
請將帶有選擇器的代碼寫在「unieap.define」的閉包中，好比經過view模型腳本編輯器編寫的代碼最後就會生成到一個「unieap.define」的閉包中；而且若是用到id的選擇器，須要調用getRealId方法獲得真實的id，以下所示：
unieap.define("demo", function () {
function demoFunction() {
var demoObj = $(「#」 + getRealId(「demoElement」));
}
demoFunction();
})

6.1.6 View組件
6.1.6.1 新建View組件
選擇當前DC工程下的「metamodel」>「view」文件夾，在右鍵菜單中點擊「New」>「View組件」菜單項，以下圖所示：

圖 226 新建View組件菜單
點擊菜單項後，會打開新建view組件的嚮導，以下圖所示：

圖 227 新建View組件嚮導
在嚮導中輸入View組件的相關信息後，點擊<Finish>按鈕，完成新建view組件。
完成新建後，會打開view組件的UIDesigner編輯器，並默認切換到UIDesigner編輯器的頁面組件概要頁面以下圖所示：

圖 228 View組件編輯器
【提示】UIDesigner編輯器中其它頁面的使用將在後面的章節中介紹。
6.1.6.2 View組件編輯器
做者輸入域中能夠編輯View組件的做者信息。
【技巧】做者輸入域的默認值爲Eclipse啓動參數配置中所設置的用戶信息。
版本號輸入域中能夠編輯View組件的版本號信息。
描述輸入域中能夠編輯View組件的描述信息。
標題輸入域中能夠填寫View組件的標題屬性，即頁面的標題。
點擊入口信息連接能夠切換到UIDesigner編輯器的入口信息頁面。
點擊過程調用連接能夠切換到UIDesigner編輯器的過程調用頁面。
點擊設計連接能夠切換到UIDesigner編輯器的設計頁面。
點擊腳本連接能夠切換到UIDesigner編輯器的腳本頁面。
點擊源碼連接能夠切換到UIDesigner編輯器的源碼頁面。
點擊數據集連接能夠打開數據集視圖。
完成view組件建立後，會自動生成組件相關的代碼文件，包括2個Java文件，2個Javascript文件和一個Jsp文件，點擊對應的代碼連接將用新的編輯器打開這些代碼文件，以下圖所示：

圖 229 打開View組件相關代碼文件
【提示】 Java文件的包路徑爲：首選項中配置的Java類默認包名前綴 + 當DC所屬SC工程名 + 當前DC工程名 + 「.action」；Javascript文件和Jsp文件的路徑爲：當前DC工程/content/view/generated。

 刪除View組件
選擇要刪除的View模型文件，在右鍵菜單中點擊「Delete」菜單項，以下圖所示：

圖 230 刪除View組件文件
點擊菜單項後，會彈出確認刪除對話框，以下圖所示：

圖 231 確認刪除對話框

點擊< OK >後，該View模型文件被刪除而且彈出是否自動刪除建立View組件自動生成的Javascript文件和Jsp文件的確認對話框，以下圖所示：

圖 232 刪除View組件文件對應源碼文件確認對話框

點擊< Yes >後，建立該View組件文件自動生成的Javascript文件和Jsp文件被刪除。
【注意】刪除View組件文件不會刪除建立該View組件文件自動生成的Java文件，須要用戶手動刪除。
6.1.6.3 與View模型的差別
從概念上說，View模型表明可獨立發佈訪問的頁面，View組件表明頁面上可複用的一塊可視化區域，不能獨立發佈訪問。
從生成代碼上說，View模型生成完整JSP頁面應有的結構，包括<DOCTYPE>、<html>、<head>、<body>等，view組件只生成可視化元素，最後以JSP標準動做<jsp:include>引入到View模型生成的JSP頁面中。
6.1.6.4 View組件通訊
6.1.6.5 使用頁面組件閉包名
若是使用Grid的列格式化，該列的formatter方法中指定html代碼中須要使用該頁面組件的公共方法，就須要首先獲取頁面組件對應的閉包名，以下所示：
return "<a href=\"#\" onclick=\"javascript:」 + getViewcContext() + 」.componentIdOnClick()\">" + inValue + "</a>";

6.2 使用可視化UI設計器
6.2.1 UIDesigner簡介
UIDesigner是UniEAP V4 WorkShop爲View模型和View組件提供的可視化編輯工具。UIDesigner提供了全部UniEAP RIA的控件，經常使用HTML控件以及控件模板。無需編寫複雜的HTML標籤與JS代碼，拖拽鼠標便可完成RIA風格頁面開發。UIDesigner還具有用戶自行擴展控件的能力，能夠無限增長可視化設計的控件。針對RIA頁面JS代碼編寫複雜的問題，UIDesigner腳本編輯器提供了強大的代碼提示、代碼高亮、對象自動識別等特性，更加入了貼心的快捷鍵支持，大幅提升了JS代碼的編寫效率。
6.2.2 View如何運做？
本節爲您介紹View模型與服務器進行交互，完成業務邏輯的流程。首先咱們來了解一下View模型中包含了哪些信息的定義：
1 View模型基本信息。
2 引用外部資源信息。
3 頁面佈局、控件定義。
4 頁面、控件響應事件的JS腳本。
5 全局變量、方法JS腳本。
6 Processor定義。
可見，View模型包含了Web應用程序頁面全部的信息，以及Web應用程序頁面與服務端交互所需的必要信息。在實際運行時，View模型會被轉換爲運行在瀏覽器端的HTML頁面，JS腳本以及運行在服務端的Java類。
HTML頁面運行在瀏覽器中，爲完成某些業務邏輯，必須與服務器交互。在UniEAP V4中，全部的業務邏輯都實如今BO模型中，也就是說，HTML頁面要完成業務邏輯，必須調用BO。
從實現上看，HTML頁面在瀏覽器端運行，能夠調用的只有JS腳本，而BO是運行在服務端的Java類。顯然，實現兩者的交互是須要一個媒介的，這個媒介要負責將瀏覽器端JS調用轉發到服務端，並將服務端的返回信息傳遞給瀏覽器端的JS。
Processor就是這個媒介。Processor實現了瀏覽器端JS透明調用在服務端的BO。在View模型轉換爲實際可執行程序代碼時，Processor被轉換爲兩部分：瀏覽器端一部分，服務器端一部分。在瀏覽器端，Processor是JS代碼，供頁面中其餘JS腳本調用；在服務器端，Processor是Struts2 Action，用於和BO進行交互。Processor 的 JS代碼經過發送Ajax請求和服務器端的Processor交互。這種Ajax交互使用了統一的數據格式——DataCenter，每一次Ajax請求瀏覽器端發送給服務器的都是DataCenter對象的JSON串，返回的也是DataCenter的JSON串。
下圖是一個完整的View完成與服務器交互的示例：

圖 233 View完成與服務器交互示意圖

如圖所示，在瀏覽器端，用戶經過操做頁面控件，觸發一個控件的事件，響應控件事件的JS腳本會調用JS腳本中的Processor（圖中標號1），Processor會向服務器發起一個Ajax請求（圖中標號2，數據格式是DataCenter），服務器端的Processor接收到請求，調用相應的BO 圖中標號3），BO中執行業務邏輯，調用DAO完成數據的持久化（圖中標號4），DAO則會與數據庫交互（圖中標號5），數據庫將持久化的結果返回給DAO（圖中標號6），DAO將結果返回給BO（圖中標號7），BO再將數據返回給服務器端Action（圖中標號8），服務器端Action將Ajax請求結果返回給瀏覽器端（圖中標號9，數據格式是DataCenter），瀏覽器端JS腳本Processor根據返回結果更新頁面控件（圖中標號10），將交互結果反饋給用戶。
6.2.3 進行UI設計
6.2.3.1 控件添加、選擇、佈局
設計頁面提供以圖形化的方式定義Web頁面，經過設計頁面能夠對控件進行以下操做：
 添加和刪除控件
 對控件的屬性進行修改
 對控件進行佈局，改變控件的位置
設計頁面以下圖所示：

圖 234 設計頁面
設計頁面主要分爲如下兩個部分，左側爲控件工具箱，右側的空白區域爲設計區，以下圖所示：

圖 235 設計頁面結構圖
「控件工具箱」區域主要提供選擇控件的功能，該區域中提供的控件有兩類，分別爲「基本控件」和「容器控件」，其中容器控件可以容納其餘的控件，而基本控件不能。點擊「控件工具箱」中的「select」選項，就能夠對「控件工具箱」中的控件進行選擇，例如選擇一個「TitlePane」控件，並將「TitlePane」控件添加到「設計區」中。操做步驟以下，首先鼠標左鍵點擊「select」區域，而後點擊「TitlePane」區域，此時鼠標形狀多了一個加號，將鼠標移動到「設計區」中，點擊鼠標左鍵，此時設計區中顯示出了「TitlePane」控件。以下圖所示：

圖 236 TitlePane控件
「設計區」區域用來顯示控件，經過「設計區」能夠選擇控件來對相應控件進行各類操做。在設計區中選擇顯示的「TitlePane」控件，「TitlePane」控件的圖形顯示以下圖所示：

圖 237 選中後的TitlePane控件
「TitlePane」控件被選中後，控件的上下左右及四個拐角出多出了黑點圖標，左上角多出了移動圖標及右上角多出了三角箭頭圖標。經過上述圖標能夠對控件進行以下操做：
 黑點圖標
將鼠標移動到黑點圖標上，此時鼠標的圖形形狀變爲更改圖形大小的形狀，此時按住鼠標左鍵並拖動，控件就會相應改變自身大小。
 移動圖標
將鼠標移動到移動圖標上，此時鼠標的圖形形狀變爲更改圖形位置的形狀，此時按住鼠標左鍵並拖動，控件就會相應改變自身位置。
 三角箭頭圖標
鼠標左鍵點擊三角箭頭圖標，此時控件會彈出快捷菜單，經過快捷菜單對控件的屬性進行更改，以下圖所示：

圖 238 控件彈出的快捷菜單

6.2.3.2 使用屬性視圖
屬性視圖用於顯示設計頁面中被選擇控件的各類屬性，而且提供更改屬性的功能。若是屬性視圖沒有出如今eclipse中，能夠經過如下方式顯示出屬性視圖。在eclipse中點擊「窗口」>「顯示視圖」>「其餘」菜單項，彈出對話框以下圖所示：

圖 239 顯示視圖對話框
在「常規」分類下選擇「特性」選項就能夠顯示出屬性視圖。在設計頁面選中「TitlePane」控件，屬性視圖就會顯示控件的相應屬性，以下圖所示：

圖 240 屬性視圖
以「TitlePane」控件爲例，屬性視圖能夠顯示該控件的標識(id)、高度(height)、寬度(width)、標題(title)等屬性，而且能夠在屬性視圖中對控件的屬性進行修改來更改控件。例如更改「TitlePane」控件的標題屬性，首先在屬性視圖中點擊值爲「TitlePane」的區域，以下圖所示：

圖 241 編輯屬性視圖
將「TitlePane」控件的標題由「TitlePane」更改成「TitlePane控件」，而後鼠標左鍵點擊設計頁面，此時「TitlePane」控件的標題發生了變化，以下圖所示：

圖 242 更改標題後的TitlePane控件
經過上述方式能夠對控件的其它屬性進行修改。

6.2.3.3 使用控件快捷菜單
除了經過屬性視圖能夠更改控件的屬性外，咱們還能夠經過快捷菜單來對控件的屬性進行修改，相比於屬性視圖，該方式簡單、易用。以「TitlePane」控件爲例，鼠標左鍵選中該控件，點擊控件右上角的三角箭頭圖標，此時控件會彈出相應快捷菜單，以下圖所示：

圖 243 TitlePane控件的快捷菜單
經過彈出的快捷菜單能夠對控件的屬性進行修改，例如更改控件的標題，步驟以下：首先在彈出的快捷菜單中鼠標左鍵點擊「標題文本框」，在文本框中寫入控件的標題，以下圖所示：

圖 244 經過快捷菜單更改控件屬性
在快捷菜單中更改完控件屬性後，鼠標左鍵點擊相應控件，此時快捷菜單關閉，控件的標題由「TitlePane控件」更改成「TitlePane」，以下圖所示：

圖 245 更改屬性後的TitlePane控件
經過上述方式能夠對控件的其它屬性進行修改。

6.2.3.4 使用大綱視圖輔助選擇控件
當設計頁面中含有較多控件，特別是容器控件中嵌入其餘控件的狀況下，若是想選中某個控件會很不方便， 而大綱視圖可以展示出設計頁面中衆多控件層次明確、結構清晰的圖形顯示，進而經過大綱視圖能夠很方便的選擇控件。若是大綱視圖沒有顯示在eclipse上，能夠經過以下方式來顯示出大綱視圖，首先點擊「窗口」>「顯示視圖」>「其餘」菜單項，在彈出的「顯示視圖」對話框中選擇「大綱」選項便可，以下圖所示：

圖 246 選擇大綱視圖
鼠標左鍵點擊設計頁面，此時大綱視圖即可以顯示出設計頁面上全部控件，以下圖所示：

圖 247 大綱視圖展現控件
經過大綱視圖能夠很方便的選擇控件，以上圖爲例，若是想選中「grid1」控件下的「cell4」控件，因爲設計頁面的長度顯示，「cell4」控件並無在設計頁面中顯示出來，沒法在設計頁面中進行選擇，可是經過大綱視圖仍然能夠選擇「cell4」控件，經過鼠標左鍵點擊「cell4」選項即可以選中「cell4」控件，此時設計頁面的「cell4」控件處於選中狀態，屬性視圖會顯示出「cell4」的相應屬性，以下圖所示：

圖 248 cell控件的屬性
經過大綱視圖能夠選擇設計頁面中的任意控件。
6.2.3.5 使用大綱視圖進行控件拖拽
當設計視圖佈局複雜，拖拽控件困難時，能夠經過大綱視圖直接對控件進行拖拽，其中拖拽操做包括：源控件拖拽爲目標控件的上節點，源控件拖拽爲目標控件的下節點和源控件拖拽爲目標控件的子節點，效果以下圖所示：

圖 249源控件拖拽爲目標控件的上節點

圖 250源控件拖拽爲目標控件的下節點

圖 251源控件拖拽爲目標控件的子節點
6.2.3.6 使用大綱視圖實現局部顯示
當設計視圖的控件過多且部分控件發生被遮擋的狀況，或者須要調整這些控件的佈局等屬性時，能夠使用局部顯示功能。

如上圖adaptivePane中的QueryGrid部分被遮擋，這時能夠選擇adaptivePane，點擊 來局部顯示其內部的佈局，以下圖所示：

圖 252 局部顯示效果圖
當但願繼續進入容器內部時，能夠繼續右鍵點擊控件，選擇「進入」，以下圖所示：
圖 253 進入容器內部

圖 254 進入容器內部效果圖
當須要退出局部顯示時，只需再次點擊 ，同時保存局部顯示時的修改數據。
6.2.3.7 使用大綱視圖進行控件拷貝粘貼
當須要進行控件的拷貝粘貼操做時，可經過大綱視圖來實現；大綱視圖的拷貝粘貼支持多選以及跨view之間的操做。
【注意】模式控件不支持拷貝粘貼，所複製的控件中如含有模式控件將自動忽略。
在大綱視圖選中須要拷貝的控件，而後使用快捷鍵Ctrl+C，以下圖所示：

圖 255 選中並使用快捷鍵Ctrl+C拷貝
在粘貼的大綱視圖上使用快捷鍵Ctrl+V進行粘貼，自動彈出「命名衝突」對話框，可進行控件id的修改或者使用默認生成的id，以下圖所示：

圖 256使用快捷鍵Ctrl+V粘貼

圖 257粘貼後的效果圖
6.2.3.8 使用數據集
數據集的概念，數據集即數據的來源，它的做用是爲web頁面的各類控件提供數據，控件顯示出的內容來源於數據集，如數據表格Grid控件，表單Form控件等的數據都來自於數據集。定義數據集可按以下方式：首先須要打開「數據集」視圖，若是eclipse沒有顯示出數據集視圖，能夠點擊「窗口」>「顯示視圖」>「其餘」，此時彈出「顯示視圖」對話框，以下圖所示：

圖 258 顯示數據集視圖
點擊「數據集」選項，eclipse顯示出「數據集」視圖，以下圖所示：

圖 259 數據集視圖
若是想增長一個名稱爲「entityDataStore」的數據集，點擊上圖所示的加號圖標，彈出「新建DataStore」的對話框，以下圖所示：

圖 260 新建數據集對話框
新建數據集對話框包含以下內容：
 「名稱」文本框
表示數據集的名稱。
 「類型」下拉列表
類型下拉列表中包含兩條數據，分別爲實體對象「yEntit」和數據傳輸對象「DTO」，當選擇「Entity」時，下面的對象列表中會顯示出全部類型爲「Entity」的實體對象，當選擇「DTO」時，下面的對象列表中會顯示出全部類型爲「DTO」的數據傳輸對象，
 過濾文本框
當對象列表中顯示的數據較多時，能夠經過文本框來過濾出本身想要的對象數據，在文本框中輸入過濾文本，對象列表會列出全部名稱開始部分與過濾文本相同的對象數據。
 對象列表
用於顯示對象數據，當「類型」下拉列表中爲「Entity」時，對象列表顯示實體對象，當「類型」下拉列表中爲「DTO」時，對象列表顯示數據傳輸對象。
 列信息表格
顯示當前數據集所包含的列
定義一個新的數據集步驟以下：首先在「名稱」文本框中填寫數據集的名稱「entityDataStore」，若是數據集的列信息來源於ENTITY對象，那麼「類型」下拉列表中須要選擇「Entity」，若是數據集的列信息來源於DTO對象，那麼「類型」下拉列表中須要選擇「DTO」，若是數據集的列信息來源於pojo對象，那麼「類型」下拉列表中須要選擇「pojo」。以數據集的列信息來源於Entity對象爲例，雙擊須要選擇的對象數據，以下圖所示：

圖 261 導入Entity文件
雙擊相應的Entity文件後，數據集的列表格會顯示相應的列信息，其中的列信息來源於Entity文件。
點擊<下一步>按鈕，以下圖所示。

圖 262 操做符設置
對操做符進行設置。單擊操做符顯示以下圖所示：

圖 263 操做符設置
雙擊一條數據，添加到排序設置裏。能夠對數據進行排序。點擊 ， 來來調整排序的優先順序。點擊 來刪除排序的字段。點擊排序對應的字段來選擇排序方法。

圖 264 設置查詢信息
點擊<完成>按鈕，便完成了新建數據集的操做，此時數據集視圖會顯示剛剛新建的數據集，以下圖所示：

圖 265 數據集在視圖中的顯示
數據集視圖還提供了對數據集刪除、修改和刷新功能。
 刪除數據集
在數據集視圖中選中相應的數據集，點擊右上角的差號圖標，即可將相應數據集刪除。
 修改數據集
在數據集視圖中選中相應的數據集，點擊右上角的文本圖標，此時彈出「編輯DataStore」對話框，以下圖所示：

圖 266 編輯數據集
在「編輯DataStore」對話框中能夠對現有數據集進行編輯操做，包括更改數據集的名稱，數據集的列信息和記錄數。
 刷新數據集
數據集的列信息來源於Entity、DTO或pojo文件，當相應的文件發生更改時，點擊數據集視圖右上角的刷新圖標，此時數據集的列信息會與發生改變的文件進行同步，更新相應的列信息。

6.2.3.9 綁定控件事件
事件的概念，事件能夠理解爲發生了什麼事情，定義事件，就是控件觸發了該事件時可以執行的操做，即定義一個響應該事件的方法。以「TitlePane」控件爲例，若是想在打開「TitlePane」控件時彈出一個「您打開了一個TitlePane控件」提示框，即可以按照以下方式進行定義：首先在設計頁面選中「TitlePane」控件，而後打開屬性視圖，點擊屬性視圖中的「事件」選項，即可以看到「TitlePane」控件的全部事件了，以下圖所示：

圖 267 TitlePane控件的事件
若是想在顯示「TitlePane」控件時彈出提示框，只須增長事件名稱爲「onShow」的方法便可，鼠標左鍵點擊相應的「方法」列，以下圖所示：

圖 268 增長事件方法
鼠標左鍵點擊上圖所示的加號圖標，此時設計頁面自動跳轉到腳本頁面，以下圖所示：

圖 269 定義事件方法
如上圖所示，若是想在顯示「TitlePane」控件時彈出提示框，即可在「事件響應方法內容」區域填寫「alert(‘您打開了一個TitlePane控件’)」，以下圖所示：

圖 270 定義事件方法內容
到此爲止，便定義完成了一個顯示「TitlePane」控件的事件方法，切換回設計頁面，此時屬性視圖的「事件」標籤頁會顯示剛剛定義的方法，以下圖所示：

圖 271 定義完成的事件方法
點擊上圖所示的加號圖標，能夠對已經定義的事件方法內容進行修改，點擊上圖所示的減號圖標，能夠將已經定義的事件方法刪除。
6.2.3.10 設置頁面init，load，unload事件
打開腳本編輯器頁，在左側下拉條中選擇「page」，此時點開右側下拉條會出現三個事件:init，load，unload。以下圖所示：

圖 272 定義init,load,unload方法
其中init事件將在頁面渲染以前進行，用於對頁面進行初始化。頁面渲染結束後將執行load事件，用於加載用戶的一些操做。而unload事件則在頁面關閉後或刷新頁面時進行，用來銷燬頁面中全部UI控件。
6.2.3.11 預覽頁面效果
使用UI設計器完成控件的開發後，設計頁面並不能精確反映出控件在web頁面中的效果，針對這一狀況UniEAP V4提供了頁面的「預覽」功能，用於在view文件未部署到web服務器時預覽頁面的實際效果。
在完成控件的繪製後，設計頁面效果以下圖所示：

圖 273 控件在設計頁面的顯示效果
<預覽>按鈕位置以下圖所示：

圖 274 預覽功能
鼠標左鍵點擊設計頁面的某一區域，此時eclipse工具欄上的<預覽>按鈕處於亮顯狀態，點擊<預覽>按鈕，控件在瀏覽器中的顯示效果以下圖所示：

圖 275 控件在瀏覽器中的顯示效果
經過預覽功能能夠直接查看定義好的控件在瀏覽器中的顯示效果，而沒必要將開發組件運行起來後查看控件的顯示效果。
【警告】因爲eclipse的緣由，在使用預覽功能前請先配置首選項的web瀏覽器部分，詳情請參閱2.2.3節。

6.2.3.12 設置資源引用
爲了在view模型中可以引用css、js、jsp文件，UniEAP V4提供了便捷的「資源引用」工具，打開按鈕以下圖所示：

圖 276 資源引用功能
單擊<資源引用>按鈕後彈出對話框，該對話框中會顯示當前view文件所引用的js、jsp和css文件，而且可對其進行增長和刪除。以下圖所示：

圖 277 資源引用功能
該對話框左邊部分列出了當前view文件所引用的所有外部資源以「文件名-存放地址」的格式顯示。該對話框支持對所引用外部資源的增長、刪除以及對該列表的上移和下移，如右側按鈕所示。點擊<增長>按鈕後將彈出對話框，以下圖所示：

圖 278 資源引用功能
該對話框將顯示當前工程中存放的全部css、jsp或js文件，並支持過濾功能。選擇文件後點擊<肯定>鍵則將所選定文件添加進引用列表中。如須要對引用資源的列表進行刪除操做，則只需選擇指定文件後點擊<刪除>按鈕便可。
6.2.3.13 基本控件的使用
本節爲您介紹UIDesigner提供的基本控件中各個控件的使用方法。
向UIDesigner繪圖區中添加控件的方法是：在View模型文件的「設計」頁面，從左側「Palette」中單擊選擇控件，在右側設計區域放置控件的位置單擊鼠標左鍵。請參看下圖：

圖 279向View設計視圖中添加控件（以Button控件爲例）
1. 按鈕（Button）
Button控件和普通HTML中的button標籤相似，能夠像使用普通按鈕同樣來使用。支持數據綁定，能夠綁定數據源中的值做爲按鈕的標籤。上圖便是以Button控件爲例顯示瞭如何定義一個基本控件。您能夠經過點擊右側大綱視圖中對應的控件後，點擊下方的「特性」，顯示出Button控件的相關屬性信息並對其進行修改，這裏咱們修改了該控件的「label」和「width」屬性，以下圖所示：

圖 280 修改Button控件的相關屬性
此外，咱們提供了一種更加簡便的修改控件屬性的方法——快捷屬性菜單。在設計區中選中該Button控件，點擊上方出現的 ，會彈出以下圖所示的快捷屬性菜單，經過該快捷屬性菜單能夠修改該控件的一些經常使用信息（如ID、名稱等），還能夠編輯相關的事件信息，以下圖所示：

圖 281 Button控件的屬性快捷菜單
Button控件所對應的經常使用屬性及其描述以下表所示：
屬性名 描述
accessKey
設置或獲取對象的快捷鍵。
height
設置控件的高度，支持數字或者百分比。
iconClass
經過改變css樣式來設置按鈕上的圖標。
label
按鈕上顯示的文本值。
width
設置控件的寬度，支持數字或者百分比。
表 1 Button控件的經常使用屬性及其描述
Button控件所對應的經常使用事件及其描述以下表所示：

事件名 描述
onClick
按鈕的點擊事件。
表 2 Button控件的經常使用事件及其描述
2. 複選按鈕（CheckBox）
CheckBox控件支持數據綁定，下圖中顯示了CheckBox控件設計區中的位置及樣式：

圖 282 CheckBox控件
您可經過快捷屬性菜單或屬性視圖定義CheckBox控件的相關屬性和事件，雙擊可編輯CheckBox顯示的內容信息。例如用快捷屬性菜單來修改CheckBox控件的選中狀態以及狀態值的設置，以下圖所示：

圖 283 CheckBox快捷屬性菜單
3. 複選按鈕組（CheckBoxGroup）
CheckBoxGroup控件具備如下的功能：
1） 依靠unieap.ds.DataStore類型的數據源構造一個複選按鈕組。
2） 複選按鈕組自己做爲一個FormWidget支持數據綁定，可經過getBinding()方法取得綁定對象。
3） 用戶可經過設置cols值來控制按鈕組的佈局。
4） 支持對組內按鈕狀態變化的監聽。
5） 支持組內按鈕反選。
6） 支持組內按鈕的獲取。
下圖中顯示了CheckBoxGroup控件在設計區中的位置及樣式：

圖 284 CheckBoxGroup控件
CheckBoxGroup控件的dataProvider屬性能夠用來設置數據源的相關信息。
您可經過快捷屬性菜單或屬性視圖定義CheckBoxGroup控件的相關屬性和事件，雙擊可編輯CheckBoxGroup控件顯示的內容信息。
4. 普通下拉框（ComboBox）
ComboBox控件具備如下的功能：
1） 支持的數據源包括unieap.ds.DataStore和html的option節點。
2） 輸入框支持模糊匹配，支持拼音查詢。
3） 支持根據指定數據列排序。
4） 支持ComboBox組件間的級聯。
5） 支持多種展示風格，包括列表、表格、多選列表。
6） 支持數據過濾。
7） 支持自定義下拉框的顯示內容(見popup屬性)。
下圖中顯示了ComboBox控件的在設計區中的位置及樣式：

圖 285 ComboBox控件
ComboBox控件所對應的主要屬性及其描述以下表所示：

屬性名 描述
autoCompleter
設置自動下拉相關信息
cascade
設置級聯相關信息
dataFilter
設置數據源的過濾查詢信息
dataProvider
設置數據源相關的信息
dataType
設置控件(綁定)值的數據類型
decoder
設置下拉框轉碼相關的信息
editFormatter
設置編輯格式化信息
popup
設置彈出控件控制器
表 3 Button控件的經常使用事件及其描述
您可經過快捷屬性菜單或屬性視圖定義ComboBox控件的相關屬性和事件，例如您能夠經過快捷屬性菜單設置下拉列表的轉碼顯示值和實際值，以下圖所示：

圖 286設置ComboBox轉碼值
5. 下拉樹控件（ComboBoxTree）
從外觀上來看，ComboBoxTree和ComboBox控件相似。但後者下拉的是列表，而前者是一棵樹形結構。當用戶須要展示帶有層次結構的數據時，能夠考慮使用ComboBoxTree控件。下圖中顯示了ComboBoxTree控件在設計區中的位置及樣式：

圖 287 ComboBoxTree控件
ComboBoxTree控件所對應的常見屬性及其描述以下表所示：
屬性名 描述
dataProvider
數據提供對象。
expandTree
設置是否點擊下拉按鈕就根據樹的id來展開樹。
treeJson
動態建立一棵樹，傳入樹的屬性便可。
表 4 ComboBoxTree控件的經常使用事件及其描述
您可經過快捷屬性菜單或屬性視圖定義ComboBoxTree控件的相關屬性和事件，雙擊可編輯ComboBoxTree顯示的內容信息。
用戶須要使用ComboBoxTree展示數據時，最重要的是配置ComboBoxTree中的Tree部分屬性，該部分屬性以下：

圖 288 ComboBoxTree屬性頁
其中binding屬性記錄tree的綁定信息，爲Json串格式，相似tree屬性，下面舉例說明binding的配置方法：
leaf:'leaf', store:'menuTree', parent:’parent’,query:{ name: 'parent', relation: '=', value:''}
即對於該ComboBoxTree綁定了名爲「menuTree」的dataStore，並綁定leaf屬性爲該dataStore的leaf字段，query屬性相似於tree的query，「{ name: 'parent', relation: '=', value:''}」表示第一層節點是由「parent字段數值爲空」的節點構成。
checkLogic屬性定義了該下拉樹的複選邏輯，通常寫爲：
model:'single'
其中multiple爲可多選且沒有複選邏輯；cascade關聯全部的父子節點；parentCascade關聯全部父節點；childCascade關聯全部子節點；single只能選擇一個節點；halfChecked當某節點的子節點未徹底選中時，該節點處於半選狀態。
【注意】如不須要出現複選框圖標，則不要配置該屬性。
Label屬性爲虛擬根節點名稱，配置該屬性會產生名爲該屬性值的虛擬根節點，不須要的時候則不配置該屬性。
若是下拉樹須要配置懶加載，相似於Tree控件，在下拉樹控件的loader-rpc方法中調用processor去後臺取數據，並在成功回調中將下層節點數據放入樹的dataStore中並展示。具體可參考樹的實現方法一節。

6. 頁面組件控件（Component）
經過Component控件，能夠實如今當前頁面中引用其餘頁面組件的功能，從而達到頁面組件複用的目的。下圖中顯示了Component控件在設計區中的位置及樣式：

圖 289 Component控件
Component控件中最重要的屬性是ref屬性，經過該屬性能夠選擇所要包含的頁面片斷，以下圖所示：

圖 290 Component控件的ref屬性
固然，您也能夠經過快捷屬性菜單來設置引用的頁面組件，以下圖所示：

圖 291設置Component的組件引用
7. 日期文本框（DataTextBox）
經過DataTextBox控件，能夠進行日期的選擇。下圖中顯示了DataTextBox控件的在設計區中的位置及樣式：

圖 292 DataTextBox控件
DataTextBox控件所對應的常見屬性及其描述以下表所示：

屬性名 描述
autoDate
當輸入文本框內容爲空而且鼠標焦點置入時,設置文本框是否顯示當前時間。
range
設置日期的選擇範圍。
表 5 DataTextBox控件的經常使用屬性及其描述
您可經過快捷屬性菜單或屬性視圖定義DataTextBox控件的相關屬性和事件，雙擊可編輯DataTextBox顯示的內容信息。
8. 文本上傳控件（FileInput）
FileInput控件至關於HTML標籤中的<input type="file" name="uploadFile" />。下圖中顯示了FileInput控件在設計區中的位置及樣式：

圖 293 FileInput控件
FileInput控件所對應的經常使用屬性及其描述以下表所示：

屬性名 描述
cancelText
設置清空控件值的按鈕名稱。
fileFilter
設置只容許上傳特定後綴名的文件。
表 6 FileInput控件的經常使用屬性及其描述
您能夠經過快捷屬性菜單修改文本上傳控件的按鈕標題，以下圖所示：

圖 294設置FileInput控件的瀏覽按鈕和取消按鈕的標題
9. 數據表格控件（Grid）
經過Grid控件可自動的生成數據表格。下圖中顯示了Grid控件的在設計區中的位置及樣式：

圖 295 Grid控件
您可經過快捷屬性菜單或屬性視圖定義Grid控件的相關屬性和事件，雙擊可編輯Grid顯示的內容信息。例如您能夠經過快捷屬性菜單選擇須要綁定的DataStore，以下圖所示：

圖 296在Grid控件中綁定DataStore
10. Hr控件（Hr）
使用Hr控件至關於在頁面中加入了HTML代碼片斷：<hr></hr>。下圖中顯示了Hr控件的在設計區中的位置及樣式：

圖 297 Hr控件
您可經過快捷屬性菜單或屬性視圖定義Hr控件的相關屬性和事件，雙擊可編輯Hr控件顯示的內容信息。例如您能夠經過快捷屬性菜單設置Hr標籤的寬度和高度，以下圖所示：

圖 298修改Hr控件的高度和寬度
11. HTML控件（HTML）
經過使用HTML控件，能夠直接在頁面中寫入HTML代碼片斷。當基本控件和容器沒法知足用戶的需求時，咱們能夠藉助HTML控件，在HTML控件中填入HTML源碼，添加到頁面的相應位置。下圖中顯示了HTML控件的在設計區中的位置及樣式：

圖 299 HTML控件
您可經過快捷屬性菜單或屬性視圖定義HTML控件的相關屬性和事件，雙擊可編輯HTML控件顯示的內容信息。例如在快捷屬性菜單中，您能夠直接編輯須要寫入的HTML代碼，以下圖所示：

圖 300爲HTML控件添加內容
12. 圖像（Image）
經過Image控件能夠方便的插入一張圖片。下圖中顯示了Image控件的在設計區中的位置及樣式：

圖 301 Image控件
您可經過快捷屬性菜單或屬性視圖定義Image控件的相關屬性和事件，雙擊可編輯Image控件顯示的內容信息。在屬性快捷菜單，能夠經過圖片的URL路徑來選擇要展現的圖片，以下圖所示：

圖 302設置Image控件所顯示圖片的URL路徑
13. InlineEditBox控件（InlineEditBox）
從外表上看，InlineEditBox控件是一個只讀文本，當點擊只讀文本時，會彈出一個編輯器，它能夠對文本進行編輯。編輯器失去焦點後，編輯器消失，文本的值發生改變。下圖中顯示了InlineEditBox控件的在設計區中的位置及樣式：

圖 303 InlineEditBox控件
InlineEditBox控件所對應的常見屬性及其描述以下表所示：

屬性名 描述
decoder
設置InlineEditBox的轉碼，例如將數字3轉碼成遼寧省等。
displayFormatter
對InlineEditBox控件的顯示值進行格式化。
editor
設置InlineEditorBox控件的編輯器，默認編輯器爲unieap.form.TextBox。
showUnderLine
設置是否在只讀文本下顯示下劃線。
表 7 InlineEditBox控件的經常使用屬性及其描述
您可經過快捷屬性菜單或屬性視圖定義InlineEditBox控件的相關屬性和事件，雙擊可編輯InlineEditBox控件顯示的內容信息。
14. 標籤（Label）
經過Label控件，能夠直接生成相應的標籤。下圖顯示了Label控件的在設計區中的位置及樣式：

圖 304 Label控件
您可經過快捷屬性菜單或屬性視圖定義Label控件的相關屬性和事件，雙擊可編輯Label控件顯示的內容信息。
15. 連接（Link）
經過使用Link控件能夠直接創建一個連接。下圖中顯示了Link控件的在設計區中的位置及樣式：

圖 305 Link控件
您可經過快捷屬性菜單或屬性視圖定義Link控件的相關屬性和事件，雙擊可編輯Link控件顯示的內容信息。例如經過屬性快捷菜單，您能夠編輯Link控件的控件內容和連接地址，以下圖所示：

圖 306編輯Link控件的控件內容和連接地址
16. 數字文本框控件（NumberTextBox）
使用NumberTextBox控件，在文本框中只能輸入負號、數字和小數點。默認狀況下，數字文本框會對輸入的字符進行及時校驗，您能夠設置validator="{realTime:false}"來關閉，關閉後，只有在數字文本框失去焦點時才進行校驗。下圖中顯示了NumberTextBox控件的在設計區中的位置及樣式：

圖 307 NumberTextBox控件
NumberTextBox控件所對應的常見屬性及其描述以下表所示：

屬性名 描述
precision
設置控件中數字的精度限制。
range
設置控件能輸入的最大值和最小值。
scale
設置控件中數字的小數精度。
表 8 NumberTextBox控件的經常使用屬性及其描述
您可經過快捷屬性菜單或屬性視圖定義NumberTextBox控件的相關屬性和事件，雙擊可編輯NumberTextBox控件顯示的內容信息。
17. 進度條控件（ProgressBar）
經過使用ProgressBar控件，能夠在界面中生成一個進度條。下圖中顯示了ProgressBar控件的在設計區中的位置及樣式：

圖 308 ProgressBar控件
ProgressBar控件所對應的常見屬性及其描述以下表所示：

屬性名 描述
maximum 設置控件的進度最大值。
progress 設置控件已經完成的進度。
places 設置控件中進度值的顯示精度。
表 9 ProgressBar控件的經常使用屬性及其描述
您能夠經過屬性視圖定義ProgressBar控件的相關屬性和事件。
18. 查詢控件（Query）
經過使用Query控件，能夠在界面中生成一套用於查詢的控件組合。下圖中顯示了Query控件的在設計區中的位置及樣式：

圖 309 Query控件
您可經過快捷屬性菜單或屬性視圖定義Query控件的相關屬性和事件，例如您能夠設置屬性控制是否顯示「查詢」、「清空」、「增長」和「刪除」圖標，以下圖所示：

圖 310 設置Query控件的顯示內容
19. 單選按鈕（RadioButton）
經過使用RadioButton控件，能夠在頁面中生成一個單選按鈕。下圖中顯示了RadioButton控件的在設計區中的位置及樣式：

圖 311 RadioButton控件
您可經過快捷屬性菜單或屬性視圖定義RadioButton控件的相關屬性和事件，例如您可經過快捷屬性菜單設置單選按鈕是否選中狀態、以及不一樣狀態對應的值，以下圖所示：

圖 312設置RadioButton狀態和對應值
20. 單選按鈕組（RadioButtonGroup）
經過RadioButtonGroup控件能夠直接在頁面中生成多個單選按鈕。下圖中顯示了RadioButtonGroup控件的在設計區中的位置及樣式：

圖 313 RadioButtonGroup控件
您可經過快捷屬性菜單或屬性視圖定義RadioButtonGroup控件的相關屬性和事件，例如您能夠經過快捷屬性菜單設置單選RadioButtonGroup控件的列數和控件轉碼的值，以下圖所示：

圖 314設置RadioButtonGroup按鈕組的列數和轉碼值
21. TextArea控件（TextArea）
TextArea控件至關於HTML中的textarea標籤。下圖中顯示了TextArea控件在設計區中的位置及樣式：

圖 315 TextArea控件
您可經過快捷屬性菜單或屬性視圖定義TextArea控件的相關屬性和事件，雙擊可編輯TextArea控件顯示的內容信息。
22. 普通文本框控件（TextBox）
TextBox控件至關於HTML中的input標籤。該控件支持文本的正則校驗、編輯格式化、顯示格式化、保存值格式化。下圖中顯示了TextBox控件的在設計區中的位置及樣式：

圖 316 TextBox控件
您可經過快捷屬性菜單或屬性視圖定義TextBox控件的相關屬性和事件，雙擊可編輯TextBox控件顯示的內容信息。
23. 帶圖標的文本框控件（TextBoxWithIcon）
經過使用TextBoxWithIcon控件，能夠在頁面上生成一個帶圖標的文本框，而且能夠定義圖標的樣式。下圖中顯示了TextBoxWithIcon控件在設計區中的位置及樣式：

圖 317 TextBoxWithIcon控件
您可經過快捷屬性菜單或屬性視圖定義TextBoxWithIcon控件的相關屬性和事件，雙擊可編輯TextBoxWithIcon控件顯示的內容信息。
24. 樹控件（Tree）
Tree控件主要實現瞭如下功能：
1） 支持根據RowSet行集結構構造樹結構，同時支持原生的jsontree結構（目前只支持只讀功能）。
2） 能夠實現複選、拖拽、編輯等功能。
3） 支持懶加載數據。
4） 支持對節點進行增刪操做。
5） 支持對節點從新設置數據源。
6） 支持鍵盤導航功能，具體爲：點擊上下鍵將選中當前節點的上一個或下一個可見節點；點擊Home鍵選中第一個可見節點，點擊End鍵選中最後一個可見節點；點擊右鍵將會展開當前節點，或者選中當前節點的第一個子節點；點擊左鍵將會收起當前節點，或者選中當前節點的父節點。
7） 支持根據路徑、層級等展開節點。
下圖中顯示了Tree控件在設計區中的位置及樣式：

圖 318 Tree控件
Tree控件所對應的常見屬性及其描述以下表所示：

屬性名 描述
checkLogic
設置樹的複選信息。
checkLogicClass
設置樹的複選邏輯所使用的類名，用戶通常只需使用默認值就能夠。
dndSourceClass
設置樹的拖拽所使用的類名，用戶通常只需使用默認值就能夠。
expandRoot
是否展開根結點，不能同時不配置label屬性而將expandRoot屬性設置爲false。
loader
在樹的數據是懶加載的狀況下，設置懶加載樹的請求配置。
pathSeparator
獲得節點路徑時的分隔符。
treeDnd
設置樹的拖拽信息，目前樹支持對非懶加載且數據格式爲RowSet的樹進行拖拽。
treeEditor
設置樹的編輯信息，若不進行設置，默認是不支持編輯。
treeEditorClass
設置樹的編輯所使用的類名，用戶通常只需使用默認值就能夠。
treeLoaderClass
設置樹加載子節點所使用的類名，用戶通常只需使用默認值就能夠。
表 10 Tree控件的經常使用屬性及其描述
Tree控件所對應的常見方法及其描述以下表所示：

事件名 描述
setChecked
在支持複選的狀況下，將指定節點設置爲選中或非選中狀態。
setCurrentNode
將指定節點設置爲當前節點，並更改樣式。
showNodesById
按照節點的id展開並顯示節點。
表 11 Tree控件的經常使用事件及其描述
您可經過快捷屬性菜單或屬性視圖定義Tree控件的相關屬性和事件，雙擊可編輯Tree控件顯示的內容信息。

6.2.3.14 容器控件的使用
6.2.3.14.1 TitlePane
TitlePane控件是一個能夠進行收縮/展開操做的容器控件，在TitlePane中能夠放置其它子控件。
在設計頁面的調色板中選擇TitlePane控件，在設計區域須要添加TitlePane的區域單擊鼠標左鍵，會在相應位置增長一個TitlePane控件，以下圖所示：

圖 319 TitlePane
新建的TitlePane控件的高度和寬度默認均爲「auto」。此時，該TitlePane控件的寬度爲100%，即與其所在容器的寬度相等（若沒有外層容器，寬度爲頁面大小的100%），高度爲自動適應其內部子控件的高度。
在調色板中選擇其它控件，在設計區域的一個TitlePane上單擊鼠標左鍵，會在該TitlePane內部增長一個相應的控件。此時，若是該TitlePane 的高度屬性爲「auto」，它的高度會被撐大，並自動適應其內部子控件的高度，以下圖所示：

圖 320 TitlePane適應內容大小
TitlePane的「view」複合屬性用於配置該TitlePane所引用的頁面，該屬性包含兩個子屬性：「ref」和「para」。其中，「ref」屬性用於指定該TitlePane所引用的頁面，「para」屬性用於配置頁面參數。
爲TitlePane指定一個引用頁面的方法以下：
在頁面中選擇一個TitlePane，在屬性視圖中選擇「ref」屬性，「屬性值」區域會出現「增長引用」（ ）和「刪除引用」（ ）兩個按鈕，以下圖所示：

圖 321 TitlePane引用view
單擊「增長引用」按鈕，會彈出「增長引用的view」 對話框，對話框中會列出當前view所依賴的全部其它view頁面。
若是須要爲TitlePand指定的頁面存在於列表中，能夠在列表中選擇該頁面，單擊「肯定」按鈕，完成指定頁面操做。

圖 322 添加依賴的view
單擊「刪除引用」按鈕，會將該TitlePane的引用屬性刪除。
6.2.3.14.2 表單(Form)
Form控件和HTML中的form標籤相似，能夠內嵌其餘表單控件。
在設計頁面的調色板中選擇Form控件，在設計區域須要添加Form的區域單擊鼠標左鍵，會在相應位置增長一個Form控件，以下圖所示：

圖 323 Form
能夠經過在調色板中選擇其它控件，添加到Form中。Form沒有高度和寬度屬性，其在頁面中所展現的高度取決於其所包含的內容，隨着其嵌套的控件的高度而增長，寬度則始終是100%。，如圖所示：

圖 324 Form適應內容大小
Form控件的binding複合屬性用於設置From的數據綁定，包括bindIndex和store兩個子屬性。有關From數據綁定的操做方式請參見「數據綁定」章節的相關內容。
6.2.3.14.3 FormList
FormList控件是一種相似於Form的控件,可是會根據其綁定的DataStore的內容同時顯示多個Form。
在設計頁面的調色板中選擇FormList控件，在設計區域須要添加FormList的區域單擊鼠標左鍵，會在相應位置增長一個FormList控件，以下圖所示：

圖 325 FormList
新建的FormList默認寬度爲「100%」，FormList沒有高度屬性，其在頁面中所展現的高度取決於其所包含的內容，隨着其嵌套的控件的高度而增長。
FormList控件的binding複合屬性用於設置FormList的數據綁定，包括一個store子屬性，用於設置控件綁定的dataStore。有關FromList數據綁定的操做方式請參見「數據綁定」章節的相關內容。
6.2.3.14.4 TableLayout
TableLayout控件用於在頁面中造成表格佈局的效果，table中的每一個cell能夠放置一個子控件。
在設計頁面的調色板中選擇TableLayout控件，在設計區域須要添加TableLayout的區域單擊鼠標左鍵，會彈出「新建TableLayout」對話框，以下圖所示：

圖 326 建立TableLayout
該對話框能夠用於設置新建Table的行數和列數，默認值爲2行4列。按照須要設置新Table的行列數以後，單擊<肯定>按鈕，會頁面設計區域中增長一個Table，以下圖所示：

圖 327 TableLayout
在設計區域中選擇一個Table控件，工具欄中的「Grid工具欄」會亮顯，以下圖所示：

圖 328 TableLayout操做按鈕
「Grid工具欄」中按鈕的名稱和做用以下：
在上方插入行：在當前cell所在行的上方插入一行，新插入行的列布局方式與當前cell所在行的上一行相同。
在下方插入行：在當前cell所在行的下方插入一行，新插入行的列布局方式與當前cell所在行相同。
在左側插入列：在當前cell所在列的左側插入一列，新插入列的行佈局方式與當前cell所在列的上一左側列相同。
在右側插入列：在當前cell所在列的右側插入一列，新插入列的行佈局方式與當前cell所在列相同。
刪除行：刪除當前cell所在行，當前cell所在行下方的全部單元格上移。
刪除列：刪除當前cell所在列，當前cell所在列的右側全部單元格左移。
合併單元格：合併所選中的多個cell，若是所選的cell不在同一行或不在同一列，合併單元格按鈕灰顯。
取消合併單元格：將當前cell拆分爲合併以前的狀態。
在調色板中選擇須要放置在Table中的控件，在Table中相應的cell中單擊鼠標左鍵，會將控件增長到Table中的相應位置，以下圖所示：

圖 329 添加內容

圖 330 單元格內佈局
在一個空cell中雙擊，能夠彈出一個文本編輯區域，能夠在該區域中輸文字並作爲cell中的內容，以下圖所示：

圖 331 單元格直接編輯文字
6.2.3.14.5 Dialog
Dialog控件用於實現模態對話框效果，能夠爲其指定一個引用的頁面，或在Dialog中放置其它控件，做爲彈出時顯示的內容。
在設計頁面的調色板中選擇Dialog控件，在設計區域須要添加Dialog的區域單擊鼠標左鍵，會在相應位置增長一個Dialog控件，以下圖所示：
新建的Dialog默認尺寸爲428px*400px，設計頁面中的全部Dialog均出如今頁面的左下角。能夠經過單擊Dialog右上角的「收縮/展開」按鈕，將Dialog置爲收縮或展開狀態。以下圖所示：

圖 332 最小化對話框

圖 333 最大化對話框
Dialog的「view」複合屬性用於配置該Dialog所引用的頁面，該屬性包含兩個子屬性：「ref」和「para」。其中，「ref」屬性用於指定該Dialog所引用的頁面，「para」屬性用於配置頁面參數。設置Dialog的「view」屬性的方法參見TitlePane中設置「view」屬性的相關部分。
6.2.3.14.6 BorderLayout
BorderLayout控件提供對頁面的方位佈局，將頁面分爲上、下、左、右、中五個面板，中面板是自適應面板且必須配置，其餘面板是否出現可選。
在設計頁面的調色板中選擇BorderLayout控件，在設計區域須要添加BorderLayout的區域單擊鼠標左鍵，會彈出「新建BorderLayout」對話框，以下圖所示：

圖 334 建立BorderLayout
在對話框中能夠選擇BorderLayout控件的佈局方式和哪些區域出如今BorderLayout中，單擊<肯定>按鈕，會在相應位置增長一個BorderLayout控件，以下圖所示：

圖 335 BorderLayout
完成新建操做後，可經過BorderLayout的快捷菜單對容器的佈局從新進行配置。能夠經過設置BorderLayout中每一個區域的尺寸對BorderLayout的樣式進行調整，其中region爲「left」和「right」的兩個區域能夠設置寬度，高度爲BorderLayout總體的高度減去region爲「top」和「bottom」的兩個區域的高度，不可手動設置；region爲「top」和「bottom」的兩個區域能夠設置高度，寬度爲BorderLayout總體的高度減去region爲「left」和「right」的兩個區域的寬度，不可手動設置；region爲「center」的區域不可設置尺寸，其寬高爲BorderLayout總體的尺寸減去四周區域的尺寸所剩餘的值。
6.2.3.14.7 HBoxContainer
HBoxContainer控件是一種水平排列其內部控件的容器，其內部的控件不管多少均按一行排列。
在設計頁面的調色板中選擇HBoxContainer控件，在設計區域須要添加HBoxContainer的區域單擊鼠標左鍵，會在相應位置增長一個HBoxContainer控件，控件默認尺寸爲100%*100%。
在調色板中選擇須要放置在HBoxContainer中的控件，在HBoxContainer中相應的位置單擊鼠標左鍵，會將控件增長到HBoxContainer中。全部放置在HBoxContainer中的均會排列在同一行，以下圖所示：

圖 336 HBox控件
在屬性視圖中修改控件的「pack」（水平對齊）和「align」（垂直對齊）屬性，容器中的控件對齊方式發生相應改變。
其中「pack」（水平對齊）屬性用於設置HBoxContainer容器所嵌套的組件在其水平方向上的佈局；「align」（垂直對齊）屬性用於設置HBoxContainer容器所嵌套的組件在其垂直方向的佈局，屬性可供選擇的值及意義以下表所示：
pack屬性 start 表示從父容器內左側開始定位
center 表示從父容器內中間開始定位
end 表示從父容器內右側開始定位
align屬性 top 表示子控件居上顯示
middle 表示子控件居中顯示
bottom 表示子控件居下顯示
修改控件的「margins」屬性和「paddings」屬性，容器中的控件邊界發生相應改變。其中，「margins」屬性的做用是設置HBoxContainer容器所嵌套的各個組件之間的間距，默認四個方向值均爲0。「paddings」屬性的做用是將HBoxContainer容器所嵌套的組件當成一個總體,設置其與HBoxContainer之間的間距，默認四個方向值均爲0。
在屬性視圖中，在屬性視圖中選擇「margins」屬性或「paddings」屬性，屬性值區域會出現「編輯屬性」按鈕（ ），以下圖所示：

圖 337 設置margins
單擊<編輯屬性>按鈕，會彈出「編輯邊界尺寸」對話框，以下圖所示：

圖 338 邊界尺寸設置
修改四個方向的邊界尺寸，單擊<肯定>按鈕，相應的屬性值會發生改變。
6.2.3.14.8 FieldSet
FieldSet容器至關於HTML中fieldset標籤， FieldSet控件的高度和寬度值是隨着FieldSet內容的增多而增大的,因此高度和寬度值沒必要設置。
在設計頁面的調色板中選擇FieldSet控件，在設計區域須要添加FieldSet的區域單擊鼠標左鍵，會在相應位置增長一個FieldSet控件，以下圖所示：

圖 339 FieldSet
在調色板中選擇須要放置在FieldSet中的控件，在FieldSet相應的位置中單擊鼠標左鍵，會將控件增長到FieldSet中的相應位置，以下圖所示：

圖 340 在FieldSet中添加內容
在FieldSet的屬性頁中咱們能夠對FieldSet的屬性進行設置。修改flexible屬性，能夠設置flexible容器是否支持展開關閉；修改open屬性，能夠設置flexible容器的初始狀態是展開仍是關閉。

6.2.3.14.9 AdaptiveContainer和AdaptivePane
AdaptiveContainer控件是AdaptivePane控件的容器，它們用於實現自適應容器的效果。即當某些控件收縮後，自適應容器會自動填滿該控件收縮後所留下的空間。
在設計頁面的調色板中選擇AdaptiveContainer控件，在設計區域須要添加AdaptiveContainer的區域單擊鼠標左鍵，會在相應位置增長一個AdaptiveContainer控件，以下圖所示：

圖 341 AdaptiveContainer
新建的AdaptiveContainer控件的高度爲「100%」，寬度爲「auto」。在調色板中選擇AdaptivePane控件，在設計區域的AdaptiveContainer控件上單擊鼠標左鍵，能夠在AdaptiveContainer中增長多個AdaptivePane，以下圖所示：

圖 342 AdaptivePane
AdaptiveContainer中的AdaptivePane長度爲「120px」，寬度爲「auto」，AdaptivePane的寬度和高度都是能夠改變的。
設置AdaptivePane的autoHeight屬性，能夠設置該AdaptivePane容器是否爲自適應容器；只有當autoHeight設置爲true的時候，adaptiveHeight屬性才容許被用戶設置，而且該屬性只容許被用戶設置爲百分比的形式，該屬性的具體含義是：設置該自適應容器佔據某些控件收縮後留下空間的百分比。
6.2.3.14.10 TabContainer和TabPane
TabContainer控件是Tab控件的容器，TabPane控件的做用是放置在TabContioner中，它們用於實如今頁面中顯示出多個Tab頁的效果。
在設計頁面的調色板中選擇TabContainer控件，在設計區域須要添加TabContainer的區域單擊鼠標左鍵，會在相應位置增長一個TabContainer控件，以下圖所示：

圖 343 TabContainer
新建的TabContainer控件的高度爲「400px」，寬度爲「auto」。在調色板中選擇TabPane控件，在設計區域的TabContainer控件上單擊鼠標左鍵，能夠在TabContainer中增長多個TabPane，以下圖所示：

圖 344 TabPane
TabContainer中的TabPane長寬均爲「100%」，即與其所在的TabContainer尺寸相等，且沒法經過修改其長寬屬性改變其大小。
在默認狀況下，TabContainer容器中的Tab標籤位於容器的上方，能夠經過修改TabContainer容器的tabPosition屬性調整標籤出現的位置，以下圖所示：

圖 345 Tab位置
若是在一個TabContainer中存在多個TabPane，能夠經過單擊某個TabPane右上角的方向箭頭，選擇該TabPane的上一個或下一個TabPane，以下圖所示：

圖 346切換Tab頁
TabPane的「view」複合屬性用於配置該TabPane所引用的頁面，該屬性包含兩個子屬性：「ref」和「para」。其中，「ref」屬性用於指定該TabPane所引用的頁面，「para」屬性用於配置頁面參數。設置TabPane的「view」屬性的方法參見TitlePane中設置「view」屬性的相關部分的內容。
6.2.3.14.11 StackContanier和StackPane
StackContainer控件是StackPane控件的容器，它們用於實如今頁面中顯示出相互覆蓋的多層容器的效果。
在設計頁面的調色板中選擇StackContainer控件，在設計區域須要添加StackContainer的區域單擊鼠標左鍵，會在相應位置增長一個StackContainer控件，以下圖所示：

圖 347 StackContainer
新建的StackContainer控件的高度爲「400px」，寬度爲「auto」。在調色板中選擇StackPane控件，在設計區域的StackContainer控件上單擊鼠標左鍵，能夠在StackContainer中增長多個StackPane，以下圖所示：

圖 348 StackPane
StackContainer中的StackPane長寬均爲「100%」，且沒法經過修改其長寬屬性改變其大小。
爲便於在多個StackPane中進行選擇，StackContainer中的每一個StackPane均有一個標籤，位於StackContainer的上方，該標籤在實際頁面中不會顯示出來。
若是在一個StackContainer中存在多個StackPane，能夠經過單擊某個StackPane右上角的方向箭頭，選擇該StackPane的上一個或下一個StackPane，以下圖所示：

圖 349 切換StackPane
StackPane的「view」複合屬性用於配置該StackPane所引用的頁面，該屬性包含兩個子屬性：「ref」和「para」。其中，「ref」屬性用於指定該StackPane所引用的頁面，「para」屬性用於配置頁面參數。設置StackPane的「view」屬性的方法參見TitlePane中設置「view」屬性的相關部分的內容。
6.2.3.14.12 Div
Div控件是一個能夠在其內部放置其餘控件的容器，其主要功能是生成HTML中Div標籤，
並經過修改class和style屬性來實現特定的佈局；而width和height屬性只用於UI設計界面，並不生成對應的代碼。

在設計頁面的調色板中選擇Div控件，在設計區域須要添加Div的區域單擊鼠標左鍵，會在相應位置增長一個Div控件，以下圖所示：

新建的Div默認高度爲120px，寬度爲auto，這兩個屬性只用於UI設計界面，並不生成對應JSP的代碼。

選中須要修改屬性的Div，查看屬性視圖，以下圖所示：

能夠經過修改class和style來實現須要的特定佈局樣式。
6.2.4 模式控件的使用
6.2.4.1 AdaptiveLayout
6.2.4.1.1 簡介
經過AdaptiveLayout模式控件可快速生成自適應佈局，並提供六種經常使用佈局方便用戶快速複用。
該模式控件爲無實例控件，用戶在生成後不能再次打開該控件嚮導。
6.2.4.1.2 使用方法
打開AdaptiveLayout模式控件嚮導，以下圖所示：

圖 350 AdaptiveLayout模式控件嚮導
如圖所示，該向導頁上方可選擇控件高度，下拉框可選擇「默認」和「超長」，分別對應右側數值的「100%」和「auto」，同時該控件高度容許用戶手動修改。
下方窗口顯示了六種經常使用的自適應佈局，分別爲：
1. 單鎖定分區單縮放區域A
2. 多鎖定分區單縮放區域A
3. 多鎖定分區雙縮放區域A
4. 單鎖定分區單縮放區域B
5. 多鎖定分區單縮放區域B
6. 多鎖定分區雙縮放區域B
每種經常使用格式都由示例圖片顯示，用戶可經過選擇其中某種佈局直接點擊finish生成AdaptiveLayout佈局。也可點擊下一步進行對該模式的自定義修改，例如，選擇「多鎖定分區雙縮放區域A」，以後點擊下一步打開自定義設置的嚮導頁，以下圖所示：

圖 351 AdaptiveLayout模式控件詳細設置嚮導
如圖所示，該頁詳細列出所選佈局的佈局信息，該向導頁上方可更改「區域數量」，即佈局所使用的AdaptivePane數量。對於每一個AdaptivePane，點擊圖片 或 可相互切換，其中：
：表示鎖定的AdaptivePane，即擁有特定高度並沒有法經過自適應改變高度，但能夠經過TitlePane等收起。
：表示可自適應的AdaptivePane，即該部分控件可根據可用空間的大小，根據用戶嚮導設置的「自適應高度」的%數值（圖中皆爲50%），自動調整控件高度，達到自適應的需求。
對每一個AdaptivePane用戶可定義其中放置的容器控件，該向導提供了幾個經常使用控件供用戶選擇 ，該選項框右側可設置title屬性（相似titlePane的title屬性，暫不支持自動生成ToolBar，若有需求用戶可在AdaptiveLayout生成後手動添加ToolBar模式控件）。
設置完成後點擊finish則完成該佈局控件的建立，在UI設計器中效果以下圖所示：

圖 352 AdaptiveLayout模式控件生成效果
6.2.4.2 TableLayout
6.2.4.2.1 簡介
經過TableLayout模式控件可快速生成表格佈局，提供可視化的表格合併和拆分功能，並提供六種經常使用佈局方便用戶快速複用。
該模式控件爲無實例控件，用戶在生成後不能再次打開該控件嚮導。
6.2.4.2.2 使用方法
打開TableLayout模式控件嚮導，以下圖所示：

圖 353 TableLayout模式控件嚮導頁
如圖所示，嚮導頁上方可設置佈局控件的ID和後綴，保證該控件在模型中ID惟一。
嚮導頁中間區域包含六組經常使用表格佈局，直接使用時經過選中對應佈局，點擊finish便可。如須要較複雜表格佈局，則點擊下一步進行詳細布局設置，以下圖所示：

圖 354 TableLayout模式控件詳細設置嚮導頁
首先，該向導頁上半部分用來規劃總體佈局及全局參數，各主要屬性介紹以下：
 總體高度：生成的table的高度，一般設爲100%，主要根據table外層容器肯定。
 總體寬度：生成的table的寬度，一般設爲100%，主要根據table外層容器肯定。
 默認統一行高：用戶可經過設置該屬性統一調整table每行高度，當須要對行高進行單獨設置時，可經過點擊下方「佈局信息列表」中對應行高進行單獨設置。
 默認統一列寬：同上，可經過設置該屬性統一調整table每列寬度。
 水平對齊方式：table中控件的水平對齊方式，通常爲left或center。
 垂直對齊方式：table中控件的垂直對齊方式，通常爲top或middle。
用戶更改「行數」、「列數」後點擊「生成佈局」，在下方可視界面則可生成相應佈局效果，例如，行數爲五、列數爲3的狀況下，點擊「生成佈局」以下圖所示：

圖 355 TableLayout模式控件5行4列布局圖示
在該可視界面中，可進行對Cell的合併和拆分操做，容許用戶選擇相鄰或合法的Cell區塊進行合併和拆分，例如，須要將第一行全部Cell合併爲一列，則首先選中第一行全部Cell，以下圖所示：

圖 356 TableLayout模式控件合併第一行圖示
如圖，當所選Cell組爲可合併的，右側「合併」按鈕就會點亮，容許用戶進行合併操做，點擊「合併」按鈕，第一行成功合併。拆分同理。當用戶對佈局的修改結束後，點擊「finish」，在UI設計器上則造成Table佈局，以下圖所示：

圖 357 TableLayout模式控件生成控件效果
6.2.4.2.3 Toolbar
6.2.4.2.4 簡介
經過Toolbar模式控件可快速生成工具欄控件，提供通用佈局及經常使用工具欄按鈕方便用戶快速複用，並可統一工程中工具欄按鈕屬性。
該模式控件爲有實例控件，用戶在生成後可經過再次打開該控件嚮導進行修改。
6.2.4.2.5 使用方法
打開Toolbar模式控件嚮導，以下圖所示：

圖 358 Toolbar模式控件嚮導頁
該向導頁上部分爲Toolbar控件的基本信息設置，包括：控件ID、後綴、工具欄高度、工具欄總列數、對齊方式及統一默認寬度。在下方「工具欄信息列表」中可進行工具欄按鈕的設置，其中經常使用按鈕可經過點擊「默認」按鈕，彈出菜單以下圖所示：

圖 359 Toolbar模式控件選擇默認按鈕
如圖所示，可選擇須要的按鈕，以後點擊「肯定」，則模式控件會自動生成該按鈕，以下圖所示：

圖 360 Toolbar模式控件工具欄信息
除經常使用按鈕外，用戶也可經過點擊「增長」按鈕添加自定義控件，對每個控件，用戶能夠經過改變「控件類型」來更改控件，目前支持Button、CheckBox、ComboBox等十個控件。
控件寬度能夠經過修改每一個控件的寬度，或經過上方「統一默認寬度」設定。
對齊方式指的是控件在工具欄容器中的對齊方式，通常默認爲「右對齊」。
設置完成後點擊「finish」在UI設計器上生成工具欄控件，以下圖所示：

圖 361 Toolbar模式控件生成後效果
6.2.4.3 Tree
6.2.4.3.1 簡介
經過Tree模式控件可快速生成樹控件，因爲樹控件的屬性配置較爲繁瑣，不熟悉該控件的開發人員很難正確配置樹的信息，因爲該控件的重要性，故開發該模式控件方便配置，並給予「binding-query」相似屬性以具象化效果。出於腳本的不可控性，該控件不生成初始化腳本，須要用戶手動初始化數據（推薦在Entry中，或page_init方法）。
該模式控件爲有實例控件，用戶在生成後可經過再次打開該控件嚮導進行修改。
6.2.4.3.2 使用方法
打開Tree模式控件後彈出嚮導框，以下圖所示：

圖 362 Tree模式控件生成後效果
其中，「複選邏輯」選框未選中時，複選邏輯爲單選，當選中「複選邏輯」框時，在右側下拉框可選擇複選邏輯，包括多選、級聯等。
「數據綁定」欄中定義了樹所綁定的數據集和經常使用綁定屬性，分別對應：ID、LABEL、PARENTID和LEAF屬性。下拉框中可選擇數據集中屬性，容許重複。
 節點ID字段（binding-id樹的節點對應數據的標識字段）
 節點顯示字段（binding-label樹的節點對應數據的顯示字段）
 父節點字段（binding-parent數據中標識父節點的字段名）。
 葉子節點字段（binding-leaf數據中標識葉子節點的字段名）。
當選擇數據集後，用戶須要定義構建樹第一層節點的查詢條件，用來肯定樹的第一層節點。如需添加虛擬根節點，即在第一層節點前增長一個單獨的虛擬根節點，此時勾選「添加虛擬根節點」並在右側文本框中輸入文字，以下圖所示：

圖 363 Tree模式控件第一層節點查詢條件及虛擬根節點
在嚮導下方，用戶能夠選擇「全加載」方式及「懶加載」方式，其中初始化數據的階段統一由用戶手動操做，推薦在Entry或page_init方法中初始化數據，保證在樹渲染以前將數據初始化完畢。
當選擇懶加載時，加載每層節點的事件將經過loader-rpc方法完成，而在該向導中須要用戶填入每次加載時所調用的bo方法，以下圖所示：

圖 364 Tree模式控件懶加載
選擇「懶加載」後點擊<選擇>按鈕，彈出對話框以下圖所示：

圖 365 Tree模式控件懶加載選擇依賴BO
經過選擇BO中的具體方法會在樹的loader-rpc方法裏生成相應腳本文件。
6.2.4.4 Form
6.2.4.4.1 簡介
模式控件Form是一種可以快速生成表單、綁定數據集、選擇過程調用的表單生成控件。
6.2.4.4.2 使用方法
 快速生成表單
在控件工具箱中選擇模式控件Form，在設計區域須要添加Form的區域單擊鼠標左鍵，會在相應的位置添加一個Form控件，以下圖所示。

圖366模式控件Form—建立表單

經過編輯框能夠設置Form的ID，Form控件的後綴，Form的總列數等，經過設置Form控件後綴是爲了不Form控件的ID衝突。Form總列數提供了最常使用的6列和8列模式，初始默認選擇6列模式。列模式下拉列表中的數據表示label和控件各佔的百分比大小，例如「13%-20%」表示label佔整行寬度的13%，控件佔整行寬度的20%。
此外，本着方便、高效和易用的原則，Form控件支持用戶進行列寬的自定義設置。能夠根據須要靈活的設置每列寬度所佔的比值。
 綁定數據集
經過選擇已經建立的數據集，快速選擇須要綁定的數據，以下圖所示。左側區域爲控件信息列表，右側爲按鈕操做區。經過首列選擇框選擇須要綁定和顯示的數據。

圖367模式控件Form—綁定數據集
控件信息列表列出了數據集中對應的全部數據，控件信息列表各列功能以下所述：
1) 顯示標題：經過編輯「顯示標題」屬性列能夠改變控件顯示的標題。
2) 標題綁定：提供對標題綁定方式的選擇，包括 right，left，none三個可選項。
3) 編輯類型：提供了各類控件形式的編輯類型，例如，能夠選擇單位空，空位，testBox，comboBox等。
4) 跨列數：指定控件所佔的列數。
5) 跨行數：指定控件所佔的行數。
6) 常數代碼：控件對應的codeList的名字。
7) 是否僞列：標識當前屬性是不是僞列，僞列是指不在所選擇的數據集中的屬性，只是爲了方便數據顯示。
8) 是否必填：標識是否必選屬性。
9) 是否只讀：標識是否只讀屬性。
10) 是否禁用：標識是否禁用屬性。
按鈕操做區列出了對左側控件信息列表中的相關操做，按鈕操做區功能以下所述：
1) 置頂:經過置頂按鈕能夠將選中行置頂，以改變控件的顯示順序。
2) 置底：經過置底按鈕能夠將選中行置底。
3) 上移：經過上移按鈕能夠將選中行位置上移。
4) 下移：經過下移按鈕能夠將選中行位置下移，控件信息列表中的排列順序對應Form的從左向右依次排列的順序。
5) 全選：選中全部行。
6) 全不選：取消選中全部行。
7) 新增僞列：增長僞列顯示。
8) 刪除僞列：刪除僞列顯示。
9) 檢查更新：檢查當前數據集是否有變化，以便進行表單更新。
「是否生成form」選擇框，當選中此選項時能夠生成Form，當取消選擇時，只生成對應的table，沒有生成Form。
 選擇過程調用
經過「選擇過程調用」下拉列表框，能夠選擇添加已有的過程調用方法，實現快速配置和執行processor請求。
經過以上三個過程的操做，就能夠完成一個Form的建立，以下圖所示，Form表單自動生成了保存和重置按鈕，能夠很是方便的進行數據保存和重置。

圖368模式控件Form—表單生成
6.2.4.5 Grid
6.2.4.5.1 簡介
經過模式控件Grid能夠快速生成數據表格、綁定數據集。
6.2.4.5.2 使用方法
 快速生成表格
以下圖所示爲Grid在控件工具箱中的位置，選擇模式控件Grid，在設計區單擊鼠標左鍵便可。

圖369模式控件Grid—建立Grid
 綁定數據集
以下圖所示，能夠編輯Grid控件ID、Grid控件後綴，選擇Grid類型以及Grid的數據集。
4) Grid類型：提供了Grid和XGrid兩種類型的表格。XGrid是一種性能更高的表格生成控件。
5) Grid選擇類型：none，single（單選），multiple（多選）。
6) 顯示行數：勾選以顯示行數。
7) 顯示工具欄：勾選以顯示工具欄。

圖370新建模式控件Grid
1) Grid數據集：經過選擇已經建立的數據集，並勾選數據集中的屬性字段，設置Grid的顯示列。屬性信息列表提供了數據集中屬性的顯示，右側爲按鈕操做。
2) 屬性名稱：數據集中對應的屬性名稱。
3) 顯示標題：Grid標題列的顯示名稱。
4) 顯示類型：設置屬性字段的顯示類型。
5) 顯示格式：用於設置Grid上數據的顯示格式。
6) 常數代碼：控件對應的codeList的名字。
7) 屬性列寬：設置Grid屬性的列寬，默認爲100px。
8) 是否固定列：選擇固定列，Grid對應列將被鎖定，當移動左右滾動條時，被鎖定的列將保持固定狀態。

按鈕操做包括上、下移、置頂、置底、全選、全不選、新增、刪除、檢查更新，單選按鈕操做包括只讀、行可編輯、單元格可編輯。下面給出簡要敘述：
1) 新增：新增屬性列，僅用於在Grid中顯示信息。
2) 刪除：刪除由新增操做增長的屬性列，對於數據集中原有的屬性字段不能刪除。
3) 檢查更新：檢查數據集是否發生變化。
4) 只讀：設置Grid的可編輯權限爲只讀。
5) 行可編輯：提供Grid整行的可編輯功能。
6) 單元格可編輯：只提供單元格的可編輯屬性。
 生成Grid數據表格
下圖所示爲生成的Grid表格，單擊序號1的小三角圖標，能夠快速設置Cell的屬性以及編輯事件。單擊序號2的template1模板進行數據集綁定以及Grid控件信息的修改。如序號3所示，選擇Properties屬性能夠編輯Grid控件對應的屬性信息。

圖371模式控件Grid—生成表格

6.2.5 設置入口信息
入口信息頁面提供設置「入口信息」方法的可視化頁面，其中包含：「基本信息」「依賴BO」「參數列表」和「自動調用BO方法」，以下圖所示：

圖 372 過程調用可視化頁面
Entry做爲頁面跳轉的入口，UniEAP V4經過在入口信息頁面的設置將自動生成代碼並分別與先後臺進行關聯。

下面對入口信息頁面作具體的介紹：
 基本信息
基本信息包含：「方法名」、「標題」和「描述信息」，以下圖所示：

圖 373 請求方法定義
其中「方法名」爲只讀信息。
 參數列表設置
參數列表中存放經過Entry傳輸的參數，點擊<增長>後彈出對話框，以下圖所示：

圖 374選擇自動調用的BO方法
目前支持參數類型爲：「Pojo」，「PojoList」和「string」三種類型，其中「string」 類型並不須要設置「來源」。當選擇「Pojo」或「PojoList」時則須要開發人員選擇「來源」（即當前view文件所綁定的數據集，具體參見4.7.3中「數據集」部分），以「pojo」爲例，以下圖所示：

圖 375 增長Processor參數
點擊<肯定>則會保存在參數列表中，以下圖所示：

圖 376 Processor參數列表
此時切換到腳本編輯器頁面後便可在方法中經過「view.forward」調用該Entry，以下圖所示：

圖 377 Entry在腳本編輯器中的使用
其中「viewPath」跳轉View的所在dc下view目錄下的路徑結構，如「test/demoView」；「dc」爲含有參數設置中Pojo或者PojoList的DataCenter;「parameter」爲Entry參數設置中的須要傳遞的參數，格式爲Json數據結構。
6.2.5.1 業務邏輯調用
在UniEAP V4中，後臺的方法主要是經過BO來實現。當設置入口信息關聯某BO方法時，首先在依賴BO部分，點擊<增長>，在彈出的窗口中，選擇須要依賴的BO，具體操做以下圖所示：

圖 378增長過程調用依賴的BO
【注意】上圖中「按來源過濾」包括「當前DC的BO」和「當前DC可見的BO」，這裏作下說明，「當前DC可見對象」包括：當前DC可見的對象和當前DC所依賴的DC中可見的對象。關於如何設置DC依賴，請參見4.9.2小節內容。

圖 379增長過程依賴的BO
選中依賴的BO列表中的內容，點擊<刪除>按鈕，在彈出的窗口中選擇<OK>，能夠刪除依賴的BO，以下圖所示：

 圖 380刪除過程依賴的BO

 圖 381刪除過程依賴的BO

 增長BO方法
點擊「自動調用BO中的方法」中的「BO方法」的「選擇按鈕」，在彈出的窗口中，選擇依賴的BO，在下拉列表下方的列表中選擇依賴的BO方法，具體操做以下所示：

圖 382選擇自動調用的BO方法

圖 383選擇BO的方法
選擇方法後點擊<肯定>鍵便可，此時V4將經過所設定的BO方法自動生成關聯。
【注意】：當選擇BO方法時，該方法的參數請務必和參數列表中的參數保持一致，不然會提示校驗失敗，以下圖所示：

圖 384 BO方法與參數列表保持一致
6.2.5.2 URL傳參數
在view模型的入口信息中定義須要使用的參數名，以下圖所示：

圖 385 入口信息設置
如圖定義了兩個參數：」a」和」b」，類型爲String（因爲經過url傳參，參數類型通常都爲String類型），這兩個參數將會做爲頁面dataCenter的參數。
此時在url中便可經過：「.../*.jsp?a=1&b=2/」的方式來傳參，JS獲取所傳參數時經過dataCenter的getParameter()方法:
//取得經過url傳入的參數a和b的值
var a = dataCenter.getParameter("a");
var b = dataCenter.getParameter("b");

6.2.6 設置過程調用
過程調用頁面提供設置「過程調用」方法的可視化頁面，其中包含：「請求方法定義」「依賴BO」「參數列表」和「自動調用BO方法」，以下圖所示：

圖 386 過程調用可視化頁面
如前所述，Processor做爲先後臺通信的媒介，UniEAP V4經過在過程調用頁面的設置將自動生成代碼並分別與先後臺進行關聯。
其中，前臺對應的js文件將生成在 「/sc/dc/content/view/generate/*-processor.js」中，可從「概要」頁面經過超連接進入，以下圖所示：

圖 387 前臺processor自動生成的js文件
然後臺java相關將使用統一的Processor來進行處理。

下面對過程調用頁面作具體的介紹：
6.2.6.1 定義請求方法
請求方法定義包含：「選擇方法」、「基本信息」，定義Processor的主要信息，以下圖所示：

圖 388 請求方法定義
您能夠在請求方法定義欄目下進行增長、修改和刪除過程調用的請求方法。
 增長請求方法
點擊<增長>，在「基本信息」欄目中編輯方法名、標題、描述信息，以及定義成功和失敗的回調方法等，具體操做以下所示：

圖 389定義過程調用請求方法
點擊「打開腳本頁面」連接，選擇「公共方法」和「新建方法」，定義新建方法名稱，以下圖所示：

圖 390定義回調的方法
點擊<編輯>，在彈出的對話框中點擊<增長>，編輯JS方法的參數，雙擊參數可編輯參數名稱，以下圖所示：

圖 391編輯回調方法的參數
選擇參數列表中的一個參數，點擊<刪除>，刪除該參數，以下圖所示：

圖 392刪除回調方法的參數
其中<同步>和<顯示進度條>按鍵分別表明Processor在傳輸過程當中的參數配置，默認爲「異步」和「顯示進度條」。
 刪除請求方法
點擊<刪除>，在彈出的確認框中選擇<肯定>，便可刪除已有的請求方法，以下圖所示：

圖 393刪除過程調用請求方法
 參數列表設置
參數列表中存放經過Processor傳輸的參數，點擊<增長>後彈出對話框，以下圖所示：

圖 394選擇自動調用的BO方法
目前支持參數類型爲：「pojo」，「pojoList」和「string」三種類型，其中「string」 類型默認「是否入參」的默認選項爲「是」，並不須要設置「來源」。當選擇「pojo」或「pojoList」時則須要開發人員選擇「是否入參」（便是否將其做爲參數手動經過Processor傳輸，通常選擇「是」）和「來源」（即當前view文件所綁定的數據集，具體參見4.7.3中「數據集」部分），以「pojo」爲例，以下圖所示：

圖 395 增長Processor參數
點擊<肯定>則會保存在參數列表中，以下圖所示：

圖 396 Processor參數列表
此時切換到腳本編輯器頁面後便可在方法中經過「view.processor」調用該Processor，以下圖所示：

圖 397 Processor在腳本編輯器中的使用
 依賴BO
在UniEAP V4中，後臺的方法主要是經過BO來實現。當設置過程調用關聯某BO方法時，首先在依賴BO部分，點擊<增長>，在彈出的窗口中，選擇須要依賴的BO，具體操做以下圖所示：

圖 398增長過程調用依賴的BO
【注意】上圖中「按來源過濾」包括「當前DC的BO」和「當前DC可見的BO」，這裏作下說明，「當前DC可見對象」包括：當前DC可見的對象和當前DC所依賴的DC中可見的對象。關於如何設置DC依賴，請參見4.9.2小節內容。

圖 399增長過程依賴的BO
選中依賴的BO列表中的內容，點擊<刪除>按鈕，在彈出的窗口中選擇<OK>，能夠刪除依賴的BO，以下圖所示：

 圖 400刪除過程依賴的BO

 圖 401刪除過程依賴的BO

 增長BO方法
點擊「自動調用BO中的方法」中的「BO方法」的「選擇按鈕」，在彈出的窗口中，選擇依賴的BO，在下拉列表下方的列表中選擇依賴的BO方法，具體操做以下所示：

圖 402選擇自動調用的BO方法

圖 403選擇BO的方法
選擇方法後點擊<肯定>鍵便可，此時V4將經過所設定的BO方法自動生成關聯。
【注意】：當選擇BO方法時，該方法的參數請務必和參數列表中的參數保持一致，不然會提示校驗失敗，以下圖所示：

圖 404 BO方法與參數列表保持一致
6.2.6.2 設置自動分頁
 功能簡介
當請求爲查詢請求且要分頁、計算總記錄數時，無需再寫分頁查詢的代碼。以下圖，勾選自動分頁，可輸入起始頁數、每頁數量，勾選是否要計算總記錄數。配置完成後，就可以完成自動分頁了。

圖 405 自動分頁設置
 多數據源自動分頁示例
在實際項目開發過程當中，常常用到分頁查詢。UniEAP V4提供了自動分頁查詢的功能。下面將以Grid爲例介紹如何簡單快速地實現自動分頁查詢。
【注意】在項目中須要使用多數據源或分佈式數據源的場景下還須要設置動態數據源，不然沒法實現自動分頁。打開patch中的applicationContext-dataSource.xml文件，具體設置以下：
// 動態數據源Bean配置（id必須sessionFactory引用的dataSource保持一致）
<bean id="dataSource" class="com.neusoft.unieap.core.dataSource.DynamicDataSource">
//有幾個數據源就配置幾個
<property name="targetDataSources">
<map key-type="java.lang.String">
<entry key="unieap" value-ref="UNIEAP" />
<entry key="business" value-ref="BUSINESS" />
</map>
</property>
//默認數據源
<property name="defaultTargetDataSource" ref="UNIEAP" />
</bean>
// UniEAP自帶的數據源
<bean id="UNIEAP"
class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
…………
</bean>
// 業務數據源配置
<bean id="BUSINESS" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
…………
</bean>
 查詢單個Grid
假設要實現分頁查詢全部用戶的功能。首先新建一個頁面模型，使用組織機構中的用戶表建立數據集，而後基於該數據集建立Grid控件。以下圖所示。

圖 406建立Grid 控件
編寫DAO方法，關鍵代碼以下：
//DAO方法的返回值必須爲QueryResult
public QueryResult query() {
String hql = "from User user";
//若是是hql查詢，請調用super.queryObjectsByPage方法
//若是是sql查詢，請調用super.query方法。
//關於這兩個api的詳細介紹見本小節最後的附錄。
return super.queryObjectsByPage(hql, null);
}
編寫BO方法，關鍵代碼以下：
//BO方法的返回值必須爲QueryResult
public QueryResult query() {
return this.queryDAO.query();
}
定義分頁查詢的Processor方法，勾選自動分頁，默認的起始頁數爲1，每頁數量爲10。能夠根據業務需求自定義修改。本例使用默認值。

圖 407 定義分頁查詢請求方法
編寫查詢回調方法，以下所示：
//回調方法要使用view.grid.setDataStore方法給查詢的Grid綁定DataStore
view.grid.setDataStore("demoGrid",dc.getDataStore("result"));
最後在頁面的page load方法中調用該請求便可。以下所示：
//在調用query方法前還能夠經過設置view.processor.method.pageNumber和//view.processor.method.pageSize修改pageNumber和pageSize。method
//爲processor方法名。
//例如：對於本例，能夠設置view.processor.query.pageSize = 20
view.processor.query();
至此爲止，分頁查詢全部用戶的功能已開發完成，啓動服務便可看到最終效果。
【附錄】API簡介
queryObjectsByPage
說明：自動分頁hql查詢，無需傳遞頁號和每頁個數。(需在頁面模型過程調用頁勾選自動分頁)
參數：
{String} queryString HQL查詢語句
{ Object[ ]} parameters參數數組，若無參數，可傳空值
返回值：{ QueryResult } 查詢結果
例：
String hql = 「from User u where u.sex= ? and u.name like ?」;
QueryResult queryResult = super.queryObjectsByPage (hql, new Object[ ]{「男」, 「張三」});
query
說明：自動分頁sql查詢，無需傳遞頁號和每頁個數。(需在頁面模型過程調用頁勾選自動分頁)
參數：
{String} sql SQL語句
{ Object[ ]} args 參數數組，若無參數，可傳空值
{Class} clazz 指定查詢結果轉換的Pojo類（可爲Entity或DTO生成的Pojo類），若沒法指定，可傳空值，查詢結果爲map的list
返回值：{ QueryResult } 查詢結果
例：
// 無參數無class的狀況
String sql = 「from user u」;
QueryResult queryResult = super.query(sql);
// 無參數有class的狀況
String sql = 「from user u」;
QueryResult queryResult = super.query(sql, User.class);
// 有參數無class的狀況
String sql = 「from user u where u.id= ?」;
QueryResult queryResult = super.query(sql, new Object[ ] {「100」});
// 有參數有class的狀況
String sql = 「from user u where u.id= ?」;
QueryResult queryResult = super.query(sql, new Object[ ] {「100」}，User.class);
 查詢多個Grid
實際開發過程當中有時會遇到一次查詢獲取多個Grid的場景，若多個Grid的分頁信息徹底一致（起始頁數和每頁顯示數量相同），只需將BO方法的返回值改成BOContext（存放多個DAO方法返回的QueryResult對象），在成功回調方法中分別使用view.grid.setDataStore給每一個Grid綁定DataStore。
當多個Grid的分頁信息不一致，例如一個每頁顯示10條記錄，另一個每頁顯示20條記錄。這時，須要改造一下BO方法，以下所示：
//BO方法的返回值爲BOContext
public BOContext query() {
//經過PageUtil類提供的setPageNumber方法設置起始頁數
//經過PageUtil類提供的setPageSize方法設置每頁顯示記錄數
PageUtil.setPageSize(10);
QueryResult userResult = this.queryDAO.queryUser();
PageUtil.setPageSize(20);
QueryResult unitResult = this.queryDAO.queryUnit();
BOContext bc = new BOContextImpl();
bc.put("user", userResult);
bc.put("unit", unitResult);
return bc;
}

6.2.7 使用腳本編輯器
JavaScript腳本是組成前端頁面的重要組成部分，所以，在UniEAP V4 Workshop的UI設計器中，咱們提供了功能強大的腳本編輯器功能。腳本編輯器的界面以下圖所示：
圖 408 腳本編輯器界面
爲了表述方便，咱們能夠將腳本編輯器界面粗略的分爲四部分,上方的列表區，方法區，和功能區，以及下方的代碼區。具體分佈以下圖所示：

圖 409 腳本編輯器界面區域分佈
在列表區中，咱們能夠選擇公共方法，全局變量，page，引用的外部JS文件，以及該view（或viewc）下的全部控件。在列表區中，若是咱們選中公共方法或者控件時，方法區中會有新建方法和已有方法的選項，供用戶操做；若是咱們選中全局變量，方法區中會出現編輯按鈕供用戶對全局變量進行編輯。功能區中有刪除，查找和查看引用的外部JS文件三個按鈕。刪除按鈕用來刪除當前選中而且已經編輯過的方法，其它兩個按鈕會在後面的小節中介紹。
6.2.7.1 快捷鍵的使用
快捷鍵是腳本編輯器中實現快捷功能的一種方式，咱們提供了多種快捷鍵，來方便用戶使用，絕大部分快捷鍵的設置遵循Eclipse中Java編輯器的快捷鍵設置，使得用戶不只使用方便，並且不會改變用戶原有的開發習慣。腳本編輯器中提供的快捷鍵有：
1） Ctrl + O 快速大綱
2） Alt + / 代碼提示
3） Shift + Ctrl + F 快速格式化
4） Alt + 左/右 前進/後退
5） Alt + 上/下 選中行上移/下移
6） Ctrl + Z undo
7） Ctrl + Y redo
8） Ctrl + D 刪除選中行
9） Ctrl + / 將當前選中代碼註釋
10）Ctrl + 鼠標左鍵 代碼跳轉
11）Ctrl + A 全選
12）Ctrl + C 複製
13）Ctrl + V 粘貼
14）Ctrl + X 剪貼
15）Ctrl + S 保存
16）Ctrl + F 查找
17）鼠標雙擊 選中單詞
18）鼠標三擊 選中行
19）F11 關閉View文件
6.2.7.2 自動代碼提示
腳本編輯器實現了強大的代碼提示功能，經過「Alt + /」能夠觸發該功能。經過該方式，代碼提示內容包括：
 全局變量（圖標爲 ）
 公共方法（圖標爲 ）
 JS，RIA內置對象（圖標爲 ）
 外部JS方法（圖標爲 ）
 命名空間（包括該頁面和引用頁面組件的命名空間，圖標爲 ）
 代碼自動完成模板中的內容（圖標爲 ）
在腳本編輯器代碼區中，按下代碼提示快捷鍵會出現以下圖代碼提示框：

圖 410 Alt + / 的代碼提示功能
另外咱們還提供全部JS和RIA 內置對象的全部屬性（圖標爲 ）和方法（圖標爲 ），以及一些用法的說明，來方便用戶使用。具體用法以下圖所示：
圖 411 內置對象的代碼提示

對於命名空間，咱們還提示該命名空間的全局變量和公共方法。當用戶在腳本編輯器中輸入某個命名空間時，會提示該命名空間下的全局變量和公共方法，具體用法以下圖所示：

圖 412 頁面主鍵的代碼提示
腳本編輯器還提供了一個至關強大的功能，就是對控件ID的自動提示。當咱們在腳本編輯器中經過unieap.byId(String id)來操做控件的時候，腳本編輯器會提示該view（或viewc）下全部控件的id。具體用法以下圖所示：

圖 413 控件id的代碼提示
不只如此，腳本編輯器還支持對控件類型的智能識別。當用戶經過unieap.byId(String id)方法，並選擇了一個具體的控件時，腳本編輯器會根據用戶選擇的控件ID，自動判斷控件類型，並給出相應的代碼提示。具體用法以下圖所示：

圖 414 智能判斷控件類型的代碼提示
另外，腳本編輯器還支持對複雜控件內部對象的提示。例如對Grid控件的Manager進行提示，具體用法以下圖所示：

圖 415 控件Manager的代碼提示
腳本編輯器還會對過程調用的方法進行代碼提示。具體用法以下圖所示（ 爲過程調用方法）：

圖 416 過程調用的代碼提示
6.2.7.3 設置代碼自動完成模板
該腳本編輯器有本身的代碼自動完成模板，幫助用戶快速完成代碼。在eclipse中點擊「窗口」>「首選項」>「UniEAP Workshop」>「JS Template」菜單項，會出現以下對話框：

圖 417 代碼自動完成模板
在代碼自動完成模板中，咱們能夠對現有模板進行添加，修改，刪除，恢復到刪除前狀態，恢復到修改前狀態，導入導出等操做。
6.2.7.4 在腳本中搜索
腳本編輯器支持對全局變量，公共方法的方法體，控件，page方法的方法體進行搜索。首先要將UI設計界面切換到腳本編輯器界面，點擊功能區的 按鈕，會彈出以下圖的對話框，並進行搜索：

圖 418 搜索界面

6.2.7.5 引用和查看外部JS文件
腳本編輯器支持引用外部JS文件，並對符合代碼註釋規範的外部JS文件中的方法提供代碼提示功能，對於不符合代碼註釋規範的外部JS文件中的方法不提供代碼提示功能。下圖列舉出一個含有正確方法註釋的外部JS文件：

圖 419 符合註釋規範的外部JS文件
下面就來介紹，如何將這個外部的test.js文件引入到項目中來。首先，咱們要打開一個view（或viewc）模型，點擊工具欄中的 按鈕，就會彈出「資源引用」的對話框，點擊「增長」按鈕，選擇引入的外部JS文件的正確路徑，而且保存模型文件，就能夠輕鬆的將外部JS文件引入到工程中來。而後打開腳本編輯器，在列表區中選擇引用的外部JS文件，並在方法區中選擇引用的外部JS文件的某個方法，那麼該方法的方法體就會顯示在腳本編輯器的代碼區中，具體效果以下圖所示：

圖 420 引用的外部JS文件在腳本編輯器中的展示
爲方便用戶批量引用外部JS文件，腳本編輯器還支持對外部JSP文件的引用（在引入該JSP文件時，咱們只讀取<script>標籤的內容，只要<script>標籤的內容符合下圖規範，就能夠批量引入多個外部JS文件）。引用外部JSP文件的方法同引用外部JS文件，下圖列舉一個符合引用規範的外部JSP文件：

圖 421 符合引用規範的外部JSP文件

腳本編輯器還支持對引用的外部JS文件進行查看。具體方法是：在腳本編輯器的列表區中選擇引用的外部JS文件，此時點擊功能區中「黃色鉛筆」按鈕 ，頁面會自動跳轉到引用的外部JS文件中。
6.2.7.6 模型繼承在腳本編輯器中的體現
當用戶新建一個view模型繼承一個原有的view模型時，子模型會繼承父模型中公共方法和page中的全部方法以及父模型的全部控件，並在腳本編輯器的方法區中出現「繼承」的字樣。當用戶修改子模型繼承父模型的方法後，子模型的該方法在方法區中會將原來的「繼承」字樣改成「覆蓋」字樣。對於子模型中新建的方法，該方法在方法區會出現「追加」的字樣。下圖，咱們舉了一個簡單的例子，其中testView.view繼承demoView.view：

圖 422 模型的公共方法顯示效果
6.2.7.7 全顯示模式
腳本編輯器支持全顯示模式，所謂「全顯示模式」即在腳本編輯器視圖下可直接查看view或viewc文件生成的js腳本，在有即時查看js代碼的需求下，不須要在view模型與js之間頻繁切換，方便開發人員查看代碼。並可經過點擊「黃色鉛筆」按鈕 ，直接跳轉到當前編輯方法所對應的js文件中的位置，以下圖所示：

圖 423 腳本編輯器全顯示模式按鈕
點擊「黃色鉛筆」按鈕 後，跳轉到全顯示模式並定位到該方法，以下圖所示：

圖 424 腳本編輯器全顯示模式
全顯示模式僅提供展現功能，不能對該視圖中的數據進行修改，而且全顯示模式下支持「ctrl+鼠標左鍵」進行方法的跳轉，經過點擊方法名可從新跳回到腳本編輯器的對應方法或事件中。
全顯示模式也可經過直接點擊左側下拉框進入，以下圖所示：

圖 425 經過下拉菜單進入腳本編輯器全顯示模式
6.2.7.8 經常使用API簡介
V4的view模型會將部分的源碼翻譯成RIA的代碼，能夠方便的完成JSP靜態代碼部分的轉換，而動態的js腳本能夠在腳本編輯器中來進行編寫。在腳本編輯器中編寫js代碼的過程當中，會使用大量的RIA代碼。考慮到RIA的API組織稍顯凌亂，故V4在其基礎上對一些經常使用的API進行了封裝，現經過使用場景依次對其進行介紹：
23) view.form.setDataStore(id,store)
解釋：設置form對應的DataStore
參數說明: id:對應Form控件的id
store:用於初始化控件的dataStore
場景舉例： 修改人員列表中的某我的員信息時，須要把Grid當行的數據取出來並放入到對應的Form中，以下所示：

圖 426 點擊Grid中的超連接

圖 427 將Grid選中行的數據放入到Form中
要實現上述功能，能夠經過以下的代碼來實現：
//得到Grid當前選中行的數據，以dataStore的格式進行封裝
var ds = view.grid.getRow("user_grid");
//將Grid選中的數據綁定到Form上
view.form.setDataStore("user_form",ds);
可見，當想清空某個Form綁定的dataStore中的數據時，可採起以下方式：
view.form.setDataStore("user_form",null);
24) view.form.getDataStore(id)
解釋：設置form對應的DataStore
參數說明: id:對應form控件的id
場景舉例：新增一我的員的時候，要把其Form的全部信息傳遞到後臺，以下所示：

圖 428 Form中的相關人員信息
當點擊「保存」按鈕時，要獲取Form綁定的dataStore的內容，並向後臺發送processor請求，代碼以下：
var ds = view.form.getDataStore("user_form");
view.processor.saveUser(ds);
25) view.form. setPropertyValue(id, propertyName, propertyValue)
解釋：設置form對應的DataStore的某個屬性值
參數說明: id: 對應form的id
propertyName: 屬性的名稱
propertyValue:屬性值
場景舉例：當新增一個組織單元時，會爲其Form中的名稱字段設置一個初始值，以下所示：

圖 429 點擊「新增」項爲銷售公司增長下級部門

圖 430 Form中「名稱」項會默認添加一個值
要修改Form中某個屬性的值的代碼功能以下所示：
view.form.setPropertyValue("unit_form", "name", randomName);
26) view.form.getPropertyValue(id,propertyName)
解釋： 得到form對應的DataStore的某個屬性值
參數說明: id:對應form的id
propertyName:屬性的名稱
返回值： 對應的屬性值
場景舉例：新增一個用戶的時候，須要判斷Form中輸入的帳戶是否已經存在，若存在則不容許持久化到數據庫中。以下所示：

圖 431 對Form中「賬號」項進行校驗
此時須要向後臺發送該屬性的值校驗數據庫中是否已經存在，則要在「保存」按鈕的事件中添加以下代碼：
var account = view.form.getPropertyValue("user_form", "account");
view.processor.validateAccount(account);
27) view.grid.setDataStore(id,store)
解釋： 設置Grid的綁定的dataStore的數據值
參數： id ：Grid控件的id
store ：綁定的dataStore的值
場景舉例： 在查詢了全部用戶後，要在用戶列表中顯示出來，以下所示：

圖 432 對Form中「賬號」項進行校驗
要實現該功能，在查詢processor的成功回調中添加以下代碼便可：
var ds = dc.getDataStore("result");
view.grid.setDataStore("user_grid",ds);
可見，若是想清空Grid中的內容，可經過以下方式實現：
view.grid.setDataStore("user_grid",null);
28) view.grid.getDataStore(id)
解釋： 得到Grid控件綁定的DataStore
參數： id：Grid控件的id
返回值： Grid控件綁定的DataStore
場景舉例：在彈出的Dialog中，要將主頁面的Grid中的內容原封不動的顯示出來則須要得到主頁面的Grid綁定的dataStore，代碼以下所示：
var gridDs = view.grid.getDataStore("user_grid");
而後將gridDs做爲參數傳遞給Dialog便可。
29) view.grid.insertRows(id, store, index)
解釋： 向Grid中插入行（可插入多行數據）（單選和多選Grid均適用）
參數： id: Grid控件對應id
store : 插入行數據對應的store
index： 插入的位置（從0開始），當不傳該參數時，默認插入到表格末尾
場景舉例： 當新增了一個用戶後，會將該用戶自動的插入到用戶列表的最後一行，以下所示：

圖 433 新增一個用戶

圖 434 新增的用戶自動插入到Grid的最後一行
爲實現該功能，在新增用戶processor對應的成功回調中，添加以下代碼便可：
var ds = dc.getDataStore('result');
view.grid.insertRows("user_grid",ds);
30) view.grid.deleteRow(id,index)
解釋：刪除Grid的選中行（適用於單選Grid）
參數：id: Grid控件的id
index： 待刪除的行的下標（從0開始），當不傳入此參數時，默認選擇刪除選中的行
場景舉例：當刪除Grid列表中的一個用戶的時候，會首先選中它所在的行，而後點擊刪除，刪除成功後，要在Grid中將這行數據也刪除，以下所示：

圖 435 刪除Grid中的選中行

圖 436 刪除成功後的效果
要實現該功能，只需在刪除人員的processor的成功回調中加入以下代碼便可：
view.grid.deleteRow("user_grid");
31) view.grid.deleteRows(id,indexs)
解釋：刪除Grid中選中的多行（適用於多選Grid）
參數：id: Grid控件對應的id
indexs: 待刪除的Grid的行的下標構成的數組，不傳遞此參數時默認刪除全部選中的行
場景舉例：當爲某個管理橘色刪除多個對應的人員時，須要用到多選的Grid，以下所示：

圖 437 爲管理角色刪除多個對應人員

圖 438 刪除成功後的效果圖
要實現這個功能，須要在刪除人員對應的processor的成功回調中執行下面的語句：
view.grid.deleteRows("user_grid");
這樣就會刪除全部選中的行的數據。
若是想刪除指定的某些行，能夠這樣實現：
//刪除第1行、第3行和第4行
view.grid.deleteRows("user_grid",[0,2,3]);
32) view.grid.updateRow(id,store,index)
解釋：更新Grid中的某一行
參數：id : Grid控件對應的id
store： 用來更新行的數據（以dataStore的方式封裝）
index： 待更新的行的下標（當不傳時，默認更新選中的第一行）
場景舉例： 當須要修改某個用戶的信息時，能夠經過以下方式：

圖 439 點擊超連接更新人員信息

圖 440 修改性別信息

圖 441 修改後的數據信息
要實現這個功能，在修改用戶信息的成功回調中，添加以下代碼：
var ds = dc.getDataStore('result');
view.grid.updateRow('user_grid',ds);
33) view.grid.getRow(id)
解釋： 得到Grid選中行的數據，並封裝成dataStore的格式。（適用於單選Grid）
參數： id ：Grid控件對應的id
index: 待獲取的行的下標（不傳的時候默認獲取當前選中行）
返回值：Grid選中行的數據（dataStore格式）
場景舉例：要修改某個用戶的信息的時候，點擊超連接會將該行對應的數據設置到一個Form控件上，以下所示：

圖 442 點擊超連接彈出修改頁面

圖 443 修改頁面
爲了實現這個功能，只須要在點擊超連接的事件裏添加以下代碼：
var ds = view.grid.getRow("user_grid");
獲得這個ds將其設置爲Form綁定的dataStore便可（調用view.form.setDataStore()方法）。
34) view.grid.getRows(id,indexs)
解釋： 得到Grid選中行的數據，並封裝成dataStore的格式。（適用於單選Grid）
參數： id ：Grid控件對應的id
indexs : 待獲取的行的下標構成的數組
返回值：Grid選中行的數據（dataStore格式）
場景舉例：在多選的Grid中，若是想獲取第1行、第3行和第4行對應的值，可經過以下方法：
view.grid.getRows("user_grid",[0,2,3]);
35) view.grid.getPropertyValue(id, propertyName, index)
解釋： 得到Grid中某指定行的某個屬性值
參數： id: Grid控件對應的id
prpertyName ：屬性名
　 index : 指定行的下標（不傳時，默認爲選中的行）
返回值： 屬性的值
場景舉例： 當要刪除一個用戶的時候，會得到該用戶對應的id並傳遞到後臺進行刪除，其操做流程以下所示：

圖 444 選中一個用戶並刪除

圖 445 刪除成功的頁面
在「刪除」事件中，須要得到當前選中行的id屬性值，並向後臺發送processor請求，代碼以下：
var userId = view.grid.getPropertyValue("user_grid", "id");
view.processor.deleteUserById(userId);
36) view.grid.setPropertyValue(id, propertyName, propertyValue, index)
解釋： 設定Grid某行中某個屬性的值
參數： id: Grid控件對應的id
propertyName: 屬性名稱
propertyValue: 屬性值
index: 要設置屬性值的行的索引，如不傳的話默認修改當前選中行
場景舉例：當須要將Grid選中行的「賬號」屬性值改成」wang-fan」時，可經過添加下面的代碼實現：
view.grid.setPropertyValue("user_grid", "account", "wang-fan");
37) view.tree.setDataStore(id,store)
解釋： 爲Tree控件綁定數據（注意：此方法只適用於全加載的Tree）
參數： id: Tree控件的id
store: Tree所需綁定的dataStore，須要符合樹形結構
場景舉例：對於組織單元類型這樣的一棵樹，它是全加載的，在page-load發送完請求取得全部的數據後，在成功回調中只須要調用以下方法，樹中的全部數據均會被綁定上：
var ds = dc.getDataStore('result');
view.tree.setDataStore("unitType_tree",ds);
數據被綁定後，其顯示效果以下所示：

圖 446 組織類型樹的頁面展現效果
38) view.tree.deleteNode(id,node)
解釋：刪除Tree控件中的node節點
參數：id: Tree控件的id
node: 待刪除的樹中的節點
場景舉例： 在組織機構樹中，能夠刪除某個節點，以下所示：

圖 447 刪除「國際事業部9」這個樹節點

圖 448 刪除成功後的效果
在刪除節點的成功回調中，須要在Tree控件中將該結點刪除，調用以下方法便可：
//刪除右鍵選中的節點node
view.tree.deleteNode("unit_tree",node);
39) view.tree.deleteNodes(id,nodes)
解釋： 刪除Tree中的多個節點
參數： id: Tree控件的id
nodes: 待刪除的節點構成的數組
場景舉例： 對於一個複選樹控件，若是選中了多個節點後要將這些節點刪除，便可經過以下代碼實現：
//獲得全部複選框中選中的節點
var selectedNodes = unieap.byId("unit_tree").getSelectedNodes();
//刪除這些選中的節點
view.tree.deleteNodes("unit_tree",selectedNodes);
40) view.tree.updateNode(id,node,store)
解釋： 更新Tree中的某個節點
參數： id: Tree控件的id
node: 待更新的節點
store: 用於更新節點的dataStore
場景舉例：更新組織機構樹中的某個節點，以下所示：

圖 449 修改前的組織單元信息

圖 450 修改後的組織單元信息
點擊保存按鈕後，選中節點所對應的數據也會發生變化，以下所示：

圖 451 修改後節點的數據值發生了變化
要實現修改節點的功能，只須要在processor對應的成功回調中添加以下代碼便可：
//得到修改後的數據
var ds = dc.getDataStore("result");
//得到當前Tree中選中節點
var node = unieap.byId("unit_tree").getCurrentNode();
//修改Tree中對應的節點
view.tree.updateNode("unit_tree", node, ds);
41) view.tree.getPropertyValue(id,node,propertyName)
解釋： 得到Tree中某一節點對應的屬性值
參數： id： Tree控件的id
node: 待獲取屬性值的節點
propertyName: 待獲取的屬性值
返回值： 屬性值
場景舉例： 當要刪除某個組織單元的時候，須要獲取待刪除節點的id屬性傳到後臺，其效果以下：

圖 452 右鍵刪除樹中某一節點

圖 453 刪除成功後的效果
在點擊「刪除」菜單項的事件中，須要獲取當前選中節點的id屬性，代碼以下：
//得到待刪除節點的id屬性
var nodeId = view.tree.getPropertyValue("unit_tree",currentNode,"id");
view.processor.deleteUnitById(nodeId);
42) view.tree.setPropertyValue(id, node, propertyName, propertyValue)
解釋： 設置Tree中某個節點的某個屬性的值
參數： id: Tree控件的id
node: 待修改屬性的節點
propertyName: 待修改的屬性名
propertyValue: 待修改的屬性值
場景舉例： 當修改了某個組織單元節點的屬性值後，要在樹中對其進行更新，如僅修改了一個組織單元節點的name屬性值，則可經過以下代碼同步更新樹中相應的顯示內容：
view.tree.setPropertyValue("unit_tree", currentNode, "name", "事業部");
43) view.tree.getAllNodes(id,isContainRoot,node)
解釋：得到node下的全部已經渲染出的全部子孫後代節點（即得到以node爲根的子樹的全部節點）
參數：id: Tree控件的id
isContainRoot: 返回的結果集中是否包含當前node節點，true表明包含，false表明不包含
node: 當前節點
返回值：全部node子孫節點構成的數組
場景舉例：當在程序要得到以node爲根的全部子孫節點時，可調用以下方法：
//得到當前節點的所有已渲染出的子孫節點
var nodes = view.tree.getAllNodes("menuTree",false,node);
22． view.tree.addChildren(id,node,store,configMap)
解釋： 爲node節點添加相應的子節點（適用於懶加載的樹）
參數： id: Tree控件的id
node: 要添加子節點的節點
store: 待添加的子節點
configMap: 配置參數Map，如不傳此參數默認使用樹中配置的參數。
這裏須要對configMap參數進行詳細的解釋，此參數適用於異構懶加載樹的場景。在配置樹的相關屬性時，要制定Tree的相關屬性對應的dataStore的屬性名，以下所示：

圖 454 Tree控件的id、label、parent屬性的配置
但若是樹中不一樣層次的節點來自於不一樣的dataStore的時候，沒法爲其設置一個統一的名字，此時須要在程序中動態切換這幾個參數的配置，用來指定這幾個關鍵屬性的名稱，以下所示：
configMap = {
id : 'id',
label : 'title',
parent : 'parentId'
});
此時即表明樹的id爲dataStore中id屬性，label爲dataStore中的title屬性，parent爲dataStore中的parentId屬性。
須要注意的是，只有在異構切換樹中節點的dataStore時才須要使用該參數，不然在Tree的屬性視圖中進行相應的配置便可。
場景舉例：異構懶加載樹
有的時候，樹的不一樣層次的節點可能來自於不一樣的dataStore，以下圖所示：

圖 455 異構懶加載樹
這是一棵懶加載的樹，其中「迭代」爲虛根，第一層節點綁定的是sprint dataStore，而第二層節點綁定的是backlog dataStore。在sprint的dataStore中，幾個關鍵屬性的名稱爲id、title、parentId，而在backlog的dataStore中，幾個關鍵屬性的名稱爲id,name和sprintId。在Tree控件中配置的相應屬性爲id,label,parentId，可見，如何將不一樣的dataStore的相關屬性統一是可否實現異構加載樹功能的關鍵，此時方法中的參數configMap就起到了相當重要的做用。
在查詢sprint節點的成功回調中，編寫以下代碼實現加載出第一層節點的功能：
//獲得查詢返回的dataStore
var ds = dc.getDataStore('result');
//獲得當前Tree的虛根節點
var root = unieap.byId("isomerismTree").getRootNode();
//爲Tree添加第一層節點
view.tree.addChildren("isomerismTree", root, ds, {
id : 'id',
label : 'title',
parent: 'parentId'
});
當展開第一層的某個節點的時候，會去加載該sprint節點下的全部backlog節點，在該查詢方法的成功回調中，須要編寫以下代碼：
//獲得查詢返回的dataStore
var ds = dc.getDataStore('result');
//爲當前展開節點添加第二層節點
view.tree.addChildren("isomerismTree", currExpandNode, ds, {
id : 'id',
label : 'name',
parent: 'sprintId'
});
這樣便可成功的構造出一顆異構的懶加載樹。

6.3 異常框架
用戶須要自定義業務異常碼，該文件存放在SC或DC的「content/exception/」（如該文件夾不存在則須要用戶手動新建）文件夾中，爲」*.properties」格式。該文件命名由用戶決定，並支持國際化。以下圖所示：

圖 456 異常碼存放位置
其中該文件的」_zh_CN」標識該文件的國際化信息。該文件的內容爲「key=value」格式，示例以下：
……
EAPTECHSECURITY0001=業務角色名稱{0}已經存在，請從新輸入。
……
[注意]：示例中的」{0}」表明第一個參數的位置，該參數將經過構造異常對象時傳入。
當用戶須要拋出業務異常時，僅需在須要彈出異常的地方加入以下代碼：
throw new UniEAPBusinessException("EAPTECHSECURITY0001",new Object[]{busiRole.getName()});
即表明在此處拋出業務異常碼爲EAPTECHSECURITY0001的異常，而且參數爲」 busiRole.getName()」。效果以下所示：

圖 457 異常碼存放位置
當用戶須要拓展異常框架類時須要繼承UniEAP業務異常框架的實現基類：UniEAPBusinessException。
6.4 國際化
6.4.1 概述
國際化是建立適合於國際市場的軟件過程，它能支持多個國家和地區的本地化應用，使得應用軟件可以適應多個地區的語言、數字、貨幣、日期等習慣。在編碼和用戶界面設計時，使用適當的 API 來處理本地語言數據，確保產品是爲本地語言功能設計的。
設計一個國際化的應用軟件應考慮下面這些特性：
1．對於程序中本地信息敏感的數據（日期、貨幣等）可以根據當前所在的國家或地區的文化習慣進行顯示；
2．對於文本元素（錯誤提示信息，狀態信息等）不是直接寫在應用程序中，而是存儲在應用程序外部的資源文件中，在應用程序中經過程序代碼來動態得到這些數據；
3．無需修改和從新編譯程序就能支持新的國家或地區的用戶。
6.4.2 模型文件國際化
6.4.2.1 配置及抽取國際化數據
首先對將要使用的實體模型（Entity）進行國際化，保證多個view使用同一實體模型生成數據集時，國際化資源文件相同。
6.4.2.1.1 Entity模型文件國際化
Entity模型文件的國際化能夠看做對View模型數據集以及後臺校驗信息的國際化，可保證應用同一Entity模型文件的數據集（模式控件）採用相同的國際化數據，以此來保證國際化數據的統一性。
用戶須要在Entity模型上右鍵-<國際化>-<抽取國際化>便可對實體模型中的Label及校驗信息進行抽取，以下圖所示：

圖 458 Entity模型文件國際化抽取
與view模型文件不一樣的是抽取後的key將直接顯示在Entity模型文件中，不對其進行轉義，抽取後Entity文件以下圖所示：

圖 459 Entity模型文件國際化結果
國際化文件存放在當前DC的國際化文件中，具體目錄以下圖所示：

圖 460 國際化文件存放目錄
對已國際化的Entity生成的數據集，使用該數據集生成的模式控件再也不須要再次進行國際化。使用同一Entity文件生成的數據集採用同一套國際化數據。
【注意】:Entity模型文件的國際化須要優先於View模型文件，保證View模型使用該 Entity文件生成的數據集（主要服務於模式控件）是已國際化形式。
6.4.2.1.2 抽取view模型國際化數據
抽取指的是將view中可能須要國際化的部分抽取到國際化文件中，value爲設計頁面設定的控件屬性值（例如：button的label屬性），key首先由工具生成全局惟一的key，容許用戶在2.3.1圖中顯示的頁面進行修改（但因爲要儘量保證key在全局中的惟一性此作法並不推薦）。

 抽取模型國際化數據
右鍵點擊須要抽取的view文件，點擊<國際化>-<抽取國際化>，以下圖所示：

圖 461 View模型國際化文件抽取
彈出dialog中對待抽取控件屬性進行選擇，並可根據用戶須要修改可抽取的key，但對已經存在的key不容許進行修改，以下圖所示:

圖 462 國際化抽取對話框（1）
點擊<OK>後會自動對選中的信息進行國際化。
【注意】若是國際化信息圖標爲 即表示該條數據已被抽取，不能再次抽取，以下圖所示：

圖 463 國際化抽取對話框（2）

國際化成功後,結果將保存在當前DC -<content>-<i18n>-<package_zh_CN.properties>中，以下圖所示：

圖 464 國際化文件存放目錄
package_zh_CN.properties文件內容以下圖所示：

圖 465 國際化文件內容

 批量抽取模型國際化數據
右鍵點擊view模型文件夾，點擊<國際化>-<抽取國際化>，自動將全部view模型中可抽取的屬性進行抽取，並根據首選項配置語言放置在view所在DC對應的國際化文件中，文件存放位置見上節：

圖 466 國際化文件批量抽取
 配置模型中控件的國際化數據
當用戶須要引用已有的國際化文件時，可對控件單獨配置國際化信息，以Button爲例，點擊須要國際化的屬性(Button控件只有label屬性支持國際化)：

點擊label屬性後，屬性框內出現放大鏡圖標，點擊後如圖所示：

圖 467 選擇國際化信息
第一個Combo以下圖所示：

圖 468 國際化文件引用位置
用戶可經過選擇對應的國際化文件來指定不一樣的國際化數據，即該Button可以使用當前DC、當前SC、依賴的DC和依賴的SC中存放的已有國際化數據（.properties文件中已有數據），以當前DC爲例，選擇<當前DC>時，用戶可在下方的Table中選擇須要指定的國際化數據，例如，須要指定該Button爲<編輯>所對應的國際化數據，則選擇Table中<編輯>所在行，以下圖所示：

圖 469 選擇國際化信息
點擊<肯定>則該按鈕將使用<編輯>的國際化數據，以下圖所示：

圖 470 國際化後效果
6.4.3 撤銷模型文件國際化
對於已經國際化的模型文件，在對應右鍵菜單中提供撤銷國際化的功能，相似於上節的抽取操做，在模型文件（或文件夾）上右鍵-<國際化>-<撤銷國際化>，便可撤銷該模型的全部國際化信息，還原到未國際化狀態，以下圖所示：

圖 471 撤銷國際化
[注意]：請在撤銷國際化前確認該模型文件中的KEY存在於所在工程(DC/PATCH)中的「content/i18n/properties_zh_CN.properties」（以中文舉例，國際化資源文件後綴取決於使用語言）。
6.4.4 JS文件國際化
該國際化方案應用了dojo的國際化功能，經過dojo封裝的方法對控件進行國際化。
對於須要進行腳本國際化的view模型文件，請在view的概要視圖勾選<支持腳本國際化>，以下圖所示：

圖 472 支持腳本國際化
該屬性會在抽取國際化的同時自動勾選，相似的，在撤銷國際化時自動取消勾選，防止生成冗餘代碼。
國際化資源文件配置結束後，可在View模型的JS腳本中輸入相應國際化代碼，對於key爲」I18N_KEY」的國際化片斷以view.i18n(「I18N_KEY」)進行轉換，以下圖所示：

圖 473 JS腳本國際化

6.4.5 代碼表國際化（CodeList）
Codelist表中的LANGUAGE字段負責保存代碼的國際化信息，一個代碼有幾種語言的信息就在表中對應幾條記錄。用戶對代碼表作國際化時僅需對已有數據進行復制，並修改新數據的「LANGUAGE」字段便可，以下圖所示：

圖 474 代碼表
圖中英文數據即經過複製中文數據並修改LANGUAGE字段爲「en_US」來達到CodeList的國際化。

第7章 組織機構安全使用指南7.1 組織機構7.1.1 基本概念7.1.1.1 用戶用戶包括業務用戶和管理員。在用戶管理中不作區分，當一個用戶屬於業務角色時，這個用戶就屬於業務用戶，當一個用戶屬於管理角色時，這個用戶就是管理員。一個用戶既能夠屬於業務角色也能夠屬於管理角色。一個用戶能夠同時屬於多個業務角色，但最多隻能屬於一個管理角色。另外，用戶還能夠隸屬於組織單元和職位。7.1.1.2 組織單元目前組織機構只支持單維度組織機構樹。組織單元支持分級管理，分爲兩種狀況，一種是相似於V3的作法，支持管理角色可管理的組織單元是離散的；另一種狀況，是支持管理角色可管理的組織單元能夠級聯下級。7.1.1.3 職位職位隸屬於組織單元。職位不分上下級。隸屬於職位下的用戶必須隸屬於其所屬組織單元。7.1.1.4 組織單元類型組織單元類型是一個樹形結構的數據，該數據根據業務的不一樣須要對其進行維護。用於組織單元信息維護。7.1.2 當前登陸用戶在業務系統中，須要動態獲取當前登陸用戶信息，獲取方法以下：com.neusoft.unieap.core.context.properties.User currUser = UniEAPContextHolder.getContext().getCurrentUser();經過當前登陸用戶能夠獲取到用戶賬號、名稱等用戶信息。另外還能夠獲取用戶所屬的角色。其中，角色包含id、name和type屬性，type屬性的值有幾種，分別是「busiRole」、「superAdminRole」、「secAdminRole」、「orgAdminRole」、「unit」、「station」等。具體接口及參數能夠參看javadoc。另外，經過UniEAPContextHolder還能夠存放業務系統中線程相關的上下文數據，調用方式以下：UniEAPContextHolder.getContext().addCustomProperty(key,value);數據獲取方式以下：String value= UniEAPContextHolder.getContext().getCustomProperty(key,value);7.1.3 擴展屬性在v3中擴展屬性在extinfo.xml文件定義，在v4中擴展屬性的定義是經過數據庫表來實現的，表的名稱爲UP_EXT_ATTR_DEFINE。在這個表建庫腳本中中有一些樣例數據供參考，能夠參照着進行配置。在業務系統中，增長擴展屬性（能夠是針對用戶和組織單元），只須要以下幾個步驟：在UP_EXT_ATTR_DEFINE表中維護擴展屬性數據；在擴展屬性表中增長對應的字段；重啓服務，進入對應的管理界面就能看到效果。爲了方便配置，對錶中定義的屬性作下簡單的描述。表格 1 UP_EXT_ATTR_DEFINE名稱 類型 可爲空 註釋ID VARCHAR2(32) N Id，目前手動輸入，確保惟一ATTR_NAME VARCHAR2(32) N 屬性名稱，能夠根據業務含義任意定義CONTROL_TYPE VARCHAR2(32) N 顯示控件類型，對應於ria的form控件類型LABLE VARCHAR2(64) N 顯示標籤，在頁面上顯示的labelREAD_ONLY CHAR(1) N 是否只讀REQUIRED CHAR(1) N 是否必填MAX_LENGTH NUMBER(3) Y 顯示最大長度，控制頁面上輸入域中最大的輸入長度MIN_LENGTH NUMBER(3) Y 顯示最小長度，控制頁面上輸入域中最小的輸入長度DECIMAL_PRECISION NUMBER(1) Y 浮點類型精度OBJ_TYPE VARCHAR2(16) N user、unit、station等ROW_SPAN NUMBER(1) N 跨行數LABEL_COL_SPAN NUMBER(1) N 標籤跨列數SORT NUMBER(2) N 顯示順序CODE_TYPE VARCHAR2(64) Y datastore名稱，用戶codelistICON_CLASS VARCHAR2(32) Y 圖標CSS類，用於TextBoxWithIconCOLUMN_NAME VARCHAR2(64) N 擴展屬性字段名，與數據庫表中的定義要一致COLUMN_TYPE VARCHAR2(32) N 擴展屬性字段類型，包括「Date」、「String」以及「Number」等TABLE_NAME VARCHAR2(32) N 擴展屬性表名VALUE_COL_SPAN NUMBER(1) N 輸入域跨列數DISPLAY_STYLE VARCHAR2(16) Y 顯示風格，有兩種應用場景：一是用於下拉框，默認值爲「list」，另外還能夠配置成「multi」或者「table」；第二種狀況是用於TextBoxWithIcon的隱藏域，這時該屬性對應的值爲「none」DIALOG_WIDTH NUMBER(4) Y dialog寬度，單位爲px，用於TextBoxWithIconDIALOG_HEIGHT NUMBER(4) Y dialog高度，單位爲px，用於TextBoxWithIconCREATED_BY VARCHAR2(32) Y 建立人CREATION_DATE DATE Y 建立時間LAST_UPDATED_BY VARCHAR2(32) Y 修改人LAST_UPDATE_DATE DATE Y 修改時間7.1.4 事件監聽業務系統根據業務須要，能夠監聽的事件目前只有一個：UserDeleteEvent。用於監聽用戶刪除操做，監聽的方式能夠參照安全中相關內容。7.2 安全7.2.1 基本概念7.2.1.1 業務類角色具備業務職能的人員集合。業務類角色包括業務角色、組織單元、職位。 業務角色業務角色間不具備上下級關係，管理角色能夠對其進行分級管理。 組織單元做爲一我的員的集合，也能夠對其進行受權，管理角色能夠對其進行分級管理。 職位做爲一我的員的集合，也能夠對其進行受權。7.2.1.2 管理角色具備管理職能的人員集合，管理角色間具備上下級關係。對於一個系統，全部的管理角色能夠構成一棵管理角色樹。管理角色主要分爲三類：超級管理角色、安全管理角色和組織管理角色。 超級管理角色即「adminRole」，類型爲「superAdminRole」，它是整個管理角色樹的樹根，是頂級管理角色。 安全管理角色是管理角色樹的一個分支，頂級安全管理角色是「adminRole」的子節點。其角色類型爲「securityAdminRole」，負責菜單受權等權限相關操做。 組織管理角色是管理角色樹的一個分支，頂級安全管理角色是「adminRole」的子節點。其角色類型爲「orgAdminRole」，負責組織機構管理相關操做。這個管理角色類型當業務系統中管理角色職責劃分不是特別細的狀況下，能夠去掉。相關操做有安全管理角色來擔當。7.2.1.3 可管理「可管理」是針對操做人員屬於管理角色來講的，在閱讀本章過程當中您常常會看到相似於「可管理的組織單元」、 「可管理的業務角色」這樣的短語，在這裏解釋一下其中「可管理」一詞的含義：當用戶以管理角色身份登陸系統後，不一樣權限的管理角色看到的組織機構數據不一樣，可以管理的組織機構數據也是不一樣。「可管理」是指能夠對組織機構數據進行增長、刪除和修改操做。7.2.1.4 分級管理分級管理」是針對操做人員屬於管理角色來講的，「分級管理」的對象包括組織機構、業務角色以及管理角色自己。含義是一個管理角色只能管理他可管理的組織機構、業務角色以及管理角色數據，不能越級管理。爲了說明分級管理的含義，以管理角色管理爲例：假設當前操做的管理角色爲A，A的一個直接下級管理角色爲B，B的一個直接下級管理角色爲C。當以A身份登陸系統並進入管理角色管理頁面後，可以看到B，但不能看到C。能看到既能管理，即A能夠對B其進行刪除和修改操做。A也能夠建立新的管理角色，新建立的管理角色對於A來說是可管理的。7.2.1.5 級聯回收級聯回收功能是針對操做人員屬於管理角色來講的。爲了說明級聯回收的含義，假設當前操做的管理角色爲A，A的一個直接下級管理角色爲B，B的一個直接下級管理角色爲C，系統中存在一個資源爲D。假設A已經把D的管理權限分配給B，B也已經把D的管理權限分配給C。當A刪除B對D的可管理權限時，C對D的管理權限也同時被刪除，這就是級聯回收的含義。7.2.2 資源權限7.2.2.1 菜單權限菜單做爲用戶進行業務操做的入口是系統中最廣泛、最重要的資源。因爲不一樣的用戶在實際工做中有不一樣的職責，因此他們使用系統進行的業務操做也各有異同。對菜單進行受權不只能確保每一個業務功能僅能被合適的用戶操做，並且能下降用戶使用系統的複雜度。菜單權限有兩種類型，分別是「可以使用」和「可分配」。 可以使用「可以使用」便可訪問，用戶登陸系統之後能夠在菜單導航條或菜單樹上看到相應的菜單項，而且能夠經過點擊該菜單項進入相應的頁面進行業務操做。這種權限類型適用於各類角色。「可以使用」的菜單對象對於管理角色來講是管理菜單，對於業務類角色來講是業務菜單。 可分配「可分配」權限只針對管理角色，便可以分配給下級管理角色的菜單權限。用戶登陸系統之後能夠在指定的操做頁面上將菜單分配給下級角色。「可分配」的菜單對象是業務菜單。「可以使用」和「可分配」是兩種不一樣的權限類型，它們之間沒有必然的聯繫。一個管理角色對於菜單A有「可分配」權限，但不必定有「可以使用」權限，反之亦然。7.2.2.2 頁面權限用戶對某一菜單用「可以使用」權限以後，就能夠到菜單對應的頁面進行業務操做，可是每每還會存在粒度更細的資源控制需求。例如，在一個輸入我的信息的頁面中，除了包含人員的基本信息外，還包含工資信息。能夠操做這個頁面的用戶包括業務角色A和業務角色B。其中業務角色A，能夠管理用戶的基本信息，但工資做爲敏感信息，只有業務角色B才能對其進行維護。在這種應用場景下，「工資」做爲頁面上的一個輸入域就須要對其進行權限控制。頁面權限只適用於業務類角色。7.2.2.3 權限類型做用在輸入組件上的權限類型包括： 只讀只讀權限能夠做用於ria的全部form控件類型以及Grid（含xGrid）控件類型，還包含html中的image控件類型。 隱藏隱藏權限能夠做用於全部的ria控件類型。在對用戶不作頁面控件受權的默認認狀況下，用戶擁有對控件的徹底控制權限。7.2.2.4 特性說明頁面權限有兩個特性須要作下說明： 權限取最小對於一個用戶來講，若是分別屬於業務角色A和業務角色B，其中業務角色A對某個頁面上的控件X被授予只讀權限，業務角色B對該頁面上的控件X被授予隱藏權限，那麼這個用戶訪問該頁面的時候，對控件X 的頁面權限是隱藏，也就是取最小權限。 支持分級頁面資源權限與菜單資源權限相似，對於管理角色來講也支持分級管理。分級管理規則與菜單相似，暫不作詳細描述。7.2.3 賬號鎖定踢出在咱們默認的組件中，經過修改security dc的applicationContext-security.xml文件中的accountPolicyService bean中的屬性改變設置。表格 2 accountPolicyService bean屬性介紹屬性 值類型 說明accountLocked true/false 是否啓用賬號鎖定。ipLocked true/false 是否啓用IP鎖定。failedCount 整數 賬號/IP鎖定前，能夠錯誤登陸的次數。lockedTimeInterval 整數 賬號鎖定的時間間隔，值爲整數，單位是分鐘。accountKicked true/false 是否啓用賬號踢出。7.2.4 驗證碼在咱們默認的組件中，經過修改security dc的applicationContext-security.xml文件中的jcaptchaConfig bean中的屬性改變設置。表格 3 jcaptcha節點屬性及子元素屬性/子元素 值類型 說明enabled true/false 是否啓用驗證碼。acceptedChars true/false 自定義配置是否生效。默認「true」，表示自定義配置生效，false表示自定義配置無效，繼續使用默認實現。minWordLength 整數 驗證碼最小長度maxWordLength 整數 驗證碼最大長度minFontSize 整數 驗證碼最小字號maxFontSize 整數 驗證碼最大字號bgWidth 整數 驗證碼背景圖片寬度bgHeight 整數 驗證碼背景圖片高度textColor java.awt.Color的常量（WHITE、YELLOW等）或者RGB值（211, 229,243） 驗證碼字體顏色bgColor 同上 驗證碼背景基色，真正的背景色是基於該基色混淆出來的。7.2.5 在線用戶在默認的組件中，經過修改在security dc中的applicationContext-security.xml文件中的onlineUserConfig bean中的屬性改變設置，對於在線用戶功能來講只有一個是否啓用的設置。配置以下所示：<bean id="onlineUserConfig" class="com.neusoft.unieap.techcomp.security.onlineuser.OnlineUserConfig"> <property name="enabled" value="true"/></bean>在線用戶信息保存在UP_SEC_ONLINE_USER表中。另外，經過管理控制檯應用中的「安全管理」-》「在線用戶查看」菜單能夠查看在線用戶信息。7.2.6 非正常登陸請求在某些應用場景下，在沒有輸入用戶名、密碼進行登陸狀況下，嚮應用服務器發送請求。常見的有web service、跨應用訪問頁面。在這種場景下，須要在請求後面拼上用戶名和密碼，樣例以下：http：//10.4.46.16:8080/framework/techcomp/org/user-view.jsp? eap_username=YWRtaW4.&eap_password=MQ..其中，eap_username和eap_password就是用戶的賬號和密碼，在這裏，用戶名（admin）和密碼（1）是通過轉碼處理以後的。7.2.7 Session過時當用戶Session過時後，若是繼續訪問頁面系統默認會彈出登陸dialog。Session過時對應的頁面是/techcomp/security/relogin.jsp，能夠經過patch工程對該頁面進行修改。7.2.8 菜單受權 菜單投票類：當一個用戶經過角色受權對某個菜單A沒有訪問權限，若是該用戶在瀏覽器的地址欄中輸入菜單A的URL地址。7.2.9 事件監聽業務系統根據業務須要，能夠監聽的事件包括以下幾個： 登陸成功； 登陸失敗； 用戶登出；首先在Spring配置文件中增長事件監聽的bean，相似於下面的形式：<bean id="applicationListener" class="com.neusoft.unieap.***.ApplicationListener"/>監聽器中的代碼實現，相似於以下形式：import org.springframework.context.ApplicationEvent;import org.springframework.context.ApplicationListener;public class ApplicationListener implements ApplicationListener {public void onApplicationEvent(ApplicationEvent event) {if(event instanceof SuccessfulAuthenticationEvent) { SuccessfulAuthenticationEvent successfulAuthenticationEvent = (SuccessfulAuthenticationEvent)event; System.out.println("Received:================successful!!!!");}if(event instanceof UnsuccessfulAuthenticationEvent){……}if(event instanceof LogoutEvent){……}}}業務系統中，須要監聽哪一個事件就增長對哪一個事件的判斷，並加上對應的處理。7.3 管理控制檯7.3.1 初始受權初次啓動應用，用admin/1登陸系統後顯示以下頁面： 圖 475 初次登錄後的頁面此時，系統中admin用戶對管理控制檯只有對「安全角色」-》「安全管理角色」菜單有權限。點擊「安全管理角色」頁面中的「可用菜單」tab頁，爲「超級管理員」角色授予可以使用的菜單權限，以下圖所示： 圖 476 「安全管理角色頁面通常狀況下，選中管理控制檯中的全部菜單，而後點擊保存。這樣，超級管理角色將對管理控制檯中的全部菜單有訪問權限。用admin/1從新登陸系統，頁面以下所示： 圖 477 再次登錄後的頁面7.3.2 組織單元維護點擊「組織機構-》組織單元管理」菜單，當初次訪問這個頁面時，沒有組織機構樹，此時顯示的頁面以下： 圖 478 組織單元管理頁面點擊「組織單元樹」titlepane中的「新增」按鈕，增長根組織單元。而後，顯示的頁面以下： 圖 479 增長組織單元一個組織機構樹只有一個根節點，若是想增長下級組織單元，選中父組織單元，右鍵，點擊菜單中「新增」按鈕，增長下級組織單元。7.3.3 職位管理點擊「職位管理」，頁面以下所示： 圖 480 職位管理頁面選中要增長的組織單元，在右側「職位列表」區域新增職位，在「用戶列表」區域爲職位關聯用戶。7.3.4 組織單元類型若是系統中須要有組織單元類型，須要先在「組織單元類型」頁面維護組織單元類型數據，而後用於在組織機構維護作選擇。7.3.5 用戶維護點擊「用戶管理」菜單，顯示的頁面以下： 圖 481 用戶管理頁面系統默認帶「admin」用戶，能夠經過「用戶列表」titlePane區域的「新增」按鈕增長用戶，修改用戶經過grid中「賬號」中的超連接對用戶信息進行修改。7.3.6 管理角色在v4中的管理角色分爲安全管理角色和組織管理角色，若是沒有特別需求一般狀況只要有安全管理角色就能夠。組織管理角色是在業務系統須要支持三員分離的狀況下才行。在不須要組織管理角色的場景下，管理控制檯「安全管理」中的「組織管理角色」菜單能夠刪除。下面針對「安全管理角色」的用法作下簡單的說明。點擊「安全管理」-》「安全管理角色」菜單，顯示以下頁面： 圖 482 安全角色管理頁面默認狀況下存在一條「超級管理員」的安全管理角色數據，這個管理角色也默認關聯一個賬號爲「admin」的用戶。安全管理角色的設計思想與v3中的管理角色基本相同，都是分級管理，每一層只能管理它的直接下級。「超級管理員」角色略有特殊，它除了能管理其直接 管理角色外，還能夠管理它本身，能夠對其自己及其關聯的用戶進行維護。不一樣的是，在v4下顯示的安全管理角色樹是一棵完整的樹，但對於不可管理的數據在樹上是灰顯的。安全管理角色的增長和刪除操做，都是經過右鍵管理角色菜單來進行。在「角色維護」tab頁能夠維護管理角色數據，併爲其關聯用戶和刪除用戶。在「可用菜單」tab頁能夠爲選中的管理角色授予菜單可以使用權限（與v3相似）。在「可分配菜單」tab頁能夠爲選中的管理角色授予菜單可分配權限（與v3相似）。在「可受權組織範圍」tab頁中，爲管理角色授予其可管理的組織範圍，這裏經過雙checkbox來實現，除了能夠經過樹節點後面的checkbox爲管理角色分配離散的可管理組織單元，也能夠經過選擇樹節點的前面的複選框進行級聯下級的選擇。在「可管理業務角色」tab頁中，爲管理角色分配可管理的業務角色（與v3相似）。7.3.7 業務角色點擊「安全管理」-》「業務角色管理」菜單，進入業務角色管理頁面，頁面以下所示： 圖 483 業務角色管理頁面默認狀況下，沒有業務角色數據。在「業務角色列表」中能夠爲增長、刪除和修改業務角色數據。增長和刪除經過titlePane上的按鈕來進行，修改操做經過點擊「角色名稱」上超連接來作。經過在右側的「用戶列表」tab頁爲業務角色關聯用戶。經過在右側的「應用菜單受權」tab頁爲選中的業務角色授予菜單的訪問權限。在「應用菜單受權」tab頁中支持頁面受權。7.3.8 組織角色受權組織角色受權是指對組織單元、職位進行受權，若是業務系統中須要支持對組織單元和職位受權則須要經過訪問「安全管理」-》「組織角色受權」菜單來作。在這裏支持頁面受權。7.3.9 頁面受權以業務角色爲例，對頁面受權的大體用法作下簡單的說明。在workshop中打開須要作頁面受權的view模型，並切換到「概要」頁面，選中「支持頁面受權」複選框，而後保存view模型。而後，點擊「安全管理」-》「業務角色管理」菜單，選中要受權的角色，並選中「應用菜單受權」tab頁，選中要作頁面受權的菜單，而後點擊頁面右上角的「頁面受權」按鈕，而後彈出受權頁面，以下圖所示： 圖 484 頁面權限管理頁面能夠對頁面上的控件進行頁面受權。受權以後，更換登陸用戶，並訪問相應菜單，便可以看到頁面受權的效果。另外，在咱們默認的組件中，經過修改在security dc的applicationContext-security.xml文件中的pageAuthConfig bean中的屬性改變能夠進行頁面權限設置的控件類型，默認狀況下全部類型。具體狀況能夠根據業務須要進行修改。須要說明的是，業務中若有對applicationContext-security.xml的擴展則須要修改擴展後的對應bean的配置。須要說明一下，不要拿組織機構和安全的頁面作頁面受權的試驗，由於組織機構和安全頁面沒有配置支持頁面受權。上面的截圖只是個示例圖。具體的受權要針對業務的頁面。