返回文章列表
玄貓（BlackCat）

Delphi視覺化繫結與Web服務整合技術

本文探討 Delphi 的視覺化即時繫結技術，示範如何簡化 UI 開發流程，並結合 Web 服務整合，包含 HTTP 請求、REST API 及 SOAP Web 服務等實務應用技巧，有效提升 Delphi 應用程式開發效率。

Delphi Web 開發
視覺化繫結 Live Bindings Web 服務 HTTP REST SOAP

Delphi 的視覺化元件函式庫（VCL）和 FireMonkey 框架提供強大的 UI 設計能力。視覺化即時繫結技術能簡化資料繫結流程，無需撰寫大量程式碼即可實作 UI 與資料的同步。同時，現代應用程式開發中與後端服務的整合至關重要，Delphi 提供 HTTPClient 元件、REST API 支援以及雲端 API 框架，方便開發者串接各種 Web 服務。本文將示範如何使用 TNetHTTPClient 元件傳送 HTTP 請求、處理回應，以及非同步請求的實作方式，並探討 SOAP Web 服務的整合流程。

在 Delphi 中，視覺化即時繫結技術允許開發者以拖曳的方式連線 UI 控制項和資料模型，實作資料的雙向同步。例如，可以將 TEdit 元件的 Text 屬性與 TLabel 元件的 Text 屬性繫結，當 TEdit 的文字改變時，TLabel 的文字也會自動更新。此外，LiveBindings Designer 提供了視覺化的介面，方便開發者管理和設定繫結關係。開發者還可以透過 TPrototypeBindSource 元件快速建立原型，模擬資料並預覽 UI 效果，加速開發流程。

除了視覺化繫結，Delphi 也提供豐富的 Web 服務整合功能。使用 TNetHTTPClient 元件，開發者可以輕鬆地傳送 HTTP 請求，例如 GET、POST、PUT 和 DELETE，並處理伺服器傳回的回應。為了避免 UI 阻塞，可以將 HTTP 請求設定為非同步執行，並在請求完成後更新 UI。Delphi 也支援 SOAP Web 服務，開發者可以使用 WSDL Importer 精靈匯入 WSDL 檔案，並生成相應的 Object Pascal 程式碼，方便地呼叫 Web 服務。

使用視覺化即時繫結（Visual Live Bindings）

Delphi 是市場上眾多開發工具之一，其高效的開發環境得益於快速應用程式開發（RAD）正規化。開發者能夠利用可重複使用的元件，快速組裝成可運作的應用程式。Delphi 的專案開發過程中幾乎沒有原型設計階段，當你正在建構一個應用程式時，它很快就會看起來像最終產品。

大多數應用程式都需要處理資料，我們設計的圖形使用者介面（GUI）通常會顯示來自資料函式庫或雲端服務的資訊。在 Delphi 中，你可以在設計階段預覽資料。

Delphi 中的視覺化框架

Delphi 提供了兩種視覺化框架來建構 GUI。第一種是 Visual Component Library（VCL），它被認為是建構 Windows 原生應用程式的最佳函式庫。第二種是 FireMonkey 多裝置函式庫，用於為所有支援的行動和桌面作業系統建構跨平台 GUI。

  • VCL 具有資料感知控制項的概念，這些控制項可以透過 TDataSource 元件連線到代表資料函式庫查詢、表格或儲存過程的非視覺化資料集元件。
  • FireMonkey 則沒有資料感知控制項的概念。如果你想在 FireMonkey 中快速建構資料驅動的 GUI，可以使用視覺化即時繫結（Visual Live Bindings）。

視覺化即時繫結的強大功能

視覺化即時繫結不僅能將控制項連線到資料，還能用來連線任意兩個物件的屬性。它們是元件本身，不僅限於 FireMonkey，也可以用於 VCL 甚至是控制檯應用程式。

簡單範例：連線表單上的視覺化控制項屬性

  1. 建立新專案：建立一個新的多裝置空白 Delphi 專案，將主表單的單元檔名儲存為 uFormVLB，並將整個專案儲存為 VLBTest。將表單的 Name 屬性更改為 FormVLB，並儲存所有變更。

  2. 新增元件：在表單上放置一個 TEdit 和一個 TLabel 元件。右鍵點選標籤元件，選擇「Bind Visually」選項，這將顯示即時繫結設計器（LiveBindings Designer）視窗。

    在即時繫結設計器中，我們可以視覺化地建立不同屬性之間的即時繫結，使它們能夠自動同步。讓我們連線兩個控制項的 Text 屬性，這樣當編輯框中的文字變更時，標籤中的文字也會自動更新。

  3. 建立繫結：點選 Edit1 控制項的 Text 屬性，並將其拖到另一個你希望連線的屬性上。這將自動在這兩個屬性之間建立繫結，如圖 10.16 所示。

    圖表翻譯： 此圖示展示了 Edit1 的 Text 屬性和 Label1 的 Text 屬性之間的繫結關係。當 Edit1 的 Text 屬性發生變化時，Label1 的 Text 屬性會自動更新。

    注意到一個名為 BindingsList1 的元件已經自動新增到表單中，這是所有繫結的儲存位置。如果雙擊這個元件，可以預覽所有現有的繫結（如圖 10.17 所示），這些繫結只是具有屬性和事件的常規元件，可以使用物件檢視器進行設定。

自訂繫結表示式

  • 選擇 LinkControlToPropertyText 物件，並將其 CustomFormat 屬性設定為 'Hello ' + Text（包括引號）。這是一個由兩個字串（一個常數字串加上來源控制項，即編輯框中的 Text 屬性的值）串聯而成的表示式。

新增事件處理程式

  • 為編輯框的 OnKeyUp 事件新增事件處理程式，以觸發相關控制項的重新整理。我們可以通知即時繫結系統 Edit1 控制項的 Text 屬性已經變更，程式碼如下：
procedure TFormVLB.Edit1KeyUp(Sender: TObject; var Key: Word;
  var KeyChar: Char; Shift: TShiftState);
begin
  BindingsList1.Notify(Edit1, 'Text');
end;

內容解密：

  • TFormVLB.Edit1KeyUp 事件處理程式：此事件在使用者釋放鍵盤按鍵時觸發，主要目的是通知即時繫結系統編輯框的 Text 屬性已經發生變化，從而更新相關控制項。
  • BindingsList1.Notify(Edit1, 'Text')：此行程式碼通知即時繫結系統 Edit1 的 Text 屬性已經變更，使得標籤的文字能夠根據編輯框中的內容即時更新。

使用Live Bindings技術進行快速UI原型設計

在Delphi開發中，Live Bindings技術是一種強大的工具，能夠幫助開發者快速建立資料驅動的使用者介面（UI）。本章節將介紹如何利用Live Bindings技術進行快速UI原型設計，並探討其在實際開發中的應用。

Live Bindings技術簡介

Live Bindings是一種用於連線UI控制項和資料來源的技術，能夠實作資料的即時更新和同步。它允許開發者在不寫或寫很少程式碼的情況下，建立複雜的UI。

使用TPrototypeBindSource進行快速原型設計

TPrototypeBindSource是一種特殊的元件，能夠模擬資料表並生成測試資料。開發者可以利用這個元件快速建立資料驅動的UI原型。

步驟一：建立新專案並新增TPrototypeBindSource元件

  1. 開啟Delphi IDE，重新開啟ToDoList專案，在Project Manager上按右鍵，選擇新增專案。
  2. 建立一個新的資料夾，將新的專案儲存為ToDoTest，主窗體單元儲存為uFormToDoTest。
  3. 將FormToDo上的TListView控制項複製到FormToDoTest上。

步驟二：設定TPrototypeBindSource元件

  1. 將TPrototypeBindSource元件拖曳到FormToDoTest上，並將其Name屬性設定為PrototypeBindSourceToDo。
  2. 雙擊PrototypeBindSourceToDo，新增兩個測試欄位：TestTitle和TestCategory，分別選擇適當的資料產生器。

步驟三：使用LiveBindings Designer連線控制項和資料來源

  1. 開啟LiveBindings Designer，將TListView的Title和Category欄位與PrototypeBindSourceToDo的TestTitle和TestCategory欄位連線起來。
  2. 連線完成後，TListView將立即顯示測試資料。

Live Bindings技術的優勢

Live Bindings技術能夠幫助開發者快速建立資料驅動的UI原型，加速開發流程。它還可以用於建立完整的應用程式，並實作互動式的UI。

範例：Master-Detail範本

Delphi提供了一個Master-Detail範本，展示瞭如何使用Live Bindings技術建立一個完整的應用程式。開發者可以參考這個範本，瞭解Live Bindings技術的實際應用。

與Web服務整合

在現代行動應用程式開發中，與Web服務整合是一個非常重要的議題。Delphi提供了多種技術來實作與Web服務的整合，包括HTTP原生客戶端函式庫、REST API存取和雲端API框架等。

Web服務簡介

Web服務是一種根據網路的服務，能夠提供資料和功能供其他應用程式使用。Delphi提供了多種技術來實作與Web服務的整合。

使用HTTP原生客戶端函式庫

HTTP原生客戶端函式庫是Delphi提供的一種用於存取Web服務的技術。它能夠實作HTTP請求和回應的處理。

與REST服務整合

REST（Representational State of Resource）是一種常見的Web服務架構風格。Delphi提供了多種技術來實作與REST服務的整合，包括REST API存取元件等。

與雲端服務整合

雲端服務是一種根據雲端的服務，能夠提供資料和功能供其他應用程式使用。Delphi提供了多種技術來實作與雲端服務的整合，包括雲端API框架等。

使用AWS SDK for Delphi

AWS SDK for Delphi是一種用於存取AWS雲端服務的函式庫。開發者可以使用這個函式庫來實作與AWS雲端服務的整合。

與Web服務整合

瞭解Web服務

在不久之前，全球資訊網（World Wide Web）由蒂姆·伯納斯-李（Tim Berners-Lee）爵士發明。在他的資訊管理系統構想中，個別檔案應該透過特殊的統一資源定位符（URL）相互超連結，任何人在網頁瀏覽器程式中閱讀檔案時，都可以直接跳轉到參照的超文字檔案。他還設計了超文字傳輸協定（HTTP），並實作了第一版的網頁伺服器和瀏覽器程式，這些程式使用HTTP協定進行通訊。他的想法從一開始就是公開的、對所有人開放的，這促進了全球資訊網的巨大成功。

HTTP是一種簡單的協定，用於在底層的TCP/IP基礎設施上交換文字檔案。它具有很好的可擴充套件性，因為根據其設計，伺服器和客戶端不需要保持活躍的socket連線，每個HTTP請求都獨立於其他請求。HTTP規範定義了客戶端可以傳送到伺服器的不同請求型別，有時被稱為動詞，用於指定客戶端想要對參照的“資源”執行的操作型別。有許多HTTP方法，但最常見的是GET、HEAD、POST、PUT和DELETE。HTTP伺服器執行請求的操作並傳回回應碼和請求的資料（如果可用）。當請求成功時，伺服器傳回OK狀態碼200。另一個流行的標準HTTP回應碼是404，表示“未找到”錯誤。

在1989年的原始WWW設計中，蒂姆·伯納斯-李創造了HTML。該格式的檔案可以由網頁瀏覽器顯示。幾年後，Web服務的概念誕生了，人們意識到HTTP協定不必僅限於交換HTML檔案。任何其他檔案格式都可以從網頁伺服器傳回，網頁客戶端應用程式不一定需要是網頁瀏覽器。第一個流行的Web服務實作是根據可擴充套件標記語言（XML）檔案格式。在這種新格式中，標記標籤的型別不是由規範定義的，任何人都可以定義自己的標籤。根據XML的Web服務定義了一組XML標籤，用於編碼簡單物件存取協定（SOAP）訊息，這些訊息在XML SOAP Web服務客戶端和伺服器之間交換。關鍵標籤是信封，Web服務請求訊息由客戶端傳送，其中包含需要呼叫的Web服務方法和引數。網頁伺服器將傳回一個包含網頁方法呼叫結果的XML信封。

Delphi 6是市場上第一個支援建立SOAP Web服務伺服器和客戶端的開發工具。這種支援在目前的Delphi版本中仍然存在，但隨著時間的推移，根據SOAP XML的Web服務的受歡迎程度已經下降。現在，更常見的是使用JavaScript物件表示法（JSON）作為檔案交換格式，使用代表性狀態轉移（REST）作為通訊協定。REST建立在SOAP的弱點之上。在SOAP中，主要重點是請求信封的XML語法，SOAP訊息可以透過任何協定交換，不一定是HTTP，儘管這是最常見的實作。RESTful Web服務更簡單，充分利用了底層的HTTP協定及其不同的請求方法和回應碼。REST規範不像SOAP Web服務那樣正式和豐富。隨著時間的推移，XML規範變得非常複雜，XML解析不再是一個簡單的過程。與許多新技術一樣，主要的採用驅動因素是簡化。REST Web服務通常使用簡單的JSON文字格式進行資料交換。REST已成為透過伺服器公開的REST應用程式介面（REST API）與任何遠端功能整合的主要方式。

讓我們從頭開始研究如何在Delphi中使用Web服務，即進行HTTP呼叫。

建立原生HTTP客戶端

可以說最重要的網路通訊協定是HTTP及其安全的HTTPS版本。每個作業系統通常都有其自己的HTTP客戶端功能。在Delphi程式設計的跨平台世界中，有一個HTTP客戶端函式庫，提供對不同平台上可用的HTTP客戶端實作的統一存取。

與Delphi中的其他跨平台函式庫類別似，您可以使用System.Net.HttpClient和System.Net.URLClient單元中定義的型別完全在程式碼中處理HTTP，也可以使用System.Net.HttpClientComponents單元中宣告的現成元件，這些元件可在工具調色盤的Net類別中使用。

讓我們試著建立一個簡單的應用程式，允許您在編輯框中輸入URL，使用HTTP GET請求下載資料，並在備忘錄元件中顯示結果。以下是建立此示範的步驟：

  1. 建立一個新的空白Delphi多裝置專案，將主表單單元儲存為uFormHTTP，將整個應用程式儲存為HTTPApp。
  2. 將表單的Name屬性更改為FormHTTP。
  3. 在表單上放置一個TNetHTTPClient元件。
  4. 在表單上放置一個TToolbar元件，並在工具列上放置一個TSpeedButton和一個TEdit元件。
  5. 將速度按鈕的Name屬性更改為SpdbtnDownload，將StyleLookup屬性更改為arrowdowntoolbutton，將Align屬性更改為Right。
  6. 將編輯控制項的Name屬性更改為EdtURL。展開其Margins屬性，並為控制項的所有四個邊輸入8作為邊距值。現在將Align設定為Client。
  7. 在表單上放置一個TMemo控制項。將其重新命名為MemoData並將其對齊到客戶端。在其每個側面新增8畫素的邊距，就像我們對Edit框所做的那樣。

內容解密：

上述步驟描述瞭如何在Delphi中建立一個簡單的HTTP客戶端應用程式。首先，建立一個新的多裝置專案並儲存相關檔案。然後，透過在表單上放置必要的元件（如TNetHTTPClient、TToolbar、TSpeedButton、TEdit和TMemo）來設計使用者介面。每個元件都有特定的屬性需要設定，例如Name、StyleLookup、Align和Margins，以實作所需的佈局和外觀。這種方法展示了Delphi在建立跨平台應用程式方面的靈活性。

程式碼實作

// 使用TNetHTTPClient傳送HTTP GET請求
procedure TFormHTTP.SpdbtnDownloadClick(Sender: TObject);
var
  HTTPClient: TNetHTTPClient;
  Response: IHTTPResponse;
begin
  HTTPClient := TNetHTTPClient.Create(nil);
  try
    Response := HTTPClient.Get(EdtURL.Text);
    if Response.StatusCode = 200 then
      MemoData.Lines.Text := Response.ContentAsString()
    else
      MemoData.Lines.Text := '下載失敗：' + Response.StatusCode.ToString;
  finally
    HTTPClient.Free;
  end;
end;

內容解密：

此段程式碼展示瞭如何使用TNetHTTPClient元件傳送HTTP GET請求。首先，建立TFormHTTP類別的一個程式SpdbtnDownloadClick，該程式在使用者點選下載按鈕時觸發。在此程式中，建立了一個TNetHTTPClient例項，並使用它來傳送GET請求到EdtURL.Text指定的URL。如果請求成功（狀態碼200），則將回應內容顯示在MemoData中；否則，顯示下載失敗的訊息。這段程式碼有效地演示瞭如何在Delphi應用程式中使用TNetHTTPClient與Web服務進行互動。

圖表翻譯：

此圖示展示了 Delphi 中 HTTP 客戶端的架構。 圖表翻譯： 此圖表描述了使用者端如何透過TNetHTTPClient與伺服器進行互動。首先，使用者端發起HTTP請求，該請求由TNetHTTPClient處理並傳送到伺服器。伺服器處理請求後傳回HTTP回應，回應被TNetHTTPClient接收並傳回給使用者端。這種架構說明瞭Delphi應用程式如何透過TNetHTTPClient與Web服務進行通訊。

使用HTTP客戶端元件存取網路服務

在建立一個網路服務客戶端應用程式時，TNetHTTPClient 元件提供了多種方法來執行不同型別的 HTTP 請求。這些方法對應於它們的名稱，例如，若要發出 GET 請求，需要使用 Get 方法；對於 POST 請求，則有 Post 方法等。

簡單的HTTP請求範例

在前面的章節中，我們已經準備好了使用者介面。現在，讓我們來實作一個簡單的 HTTP GET 請求，以從伺服器下載資料。雙擊速度按鈕並在其 OnClick 事件處理程式中輸入以下程式碼：

procedure TFormHTTP.SpdbtnDownloadClick(Sender: TObject);
var
  Memstr: TMemoryStream;
  Resp: IHTTPResponse;
begin
  Memstr := TMemoryStream.Create;
  try
    Resp := NetHTTPClient1.Get(EdtURL.Text, Memstr);
    if Resp.StatusCode = 200 then
      MemoData.Lines.LoadFromStream(Memstr)
    else
      ShowMessage(Resp.StatusCode.ToString + ': ' + Resp.StatusText);
  finally
    Memstr.Free;
  end;
end;

內容解密：

  • 在這段程式碼中，我們首先建立了一個 TMemoryStream 物件 Memstr，用於儲存從伺服器傳回的資料流。
  • 使用 NetHTTPClient1.Get 方法發起一個 GET 請求，將傳回的資料儲存在 Memstr 中。
  • 檢查 Resp.StatusCode 是否為 200，以確定請求是否成功。如果成功，將 Memstr 中的資料載入到 MemoData 中；否則，顯示錯誤訊息。

非同步HTTP請求

若要使應用程式保持回應狀態，可以將 HTTP 請求設定為非同步執行。首先，將 TNetHTTPClient 元件的 Asynchronous 屬性設定為 True。

修改後的程式碼

procedure TFormHTTP.SpdbtnDownloadClick(Sender: TObject);
begin
  NetHTTPClient1.Get(EdtURL.Text);
  MemoData.Lines.Clear;
  MemoData.Lines.Add('下載中...');
end;

procedure TFormHTTP.NetHTTPClient1RequestCompleted(
  const Sender: TObject; const AResponse: IHTTPResponse);
begin
  if AResponse.StatusCode = 200 then
    MemoData.Lines.LoadFromStream(AResponse.ContentStream)
  else
    ShowMessage(AResponse.StatusCode.ToString + ': ' + AResponse.StatusText);
end;

內容解密：

  • 在 SpdbtnDownloadClick 事件處理程式中，發起非同步 GET 請求，並清除 MemoData 中的內容，顯示「下載中…」。
  • 當請求完成時，會觸發 OnRequestCompleted 事件。在此事件處理程式中，檢查請求狀態碼，並根據結果更新 MemoData 或顯示錯誤訊息。

使用SOAP Web服務

要使用 SOAP Web 服務，首先需要一個 WSDL 檔案，該檔案描述了 Web 服務所提供的功能。Delphi 提供了 WSDL Importer 精靈，可以根據 WSDL 檔案生成相應的 Object Pascal 程式碼。

範例：使用數字轉換服務

  1. 建立一個新的 Delphi 多裝置空白專案，並儲存主表單為 NumbersAppForm。
  2. 在表單上新增必要的控制項，如 TPanel、TNumberBox、TButton 和 TMemo，以建立使用者介面。
  3. 使用 WSDL Importer 精靈匯入數字轉換服務的 WSDL 檔案（位於 https://www.dataaccess.com/webservicesserver/NumberConversion.wso?WSDL），並生成相關的 Object Pascal 程式碼。
// 由 WSDL Importer 自動生成的程式碼範例

圖表翻譯：

此圖示顯示了使用 Delphi 的 WSDL Importer 精靈匯入 WSDL 檔案的過程。

@startuml
skinparam backgroundColor #FEFEFE
skinparam sequenceArrowThickness 2

title Delphi視覺化繫結與Web服務整合技術

actor "客戶端" as client
participant "API Gateway" as gateway
participant "認證服務" as auth
participant "業務服務" as service
database "資料庫" as db
queue "訊息佇列" as mq

client -> gateway : HTTP 請求
gateway -> auth : 驗證 Token
auth --> gateway : 認證結果

alt 認證成功
    gateway -> service : 轉發請求
    service -> db : 查詢/更新資料
    db --> service : 回傳結果
    service -> mq : 發送事件
    service --> gateway : 回應資料
    gateway --> client : HTTP 200 OK
else 認證失敗
    gateway --> client : HTTP 401 Unauthorized
end

@enduml

內容解密：

  • 利用 WSDL Importer 精靈生成的程式碼，可以方便地呼叫遠端的 Web 服務。
  • 在應用程式中，透過呼叫生成的類別和方法，可以實作與 Web 服務的互動。