PinToo之自定HTTP Client客戶端

• 文件號： P-EL-DEM-2029

1. 說明

  該功能可實現向服務端發送請求，並從服務端返回資訊。通過PinToo智慧控制平臺，實現向HTTPServer發起連線請求並獲取HTTP伺服器的返回資訊。該示例可與PinToo之自定HTTPServer伺服器示例配合使用。在使用以下功能之前，請先確認是否有給予PinToo相應的許可權。

  通過範例學習，可以掌握HTTP連線請求的發起方式。

2. 設計明細

  開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]，選擇模板檔案來打開對應模板。

  ①：TfxEdit元件，控制元件名稱為fxEditHost。

  ②：TfxMemo元件，控制元件名稱為fxMemo1。

  ③：TfxSuperButton元件，控制元件名稱為fxSuperButtonPage。

  ④：TfxEditPort元件，控制元件名稱為fxEditPort。

  ⑤：TfxSwitchButton元件，控制元件名稱為fxSwitchButton1。

  ⑥：TfxMemo元件，控制元件名稱為fxMemo2。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=400。

• ①fxEditHost屬性設定

  • Height：設定控制元件高度=30。
  • Width：設定控制元件寬度=150。
  • Name：設定控制元件名稱=fxEditHost。
  • Text：設定編輯框中的文字，設定為伺服器地址，例如192.168.0.100。

• ②fxMemo1屬性設定

  • Height：設定控制元件高度=140。
  • Width：設定控制元件寬度=375。
  • Opacity：設定控制元件透明度=0.8。

• ③fxSuperButtonPage屬性設定

  • Height：設定控制元件高度=150。
  • Width：設定控制元件寬度=150。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • Name：設定控制元件名稱=fxSuperButtonPage。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M13.16015625,126.6796875 L26.0228424072266,69.4160003662109 L97.1386566162109,64.9635162353516 L26.0228443145752,60.1400108337402 L13.1601600646973,3 L136.83984375,64.83984375 Z" p-id="8264" fill="#FF2C2C2C" stroke="Null"></path>
  

• ④fxEditPort屬性設定

  • Height：設定控制元件高度=30。
  • Width：設定控制元件寬度=90。
  • Text：設定編輯框中的文字，設定為伺服器地址，例如8806。
  • Name：設定控制元件名稱=fxEditPort。
  • KeyBoardType：設定按鍵型別=NumberPad。

• ⑤fxSwitchButton1屬性設定

  • Height：設定控制元件高度=50。
  • Width：設定控制元件寬度=50。

• ⑥fxMemo2屬性設定

  • Height：設定控制元件高度=180。
  • Width：設定控制元件寬度=370。
  • Opacity：設定透控制元件明度=0.8。

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。程式需引用ufxFunctions單元。

3.1. 程式初始設定

  該程式無初始設定。

3.2. 事件設定

• ③fxSuperButtonPage-OnClick事件

  點選按鈕以發送HTTP請求。

Procedure fxSuperButtonPageOnClick(Sender: TObject);
var 
  v: string;
  vSQL: String;
Begin
  if fxEditHost.Text = '' Then
  begin
    ShowMessage('請輸入地址！');
    Exit;
  End;
  if fxEditPort.Text = '' Then
  begin
    ShowMessage('請輸入埠號！');
    Exit;
  End;
  vSQL := fxMemo1.Lines.Text;
  v := fxfun.NetHttpPost('http://' + fxEditHost.Text + ':' + fxEditPort.Text +
   '/opensql',vSQL,'text/plain','application/json',nil);  
  
  if v <> '' then
  fxMemo2.Lines.Add(fxfun.urlDecode(v)); //顯示伺服器的返回結果
End;

• ⑤fxSwitchButton1-OnClick事件

  點選開關以開啟或者關閉日誌顯示。

Procedure fxSwitchButton1OnSwitch(Sender: TObject);
//日誌顯示
Begin
  fxMemo2.Visible := fxSwitchButton1.IsChecked;
End;

4. 運行結果

  使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

  啟動PinToo之自定HTTPServer伺服器，在客戶端填寫伺服器地址和埠號，打開日誌界面，點選發送按鈕，日誌欄接收到服務端發送的查詢結果JSON數據集。