使用 ASP.NET Web Forms 製作網頁，常用來製作展示層共用元件的方式就是使用 MasterPage 與 UserControl。SampleCMS 也不例外，接下來以帳號清單頁 Account-List.aspx 為例說明後台相關元件以及各項的分工，包含前一篇 網頁共用元件說明：簡介 提到的後台網頁共用元件 BackendPageCommon（在帳號清單頁使用的是其衍生類別 AccountCommonOfBackend）。
 |
| 帳號清單頁畫面 |
上圖為帳號清單頁畫面，下列先從畫面上看得到的部分開始說明。
1. MasterMain.master
MasterPage 主要功能就是作為 UI 的框架，負責載入共用的 js, css 以及繪製所有網頁都需要的 HTML 元素，並且在畫面上挖出常變動的區塊 (ContentPlaceHolder) 提供給各個網頁自行繪製。
圖中黃色的部分，MasterMain.master 為所有後台清單頁和內容頁的 MasterPage，最上方的登入資訊列（Logo 圖、登入資訊、右上角使用者選單）、左側系統功能選單和圖中橘色部分的抬頭顯示區都是它的管轄範圍。圖中紅色的部分為提供給各個網頁用的 ContentPlaceHolder。
（所有設定頁的 MasterPage 為 MasterConfig.master）
2. wucHeadUpDisplay.ascx 抬頭顯示區控制項
圖中橘色的部分為抬頭顯示區 (Head Up Display，簡稱 HUD)，由使用者控制項 wucHeadUpDisplay.ascx 負責繪製。
wucHaedUpDisplay.ascx 提供的功能如下：
- 提供更改足跡區（圖中的 "首頁 / 帳號管理"）內容的功能
- 提供更改單元標題與圖示的功能
- 提供調整共用的大型系統按鈕（回上層、新增、修改、檢視、預覽）的功能，例如：設定指定按鈕隱藏或顯示、設定指定按鈕按下後要執行的 js 或是要開啟的 URL。
3. 套用 MasterPage 的網頁
圖中紅色的部分為套用 MasterPage 的網頁需繪製的部分，以帳號清單頁為例，搜尋條件區、帳號清單與分頁控制就是它需負責的部分。另外，除了 MasterPage 載入的 js, css ，若有其他 js, css 是只有這個網頁才需要，就在這個網頁中載入。
帳號清單頁還需使用其專屬的管理頁共用元件 AccountCommonOfBackend 來取得「帳號管理」相關的 QueryString 參數值、Session 裡的登入資訊和「帳號管理」對應的作業選項代碼。再透過帳號與權限元件判斷權限以及存取帳號資料。
4. wucDataPager.ascx 分頁控制項
為圖中綠色的部分，負責繪製分頁控制區以及提供更改要繪製的頁碼範圍功能（總數幾項？一頁最多呈現幾項？頁碼區最多呈現幾個頁碼？按下頁碼時要跳轉的 URL）給呼叫者端（各網頁）。
5. 管理頁共用元件
本項目畫面上看不到，屬於邏輯層元件。
以帳號清單頁為例，使用「帳號管理」專屬的管理頁共用元件 AccountCommonOfBackend。管理頁共用元件繼承自後台網頁共用元件 BackendPageCommon 並且提供下列功能，
- 提供取得共用的 QueryString 參數
- 提供查詢使用者是否已驗證
- 提供取得作業選項代碼
- 提供存取 Session 裡的登入資訊
- 展開選單到指定的功能項目
- 排序相關功能（依照排序條件輪換規則取得下一個條件、依照排序條件在呈現欄位標題時增加向上或向下的箭頭符號）
- 提供使用 log4net 記錄資訊
6. 帳號與權限元件 EmployeeAuthorityLogic
本項目畫面上看不到，屬於邏輯層元件。
主要提供權限判斷結果與帳號資料的存取，詳細說明請參考 帳號與權限系統元件說明：元件提供的功能與使用方式 。
下圖以 Account-List 共用元件繪製 UI 循序圖 說明上述元件的關聯，
 |
| Account-List 共用元件繪製 UI 循序圖 |
- 進入 Account-List.aspx 的 Page_PreInit()
- 建立與初始化管理頁共用元件 AccountCommonOfBackend
- 利用 AccountCommonOfBackend 展開選單到目前頁面的功能項目 (執行 js )
- 建立與初始化帳號與權限元件 EmployeeAuthorityLogic
- 從 MasterMain 取得用來控制抬頭顯示區（HUD）的介面 IHeadUpDisplay
- 得到介面 IHeadUpDisplay
- 進入 MasterMain 的 Page_Init()
- 初始化相關物件 (MasterMain 內部有使用 BackendPageCommon, ArticlePublisherLogic, EmployeeAuthorityLogic 存取資料)
- 進入 Account-List.aspx 的 Page_Init()
- 初始化分頁控制項
- 進入 Account-List.aspx 的 Page_Load()
- 從 AccountCommonOfBackend 取得對應本頁面的作業選項代碼 OpId
- 得到作業選項代碼
- 利用介面 IHeadUpDisplay，依照作業選項代碼繪製 HUD 的足跡區和標題
- 利用帳號與權限元件，確認使用者可否檢視本頁面
- 繪製本頁面內容
- 利用帳號與權限元件，確認使用者可否新增子項目（帳號資料）
- 利用帳號與權限元件，取得帳號清單
- 繪製帳號清單
- 利用帳號與權限元件，確認使用者可否編輯或刪除子項目（帳號資料）
- 進入 MasterMain 的 Page_Load()
- 確認登入資訊是否還在（若登入資訊已遺失則強制執行登出並回到登入頁）
- 繪製上方資訊列與左側系統選單的內容
沒有留言:
張貼留言