Web Application 開 發 利 器 - WebSnap（四）

Web Application 開 發 利 器 - WebSnap!

第 四 章 、 進 階 資 料 庫 網 頁 設 計

  

  在 上 一 節 我 們 討 論 了 基 本 資 料 庫 網 頁 的 設 計 ， 及 一 些 Dispatcher 的 技 巧 ， 接 著 就 讓 我 們 進 一 步 設 計 一 個 Master-Detail 的 網 頁 。 

 

4-1 Master-Detail 資 料 庫 網 頁

 

運 用 WebSnap 來 設 計 這 類 型 網 頁 是 相 當 簡 單 的 ， 首 先 請 你 在 Web DataModule 加 入 兩 個 Table: orders 、 items ， 接 著 設 定 她 們 的 Master-Detail 資 訊 。 完 成 後 我 們 還 要 加 入 兩 個 DataSetAdapter ， 分 別 連 結 兩 個 Table ， 你 可 以 在 TDataSetAdapter 特 性 值 中 看 到 一 個 MasterAdapter 特 性 ， 這 跟 MasterSource 的 意 義 相 同 ， 只 是 對 象 是 Adapter 。 設 定 完 成 後 你 就 可 以 開 始 設 計 新 的 網 頁 了 ， 請 加 入 一 個 Page Module 到 專 案 中 ， 將 PageName 設 成 MasterDetailEdit 及 uses DataModule ， 接 著 開 啟 Visual Page Designer 來 設 計 網 頁 ， 接 著 照 順 序 加 入 以 下 的 元 件 :

 

 

然 後 我 們 再 依 次 來 設 定 這 些 元 件 的 特 性 值 。 請 點 選 LayoutGroup1 元 件 ， 你 可 以 看 到 她 有 一 個 DisplayColumns 特 性 值 ， 預 設 值 是 -1 ， 這 個 特 性 值 是 控 制 這 個 LayoutGroup 有 幾 個 Columns 。 簡 單 的 說 ， LayoutGroup 是 一 個 Table ， 你 可 以 利 用 這 個 特 性 值 來 設 定 這 個 Table 有 幾 個 Column ， 請 你 將 LayoutGroup1.DisplayColumns 設 成 2 。

 

 

接 下 來 我 們 要 訂 制 化 LayoutGroup2 的 顯 示 樣 式 ， 請 在 她 的 Custom 特 性 值 中 輸 入 以 下 的 值 ， 這 會 使 LayoutGroup2 顯 示 成 一 個 單 框 的 Table:

 

border="1" bgcolor=#A5D7EF

 

然 後 我 們 開 始 設 定 LayoutGroup2 下 的 FieldGroup 以 及 CommandGroup 元 件 的 特 性 值 ， 首 先 是 FieldGroup1 ， 請 將 她 的 Adapter 特 性 值 設 成 Orders DataSetAdapter ， 由 於 我 們 希 望 Group 中 的 文 字 與 控 制 項 向 左 靠 齊 ， 所 以 也 請 你 設 定 她 的 Custom 特 性 值 為 align="left" 。

接 著 加 入 所 有 的 欄 位 :

 

  

最 後 只 需 將 CommandGroup1 的 DisplayComponents 特 性 值 設 成 FieldGroup1 並 加 入 New,Delete,Prev,Next,Apply,Refresh 這 五 個 按 紐 就 完 成 了 Master Form 的 設 計 了 。 完 成 後 我 們 開 始 設 定 Detail Form ， 請 你 照 著 圖 設 定 Grid1 的 幾 個 特 性 值 :

 

  

TableAttributes 特 性 值 是 用 來 設 定 整 個 Grid 的 顯 示 方 式 ， HeaderAttributes 及 RowAttributes 分 別 是 控 制 標 題 及 每 一 列 的 顯 示 方 式 。 這 裡 我 使 用 了 Custom 特 性 來 訂 製 化 Grid1 的 顯 示 樣 式 ， 實 際 作 業 時 你 可 以 選 擇 使 用 CSS 會 比 較 有 彈 性 。 我 希 望 能 讓 使 用 者 可 以 在 這 個 Grid 中 編 修 Detail 資 料 ， 因 此 我 們 必 須 使 用 TAdapterEditColumn 來 取 代 預 設 的 TAdapterDisplayColumn:

 

 

請 分 別 將 TAdapterEditColumn 的 FieldName 特 性 值 設 定 為 ItemNo,PartNo,Qty, Discount 四 個 欄 位 ， 接 著 請 在 CommandColumn1 中 加 入 Apply 及 Delete 兩 個 按 紐 :

 

 

然 後 將 CommandGroup2 的 DisplayComponent 特 性 值 設 為 AdapterGrid1 ， 並 在 裡 面 加 入 一 個 NewRow 按 紐 ， 將 她 的 PageName 設 成 NewDetail( 我 們 下 一 個 要 設 定 的 新 增 資 料 網 頁 ) ， 如 果 沒 有 錯 誤 的 話 你 應 該 可 以 看 到 下 面 這 個 網 頁 畫 面 :

 

 

接 下 來 我 們 要 新 增 一 個 Page Module 到 專 案 中 ， 這 個 Page 的 目 的 就 是 在 使 用 者 按 下 Detail Form 中 的 新 增 按 紐 後 ， 將 使 用 者 轉 到 這 個 網 頁 中 進 行 新 增 Detail 資 料 的 動 作 。 請 將 Page Name 設 成 NewDetail ， 接 著 uses DataModule 後 開 啟 Visual Page Designer 視 窗 ， 並 加 入 以 下 的 元 件 :

 

 

完 成 後 接 著 設 定 LayoutGroup1 的 Custom 特 性 值 為 : border="1" 這 可 以 使 這 個 LayoutGroup 擁 有 單 框 的 顯 示 樣 式 。 然 後 設 定 AdapterFieldGroup1 的 Adapter 特 性 值 為 Orders DataSetAdapter 並 且 在 裡 面 加 入 OrderNo 及 CustNo 兩 個 Field ， 並 將 她 們 的 ViewMode 設 成 vmDisplay ， 這 會 使 這 兩 個 Field 顯 示 成 文 字 狀 態 ， 且 不 會 受 AdapterMode 的 特 性 值 所 影 響 。

  

 

然 後 設 定 FieldGroup2 的 Adapter 特 性 值 為 Items Adapter ， 並 在 裡 面 加 入 ItemNo,PartNo,Qty, Discount 這 四 個 欄 位 :

 

 

最 後 設 定 CommandGroup1 的 DisplayComponent 特 性 值 為 AdapterFieldGroup2 ， 並 在 裡 面 加 入 Apply 、 Cancel 兩 個 按 紐 。 我 們 希 望 使 用 者 在 按 下 按 紐 後 回 到 MasterDetailEdit 網 頁 中 ， 因 此 請 設 定 她 們 的 PageName 為 MasterDetailEdit:

 

 

沒 有 錯 誤 的 話 你 會 看 到 以 下 的 網 頁 :

 

 

OK! 我 們 完 成 了 這 個 網 頁 了 ， 接 著 你 可 以 執 行 她 來 看 看 成 果 。 操 作 這 個 網 頁 有 一 個 小 地 方 要 注 意 ， 們 並 未 處 理 Detail 中 的 ItemNo 與 PartNo 欄 位 ， ItemNo 與 OrderNo 是 一 個 複 合 主 鍵 ， PartNo 則 必 須 是 PartNo Table 的 其 中 一 筆 資 料 ， 要 處 理 這 兩 個 欄 位 不 難 ， 只 要 運 用 DataSet 的 事 件 及 TDataSetValueList 元 件 就 可 以 解 決 了 ， 相 信 這 難 不 倒 你 。

  

4-2 、 控 制 交 易

 

  我 們 在 這 個 網 頁 中 允 許 使 用 者 更 新 一 筆 以 上 的 Detail 資 料 ， 這 也 帶 來 了 問 題 ， 當 使 用 者 更 新 了 兩 筆 資 料 時 ， 如 果 其 中 的 一 筆 資 料 更 新 失 敗 了 ， 那 另 一 筆 資 料 還 是 會 存 回 資 料 庫 中 ， 這 在 某 些 情 況 下 是 不 被 允 許 的 ， 因 此 我 們 必 須 使 用 資 料 庫 的 交 易 控 制 功 能 來 解 決 這 個 問 題 ， 那 該 把 交 易 控 制 寫 在 那 裡 呢 ? 最 佳 的 控 制 位 置 是 在 Apply Action 的 BeforeExecute 及 AfterExecute 事 件 中 ， 我 們 可 以 在 BeforeExecute 中 啟 動 交 易 控 制 ， 在 AfterExecute 中 確 認 是 否 可 以 寫 入 資 料 庫 ， 請 看 以 下 的 片 段 程 式 碼 :

 

procedure TwdmData.ActionApply3BeforeExecute(Sender: TObject;   Params: TStrings; var Handled: Boolean); begin   //transaction support   Database1.StartTransaction; end;   procedure TwdmData.ActionApply3AfterExecute(Sender: TObject;          Params: TStrings); begin     //transaction support     if dsAdaptItems.Errors.ErrorCount > 0 then         Database1.Rollback     else Database1.Commit; end;

 

由 於 我 們 使 用 的 是 PARADOX 的 資 料 庫 ， 所 以 使 用 交 易 前 你 得 先 將 TDatabase.TransIsolation 特 性 值 設 成 tiDirtyRead 。

  

本 章 後 記

 

  這 一 章 中 我 們 學 到 了 如 何 利 用 Layout 來 排 列 網 頁 上 的 元 件 ， 並 使 用 Custom 特 性 來 訂 製 網 頁 的 外 觀 ， 最 重 要 的 是 我 們 學 到 了 處 理 Master-Detail 資 料 庫 的 技 巧 ， 在 執 行 這 個 程 式 的 過 程 中 你 一 定 會 遇 到 許 多 的 例 外 ， 最 常 見 的 大 概 是 Variant 轉 換 的 錯 誤 ， 在 WebSnap 中 這 些 錯 誤 都 被 完 整 的 處 理 了 ， 因 此 你 可 以 不 必 擔 心 。

 

<第 五 章 、 使 用 者 管 理 及 Sessions>