CSDN博客

img rh

Web Application 開 發 利 器 - WebSnap(十一)

发表于2001/12/9 15:32:00  842人阅读

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 技 術>

0 0

相关博文

我的热门文章

img
取 消
img