Web Application 開 發 利 器 - WebSnap（十一）

Web Application 開 發 利 器 - WebSnap!

第 十 一 章 、 ImageButtonProducer 應 用

 

   在 WebSnap 的 範 例 中 ， 有 幾 個 元 件 對 我 們 來 說 相 當 有 用 ， 其 中 一 個 就 是 ImageButtonProducer ， 她 可 以 讓 我 們 以 圖 形 按 紐 的 方 式 來 取 代 呆 板 的 預 設 按 紐 ， 這 可 是 會 使 你 的 網 頁 看 起 來 更 有 價 值 多 了 ， 當 然 ! 我 們 得 拿 些 許 的 效 率 去 換 ， 要 使 用 她 之 前 ， 我 們 得 先 把 她 裝 起 來 才 行 ， 請 你 開 啟 以 下 這 個 Package:

 Borland/Delphi6/Demos/WebSnap/ImgBtnProducer/DclImgBtnProducer 

 

接 著 你 會 看 到 以 下 的 視 窗 :

 

 

最 後 按 下 Install 按 紐 就 可 以 安 裝 這 個 元 件 了 ， 完 成 後 你 應 該 可 以 在 Component Palette 最 末 頁 裡 看 到 這 個 元 件 :

 

 

使 用 她 的 方 式 很 簡 單 ， 請 開 啟 一 個 新 的 專 案 ( 由 這 一 章 開 始 ， 我 們 將 使 用 另 一 個 範 例 程 式 ):

 

 

請 你 選 擇 AdapterPageProducer ， 這 可 以 讓 我 們 很 方 便 的 製 作 出 圖 形 導 覽 按 紐 列 ， 接 著 請 你 將 Template 選 項 改 成 Blank ， 因 為 我 們 不 想 使 用 原 來 的 制 式 範 本 ( 她 很 醜 ...):

 

 

這 次 我 們 所 建 立 是 一 個 完 整 的 網 頁 ， 當 然 我 們 得 加 入 所 有 網 頁 該 有 的 功 能 ， 請 你 將 Components 內 所 有 的 元 件 都 勾 選 起 來 :

 

 

整 個 Application Page Module 看 起 來 就 像 下 圖 一 樣 :

 

 

接 著 我 們 搭 個 便 車 ， 使 用 ApplicationAdapter 來 存 放 一 些 元 件 ， 首 先 我 們 加 入 一 個 可 以 回 到 首 頁 的 Action:

 

 

接 著 在 Action.OnExecute 事 件 中 加 入 以 下 的 程 式 碼 :

 

uses WebReq, WebCntxt, WebFact, Variants,SiteComp; … … … … … … … … … … … … … … … procedure THome.atHomeExecute(Sender: TObject; Params: TStrings); begin   DispatchPageName('Home',Response,[dpPublished]); end;

 

認 真 的 你 應 該 會 問 ， 我 們 不 是 可 以 在 Visual Page Designer 中 以 設 定 PageName 的 方 式 來 導 向 嗎 ? 這 樣 就 不 用 寫 程 式 了 不 是 嗎 ? 呵 ， 請 想 想 ! 如 果 我 們 有 10 個 網 頁 ， 這 10 個 網 頁 中 都 需 要 這 個 按 紐 ， 那 你 得 設 幾 次 呢 ? 寫 在 這 裡 只 需 設 一 次 就 可 以 了 ， 很 方 便 ! 回 到 程 式 中 ， 我 們 開 啟 Visual Page Designer 來 設 計 一 下 我 們 的 首 頁 ， 目 前 我 們 的 目 的 只 是 要 加 入 一 個 導 覽 列 ， 這 可 以 利 用 FieldGroup+CommandGroup 來 達 成 :  

 

哦 ! 我 們 要 一 個 空 的 網 頁 ， 不 要 這 個 Title Field ， 請 將 AddDefaultFields 特 性 值 設 成 False ， 讓 她 還 給 我 們 一 個 乾 淨 的 網 頁 ， 接 著 請 在 AdapterForm1 中 再 加 入 一 個 AdapterCommandGroup 元 件 :

 

 

然 後 將 她 的 DisplayComponent 特 性 設 為 AdapterFieldGroup1 。

 

 

很 好 ! 那 個 呆 板 又 難 看 的 按 紐 出 現 了 :

 

 

嘿 ! 我 們 可 不 想 要 這 個 ， 請 你 回 到 Page Module 中 ， 將 ImageButtonProducer 元 件 放 入 Page Module 中 ， 接 著 回 到 Visual Page Designer 在 AdapterCommandGroup1 右 方 按 右 鍵 ， 將 我 們 的 Home Action 加 進 去 :  

 

然 後 我 們 將 CmdHomeAction 的 ImageProducer 特 性 設 為 ImageButtonProducer1 就 完 成 了 。

 

 

 

當 然 我 們 不 可 能 這 樣 就 滿 足 了 ， 首 先 她 的 顏 色 還 是 有 點 醜 ， 我 們 可 以 調 整 ImageButtonProducer 中 的 特 性 值 來 美 化 她 :  

 

嗯 ! 看 起 來 專 業 多 了 ， 執 行 這 個 程 式 用 瀏 覽 器 來 看 看 吧 。

 

 

圖 形 並 沒 有 正 常 顯 示 ? 我 們 看 看 圖 形 的 連 接 出 了 什 麼 問 題 ， 在 圖 形 上 按 右 鍵 選 擇 內 容 :

 

 

原 來 多 了 個 / ， 看 來 是 ImageButtonProducer 元 件 的 問 題 ， 我 們 回 到 DELPHI 中 ， 重 新 調 整 一 下 ImageButtonProducer 的 特 性 值 ， 首 先 我 們 必 須 在 這 個 專 案 的 目 錄 下 建 立 一 個 Images 目 錄 ， 這 是 用 來 讓 ImageButtonProducer 元 件 產 生 圖 形 暫 存 檔 用 ， 接 著 設 定 ImageButtonProducer.CacheDir 特 性 值 為 Images ， 同 時 調 整 她 的 VirtualDir 特 性 值 為 Images 。

 

 

由 於 我 們 是 使 用 WebAppDebuger 模 式 ， 因 此 我 們 還 必 須 調 整 她 的 Search Path 設 定 ， 加 入 我 們 新 建 的 Images 目 錄 ， 這 樣 她 才 能 正 確 的 找 到 圖 形 : 

 

重 新 執 行 程 式 後 ， 你 應 該 可 以 正 常 的 看 到 圖 形 按 紐 了 。  

嘿 ! 不 只 是 漂 漂 亮 亮 的 圖 形 按 紐 ， 還 有 ToolTip 顯 示 哦 ， 雖 然 如 此 ! 整 體 看 起 來 還 是 單 調 了 些 ， 我 們 加 上 個 Title Image 好 了 ， 這 樣 看 起 來 較 美 觀 些 ， 我 們 開 啟 ApplicationAdapter 的 Fields Designer 視 窗 ， 加 入 一 個 AdapterImageField:  

 

接 著 設 定 她 的 HREF 特 性 值 為 要 顯 示 的 圖 形 URL 。

 

 

最 後 開 啟 Visual Page Designer ， 新 增 這 個 Field 到 AdapterFieldGroup1 中 。

 

 

預 設 會 出 現 編 輯 的 畫 面 ， 我 們 將 她 的 ViewModule 設 定 為 vmDisplay 。  

 

是 不 是 覺 得 TitleImage 這 段 字 很 礙 眼 ? 請 你 在 她 的 Caption 特 性 值 中 填 入 一 個 空 白 來 取 代 原 先 的 TitleImage 字 串 ( 目 前 一 定 要 有 一 個 字 元 才 行 ) 。  

 

在 Designer 模 式 下 ， 我 們 看 不 到 實 際 的 圖 形 顯 示 ， 這 是 因 為 Designer 時 所 使 用 的 路 徑 是 絕 對 路 徑 ， 而 我 們 所 設 的 是 URL 的 關 係 ， 請 你 執 行 程 式 後 以 IE 來 瀏 覽 。  

 

看 起 來 還 算 不 錯 ， 至 少 以 一 個 只 寫 幾 行 程 式 的 Web Application 來 說 算 很 好 了 ， 接 下 來 我 們 要 加 上 一 些 資 料 庫 的 功 能 ， 首 先 請 你 新 增 一 個 WebDataModule 到 這 個 專 案 中 ， 我 們 需 要 一 個 Table: BCDEMOS 中 的 Orders 資 料 表 。

 

 

使 用 BDE 開 發 Web Application 時 需 注 意 一 件 事 ， 那 就 是 一 定 得 使 用 Session ， 而 且 要 把 AutoSessionName 設 為 True ， 否 則 無 法 適 用 於 Web 多 使 用 者 的 情 況 ， 接 著 我 們 要 加 入 一 個 TQuery ， 這 個 Query 的 作 用 是 取 出 Orders 中 的 所 有 Paymethod 欄 位 ， 並 以 她 作 Group 後 取 出 Paymethod 列 表 ， 我 們 會 在 下 面 用 到 她 。

 

 

然 後 我 們 加 入 DataSetAdapter 元 件 ， 連 結 到 我 們 的 Orders Table 。

 

 

接 下 來 我 們 還 得 新 增 一 個 Page Module ， 這 是 用 來 顯 示 一 個 Orders 列 表 的 網 頁 ， 我 們 希 望 可 以 讓 使 用 者 選 擇 一 個 PayMethod 後 ， 導 向 另 一 個 網 頁 ， 在 那 個 網 頁 中 列 出 所 有 符 合 該 PayMethod 的 資 料 ， 因 此 我 們 必 須 加 入 一 個 TAdapter 到 這 個 新 增 的 Page Module 中 ， 同 時 我 們 也 得 加 入 一 個 DataSetValueList 元 件 ， 這 是 用 來 顯 示 經 過 Group 命 令 後 的 Query 。 

 

然 後 我 們 分 別 設 定 dsvlPayMethodList 的 DataSet 為 qyPayMethodList 。 ( 你 必 須 先 uses dmData 這 個 單 元 ) 

 

請 開 啟 Adapter1 的 Fields Designer ， 加 入 一 個 AdapterField 。 

 

再 開 啟 Adapter1 的 Action Designer ， 加 入 一 個 AdapterAction 。

 

 

當 使 用 者 執 行 這 個 Action 時 ， 我 們 要 將 他 導 向 於 一 個 以 PayMethod 過 濾 資 料 的 網 頁 ， 因 此 我 們 必 須 撰 寫 她 的 OnExecute 事 件 :

 

procedure TGrid.AdaptGoFilterExecute(Sender: TObject; Params: TStrings); var   AParams:TStringList; begin   AParams:=TStringList.Create;   AParams.Add('FilterValue='+AdaptSelectFilter.ActionValue.Values[0]);   RedirectToPageName('FilterGrid',AParams,Response,[dpPublished]); end;

 

FilterGrid 是 我 們 用 來 顯 示 過 濾 結 果 的 網 頁 名 稱 ， 稍 後 我 們 再 製 作 這 個 網 頁 ， 現 在 讓 我 們 先 設 計 一 下 這 個 Grid 顯 示 方 式 ， 首 先 我 們 加 入 CSS 程 式 碼 ， 這 可 以 讓 我 們 訂 制 我 們 的 Grid 樣 式 :

 

.GridTable {     WIDTH: 100%;     BACKGROUND-COLOR: #8BAADC;     BORDER: 1px SOLID #003388; }   .GridHeader {     FONT-WEIGHT: normal;     FONT-SIZE: 9pt;     COLOR: #FFFFFF;     BACKGROUND-COLOR: #60A7DB;     FONT-FAMILY: Arial, Helvetica, SansSerif;     TEXT-DECORATION: none; }   .GridRow140 {     FONT-FAMILY: Arial, Helvetica, SansSerif;     FONT-WEIGHT: normal;     FONT-SIZE: 9pt;     COLOR: #003388;     BACKGROUND-COLOR: #D6DBB9;     WIDTH=150; }   .GridRow {     FONT-FAMILY: Arial, Helvetica, SansSerif;     FONT-WEIGHT: normal;     FONT-SIZE: 9pt;     WIDTH: 100%;     COLOR: #003388;     BACKGROUND-COLOR: #D6DBB9; }   .GridRowFixed {     FONT-FAMILY: Arial, Helvetica, SansSerif;     FONT-WEIGHT: normal;     FONT-SIZE: 9pt;     WIDTH: 100%;     COLOR: #FFFFFF;     BACKGROUND-COLOR: #003366; }

 

完 成 後 請 開 啟 Visual Page Designer ， 並 在 裡 面 加 入 三 個 AdapterForm 。

 

 

首 先 我 們 先 設 定 網 頁 標 題 的 圖 形 與 導 覽 列 ， 我 們 必 須 使 用 到 Home Module 中 的 ApplicationAdapter 元 件 ， 所 以 記 得 要 uses 她 ， 完 成 後 在 AdapterForm1 上 按 右 鍵 加 入 一 個 AdapterFieldGroup 及 一 個 AdapterCommandGroup ， 設 定 AdapterCommandGroup.DisplayComponent 為 AdapterFieldGroup ， 接 著 設 定 AdapterFieldGroup 的 Adapter 為 Home.ApplicationAdapter ， 其 它 的 設 定 就 按 照 我 們 設 定 首 頁 的 方 法 設 定 即 可 :

 

 

完 成 後 我 們 繼 續 設 定 AdapterForm3 ， 請 加 入 一 個 AdapterLayout ， 並 設 定 她 的 DisplayColumns 為 2 ， 這 可 以 讓 我 們 以 一 列 的 方 式 顯 示 選 擇 PayMethod ComboBox 及 確 定 的 按 紐 ， 接 著 在 她 上 面 按 右 鍵 選 擇 新 增 一 個 AdapterFieldGroup 與 一 個 AdapterCommandGroup ， 並 將 AdapterCommandGroup2.DisplayComponent 設 為 AdapterFieldGroup2:  

 

然 後 將 AdapterFieldGroup2 的 Adapter 特 性 設 為 Adapter1 。

 

 

接 著 在 AdapterForm2 中 加 入 一 個 AdapterGrid ， 並 將 她 的 Adapter 設 為 dmData.dsaOrders ， 我 們 只 需 要 一 些 簡 要 的 欄 位 ， 因 此 請 在 AdapterGrid 上 按 右 鍵 ， 選 擇 Add Columns ， 並 照 下 圖 選 取 需 要 的 欄 位 : 

 

完 成 後 我 們 要 設 定 AdapterGrid 的 HeaderAttributes,RowAttributes,TableAttributes 中 的 StyleRule 特 性 ， 來 改 變 Grid 的 顯 示 樣 式 。

 

 

沒 問 題 的 話 ， 你 應 該 可 以 看 到 以 下 的 畫 面 :

 

 

這 個 Grid 目 前 是 顯 示 全 部 的 資 料 ， 我 們 可 以 藉 由 設 定 dsaOrders 中 的 PageSize 來 限 制 一 頁 中 最 多 可 顯 示 的 資 料 筆 數 ， 我 將 它 定 為 25 筆 :

 

 

我 們 還 得 提 供 讓 使 用 者 可 以 切 換 頁 次 的 Action ， 請 回 到 Grid Module 中 ， 開 啟 Visual Page Designer 後 在 AdapterForm2 中 加 入 一 個 AdapterCommandGroup ， 將 AdapterCommandGroup.DisplayComponent 設 為 AdapterGrid1 。

 

 

設 定 好 後 在 AdapterCommandGroup3 上 按 右 鍵 選 擇 Add Commands ， 加 入 PrevPage,GotoPage,NextPage 這 三 個 Action 。

 

 

設 定 PrevPage 的 Caption 為 上 一 頁 ， NextPage 的 Caption 為 下 一 頁 ， 這 樣 就 完 成 了 這 個 網 頁 的 設 計 了 ， 接 著 再 完 成 FilterGrid 網 頁 就 可 以 完 成 整 個 程 式 了 ， 請 新 增 一 個 Page Module ， 在 裡 面 放 入 一 個 TAdapter ， 並 在 裡 面 加 入 一 個 Action:

 

 

接 著 請 開 啟 Visual Page Designer 加 入 兩 個 AdapterForm ， 第 一 個 就 照 我 們 之 前 所 做 的 ， 設 定 標 題 圖 形 及 導 覽 列 ， 第 二 個 就 是 顯 示 一 個 與 Grid Module 中 一 樣 的 Grid ， 記 得 將 Grid Module 中 的 Styles 特 性 值 複 製 到 這 個 Module 中 的 AdapterPageProducer.Styles 中 ， 同 樣 的 我 們 也 加 入 NextPage,GotoPage,PrevPage 到 這 個 網 頁 中 ， 整 個 網 頁 看 起 來 就 像 下 圖 :

 

 

接 著 將 Module.DefaultAction.Adapter 及 Module.DefaultAction.Action 分 別 設 為 Adapter1 及 DefaultFilterAction 。

 

 

並 撰 寫 以 下 的 事 件 :

 

procedure TFilterGrid.AdaptDefaultExecute(Sender: TObject;   Params: TStrings); var   FFilter:string; begin   FFilter:=Params.Values['FilterValue'];   dmData.dsaOrders.DataSet.Filter:='PaymentMethod='''+FFilter+'''';   dmData.dsaOrders.DataSet.Filtered:=True;   dmData.dsaOrders.DataSet.Open; end;   procedure TFilterGrid.WebPageModuleDeactivate(Sender: TObject); begin   dmData.dsaOrders.DataSet.Filtered:=False;   dmData.dsaOrders.DataSet.Filter:=''; end;

 

首 先 我 們 先 解 釋 AdaptDefaultExecute ， 這 是 DefaultAction 的 OnExecute 事 件 ， 我 們 在 這 裡 取 出 Grid 網 頁 所 傳 遞 過 來 的 參 數 ， 利 用 這 個 參 數 來 過 濾 資 料 ， 當 這 個 Module 被 Deactivate 時 ， 我 們 再 把 Filter 取 消 ， 這 樣 Grid 網 頁 才 能 夠 顯 示 所 有 的 資 料 ， 這 就 是 DefaultAction 的 用 法 之 一 ， 當 然 你 也 可 以 選 擇 使 用 OnBeforeDispatchPage 或 是 OnActivate ， 但 這 兩 個 事 件 都 有 缺 點 ， OnBeforeDispatchPage 會 在 每 次 網 頁 輸 出 前 觸 發 ， 也 就 是 說 當 你 使 用 切 換 頁 功 能 時 ， Filter 會 再 觸 發 一 次 ， OnActivate 更 多 ， 因 此 在 這 個 case 中 ， DefaultAction 是 最 佳 的 處 理 位 置 ， 因 為 她 只 觸 發 一 次 。 

 

本 章 後 記

 

  這 一 章 中 我 們 大 幅 度 的 使 用 ImageButtonProducer ， 並 利 用 DefaultAction 來 達 到 Filter 功 能 ， 下 面 的 章 節 我 們 將 持 續 加 強 這 個 程 式 ， 這 一 章 是 複 習 章 ， 我 儘 量 詳 細 的 解 釋 每 一 個 動 作 ， 希 望 你 已 經 熟 悉 了 AdapterPageProducer 及 Adapter ， 和 Visual Page Designer 的 設 計 方 式 。 另 外 有 件 事 要 提 醒 你 ， WebAppDebuger 是 一 個 僅 供 我 們 Debuger 用 的 HTTP Server ， 意 思 是 說 這 個 程 式 功 能 相 當 簡 單 ， 在 某 些 運 作 上 常 會 造 成 不 正 常 的 結 果 ， 像 本 章 的 範 例 就 常 因 為 她 的 運 作 不 正 常 ， 而 產 生 當 機 等 情 形 ， 這 些 問 題 在 你 轉 換 為 ISAPI/CGI 之 後 就 不 會 出 現 了 。 事 實 上 ， 你 可 以 選 擇 其 它 功 能 完 整 的 HTTP Server ， OmniHTTP 是 一 個 不 錯 的 選 擇 。

　

<第 十 二 章 、 DateTime 欄 位 的 拆 解 與 LookupField 、 Postback 技 術>