SampleCMS 網頁共用元件說明：前台相關元件分工說明

在說明完 後台相關元件分工說明 之後，繼續說明前台相關元件。
接下來以通用的多功能網頁程式 Article.aspx 為例說明前台相關元件以及各項的分工，包含 網頁共用元件說明：簡介 提到的前台網頁共用元件 FrontendPageCommon。

Article.aspx 網頁畫面

上圖為 Article.aspx 網頁畫面，下列先從畫面上看得到的部分開始說明。

1. MasterArticle.master
MasterPage 主要功能就是作為 UI 的框架，負責載入共用的 js, css 以及繪製所有網頁都需要的 HTML 元素，並且在畫面上挖出常變動的區塊 (ContentPlaceHolder) 提供給各個網頁自行繪製。

圖中黃色的部分，MasterArticle.master 為所有前台網頁的 MasterPage，負責繪製上方橫幅區（網站名稱、單元區的清單、網頁標題）、足跡區、搜尋條件區、下方的回上層鈕以及頁尾資訊區。另外，網頁的附件清單、照片清單、影片清單也交由 MasterArticle 繪製。圖中紅色的部分為提供給各個網頁用的 ContentPlaceHolder。

MasterArticle.master 透過介面 IMasterArticleSettings 開放功能給套用此 MasterPage 的網頁來調整要繪製的內容，例如：是否要顯示回上一層的按鈕、自訂網頁標題名稱、自訂足跡區內容。

2. 套用 MasterPage 的網頁
圖中紅色的部分為套用 MasterPage 的網頁需繪製的部分，以 Article.aspx 為例，子項目清單與分頁控制、呈現管理者在後台儲存的 HTML 網頁內容、載入指定的版型控制項來繪製網頁內容，這些都是它需負責的部分。

前台相關元件關聯圖

3. 前台網頁共用元件 FrontendPageCommon
本項目在 Article.aspx 網頁畫面上看不到，屬於邏輯層元件，請參考上方前台相關元件關聯圖（在圖中左側）。
前台網頁共用元件 FrontendPageCommon 提供下列功能，

• 提供取得共用的 QueryString 參數
• 取得直接開啟或是在預覽模式的網頁代碼與網頁資料
• 暫存網頁資料
• 提供使用 log4net 記錄資訊

4. 前台網頁基底類別 FrontendBasePage
本項目在 Article.aspx 網頁畫面上看不到，屬於邏輯層元件，請參考上方前台相關元件關聯圖（在圖中右側）。
FrontendBasePage 負責將前台網頁共用元件暫存的網頁資料（儲存在 ArticleData 物件中）提供給 MasterArticle 取得。

5. 網頁內容發佈元件 ArticlePublisherLogic
本項目在 Article.aspx 網頁畫面上看不到，屬於邏輯層元件，請參考上方前台相關元件關聯圖（在圖中下方中央）。
主要提供網頁資料的存取。詳細說明請參考 網頁內容發佈系統元件說明：元件提供的功能與使用方式。

下圖以 Article.aspx 共用元件繪製 UI 循序圖 說明上述元件的關聯，

Article.aspx 共用元件繪製 UI 循序圖

1. 進入 Article.aspx 的 Page_PreInit()
2. 建立與初始化前台網頁共用元件 FrontendPageCommon
3. 利用 FrontendPageCommon 取得直接開啟或是在預覽模式的網頁代碼與網頁資料
4. FrontendPageCommon 依照網址參數 preview, alias, artid 取得網頁代碼
5. FrontendPageCommon 利用網頁內容發佈元件取得網頁代碼對應的網頁資料
6. FrontendPageCommon 把網頁資料暫存在 ArticleData 物件
7. Article.aspx 從 FrontendPageCommon 取得暫存網頁資料的 ArticleData 物件
8. Article.aspx 透過介面 IMasterArticleSettings 設定要顯示回上層鈕、設定回上層鈕點選時的動作
9. 進入 MasterArticle 的 Page_Init()
10. 建立與初始化前台網頁共用元件 FrontendPageCommon
11. MasterArticle 從 Article.aspx 取得暫存網頁資料的 ArticleData 物件（利用 FrontendBasePage 的 GetArticleData()）
12. 進入 Article.aspx 的 Page_Init()
13. 初始化分頁控制項
14. 進入 Article.aspx 的 Page_Load()，依照 articleData.ShowTypeId 呈現網頁內容
15. 若 articleData.ShowTypeId = 1，利用網頁內容發佈元件取得子網頁清單資料
16. 若 articleData.ShowTypeId = 1，呈現網頁內文與子網頁清單
17. 若 articleData.ShowTypeId = 2，利用網頁內容發佈元件取得第一個子網頁資料
18. 若 articleData.ShowTypeId = 2，通知瀏覽器跳轉至第一個子網頁
19. 若 articleData.ShowTypeId = 3，通知瀏覽器跳轉至指定的 URL
20. 若 articleData.ShowTypeId = 4，載入指定的版型控制項來繪製網頁內容
21. 進入 MasterArticle 的 Page_Load()
22. 利用網頁內容發佈元件取得單元區選單資料
23. 繪製上方橫幅區與單元區選單
24. 顯示網頁標題
25. 利用網頁內容發佈元件取得相關附件、照片、影片資料
26. 顯示附件清單、照片清單、影片清單

---

在客製化網頁程式之中，使用的前台網頁共用元件需要從原本的 FrontendPageCommon 改為使用 OtherArticlePageCommon。

OtherArticlePageCommon 繼承自 FrontendPageCommon，主要功能為改寫原本功能「依照網址參數 preview, alias, artid 取得網頁代碼」，改寫為下列兩項：

1. 依照 URL 取得網頁代碼。例如在開啟 Sitemap.aspx 不需要指定參數 artid，因為 OtherArticlePageCommon 會依照 URL "~/Sitemap.aspx" 到資料庫取回對應的 artid 值。
   　
2. 使用客製化網頁程式指定的代碼。例如在開啟 Index.aspx 不需要指定參數 artid，因為在程式碼中指定 artid 固定為 "00000000-0000-0000-0000-000000000000"。

下圖以 Index.aspx 共用元件繪製 UI 循序圖 說明在客製化網頁程式的時候，共用元件的關聯，

Index.aspx 共用元件繪製 UI 循序圖

(* 藍字的部分表示與通用的多功能網頁程式 Article.aspx 的差別)

1. 進入 Index.aspx 的 Page_PreInit()
2. 建立與初始化前台網頁共用元件 OtherArticlePageCommon 
3. 利用 OtherArticlePageCommon 取得直接開啟或是在預覽模式的網頁代碼與網頁資料
4. OtherArticlePageCommon 依照 URL 取得網頁代碼，或使用客製化網頁程式指定的代碼
5. OtherArticlePageCommon 利用網頁內容發佈元件取得 URL 對應的網頁代碼
6. OtherArticlePageCommon 利用網頁內容發佈元件取得網頁代碼對應的網頁資料
7. OtherArticlePageCommon 把網頁資料暫存在 ArticleData 物件
8. Index.aspx 從 OtherArticlePageCommon 取得暫存網頁資料的 ArticleData 物件
9. 進入 MasterArticle 的 Page_Init()
10. 建立與初始化前台網頁共用元件 FrontendPageCommon
11. MasterArticle 從 Index.aspx 取得暫存網頁資料的 ArticleData 物件（利用 FrontendBasePage 的 GetArticleData()）
12. 進入 Index.aspx 的 Page_Load()
13. 呈現客製化網頁程式繪製的內容
14. 進入 MasterArticle 的 Page_Load()
15. 利用網頁內容發佈元件取得單元區選單資料
16. 繪製上方橫幅區與單元區選單
17. 顯示網頁標題
18. 利用網頁內容發佈元件取得相關附件、照片、影片資料
19. 顯示附件清單、照片清單、影片清單

- 回目錄 -