Smart之自定HTTP Client客戶端

• 文件號：S-EQ-DEM-2030

1. 功能

  採用HTTP協議，通過HTTP訪問數據伺服器的功能，該示例需與Smart之HTTP Server伺服器配合使用。在使用本範例前請先啟動HTTP Server伺服器的範例。

  通過本範例學習，您可以掌握Smart智慧控制平臺訪問HTTP伺服器的功能。

2. 設計明細

  開啟Smart智慧控制平臺，分別加入下插圖之控制元件。或者通過點選功能表欄[檔案]-[打開專案]選擇範例專案檔案來打開該範例。

  ①：TImage元件，控制元件名稱為Image1。

  ②：TLabel元件，控制元件名稱為Label2。

  ③：TLabel元件，控制元件名稱為Label1。

  ④：TEdit元件，控制元件名稱為EditHost。

  ⑤：TLabel元件，控制元件名稱為Label3。

  ⑥：TEdit元件，控制元件名稱為EditPort。

  ⑦：TImage元件，控制元件名稱為ImageSend。

  ⑧：TMemo元件，控制元件名稱為Memo1。

  ⑨：TLabel元件，控制元件名稱為Label4。

  ⑩：TSwitchButton元件，控制元件名稱為SwitchButton1。

  (11)：TMemo元件，控制元件名稱為Memo2。

• Main窗體屬性設定

  • BorderStyle：設定邊界樣式=bsDialog。
  • Caption：設定窗體顯示的標題=自定HTTP Client客戶端。
  • ClientHeight：設定客戶區窗體的高度=438。
  • ClientWidth：設定窗體客戶區的寬度=465。

• ①Image1屬性設定

  • Align：設定控制元件對齊方式=alClient。
  • Stretch：設定圖片拉伸適應于控制元件。
  • Picture：設定圖片。點選Picture屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

• ③Label2屬性設定

  • Caption：設定標籤內容=地址：。
  • Font：設定字型，雙擊該屬性或者點選屬性右側的[...]以打開字型設定界面。

  

• ④EditHost屬性設定

  • Text：設定文字此處設定伺服器的地址，例如192.168.0.110。
  • Name：設定控制元件名稱=EditHost。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]以打開字型設定界面。

  

• ⑤Label3屬性設定

  • Caption：設定標籤內容=埠：。
  • Font：設定字型，雙擊該屬性或者點選屬性右側的[...]以打開字型設定界面。

  

• ⑥EditPort屬性設定

  • Text：設定文字此處設定伺服器的埠號，例如8806。
  • Name：設定控制元件名稱=EditPort。
  • NumbersOnly：設定只允許輸入數字=True。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]以打開字型設定界面。

  

• ⑦ImageSend屬性設定

  • Height：設定控制元件高度=32。
  • Width：設定控制元件寬度=32。
  • Stretch：設定圖片拉伸=True。
  • Name：設定控制元件名稱為ImageSend。
  • Picture：設定圖片。點選Picture屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

• ⑧Memo1屬性設定

  • Lines：設定內容，雙擊該屬性或者點選右側的[...]打開編輯器，輸入如下內容。

  

• ⑨Label4屬性設定

  • Caption：設定標籤內容=日誌。
  • Font：設定字型，雙擊該屬性或者點選屬性右側的[...]以打開字型設定界面。

  

• ⑩SwitchButton1屬性設定

  • Height：設定控制元件高度=56。
  • Width：設定控制元件寬度=56。
  • Stretch：設定圖片拉伸=True。
  • SwitchOff：設定處於關閉狀態時顯示的圖片。點選屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

  • SwitchOn：設定處於開啟狀態時顯示的圖片。點選屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

3. 程式設計

3.1. 程式初始化設定

  該程式無初始化設定。

3.2. 事件設定

• ⑦ImageSend-OnClick事件

  點選以發送內容。

procedure TMyHandler.ImageSendClick;
//點選以將SQL傳遞至HTTP伺服器中
var
  v,vSQL:string;
begin
  vSQL := FThis.Memo1.Lines.Text;
  v:=paxfunc.NetHttpPost('http://' + FThis.EditHost.Text + ':' + FThis.EditPort.Text + '/opensql',vSQL,'text/plain','application/json',nil);
  if v <> '' then
    //返回的結果傳遞
    FThis.Memo2.Lines.Add(paxfunc.urlDecode(v));
end;

• ⑩SwitchButton1-OnSwitch事件

  點選開啟或關閉日誌框的顯示。

procedure TMyHandler.SwitchButton1Switch;
//顯示日誌
begin
  FThis.Memo2.Visible := FThis.SwitchButton1.IsChecked;
end;

4. 運行結果

  通過工具欄儲存，將程式儲存為 sdb 專案檔案。

  使用滑鼠點選工具欄運行（Run），測試運行結果。在伺服器端設定埠號，點選啟動按鈕，下方顯示HTTP服務 已啟動。在客戶端處填寫伺服器的地址埠號資訊，填寫查詢的SQL內容，點選右側的發送按鈕，下方日誌處會接收到查詢的結果集。服務端的數據表格也會顯示查詢的結果。