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数据集。