Smart之Flying網路列印

1. 說明

  範例採用HTTP與MQTT通訊協議，連線列印伺服器進行列印操作。需配合愛招飛旗下的Flying(飛印，區域網資料包表列印工具)使用。

  程式中包含了TARS的連線。需訪問資料庫。範例在demo資料庫中新建一張表名為Basic_Unit，其表結構如下圖所示，可通過下面的指令碼新建該表並向其中插入數據。在demo 資料庫中提供了相關表。

--建立表Basic_Unit
CREATE TABLE [dbo].[Basic_Unit](
	[FInterID] [int] NOT NULL,
	[FUnitCode] [nvarchar](50) NULL,
	[FUnitName] [nvarchar](100) NULL,
	[FCoefficient] [decimal](18, 10) NULL,
	[FNote] [varchar](255) NULL,
 CONSTRAINT [PK_Basic_MeasureUnit] PRIMARY KEY CLUSTERED 
(
	[FInterID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

--插入示例數據
INSERT INTO [dbo].[Basic_Unit]
           ([FInterID],[FUnitCode],[FUnitName],[FCoefficient],[FNote])
     VALUES(2,'M','米',1,NULL)
INSERT INTO [dbo].[Basic_Unit]
           ([FInterID],[FUnitCode],[FUnitName],[FCoefficient],[FNote])
     VALUES(3,'KG','千克',1,NULL)
INSERT INTO [dbo].[Basic_Unit]
           ([FInterID],[FUnitCode],[FUnitName],[FCoefficient],[FNote])
     VALUES(4,'G','克',0.001,NULL)

  通過Smart智慧控制平臺功能表[工具]->[資料庫設定]，設定好要連線的TARS中介軟體之資料庫，在使用過程中須保證TARS處於運行狀態並開放服務，TARS帳套配置請參閱TARS使用手冊。

  通過本範例學習，可以掌握HTTP、MQTT的基本通訊原理，並通過該協議進行列印操作的功能。

2. 設計明細

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

2.1. Main窗體

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

  2：TLabel元件，控制元件名稱為Label9。

  3：TImage元件，控制元件名稱為Image2。

  4：TRFDataSet元件，控制元件名稱為RFDataSet1。

  5：TFlying元件，控制元件名稱為Flying1。

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

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

  8：TEdit元件，控制元件名稱為edtIPAddress。

  9：TEdit元件，控制元件名稱為edtPort。

  10：TComboBox元件，控制元件名稱為ComboBoxPrintType。

  11：TLabel元件，控制元件名稱為Label7。

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

  13：TLabel元件，控制元件名稱為Label10。

  14：TLabel元件，控制元件名稱為Label6。

  15：TLabel元件，控制元件名稱為Label8。

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

  17：TLabel元件，控制元件名稱為Label5。

  18：TImage元件，控制元件名稱為ImageSearch。

  19：TComboBox元件，控制元件名稱為ComboBoxPrinter。

  20：TComboBox元件，控制元件名稱為ComboBoxType。

  21：TEdit元件，控制元件名稱為edtPrintNum。

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

  23：TTimer元件，控制元件名稱為Timer1。

• Main窗體屬性設定

  • BorderStyle：設定邊界樣式=bsDialog。
  • Caption：設定窗體顯示的標題=Flying網路列印。
  • ClientHeight：設定客戶區窗體的高度=480。
  • ClientWidth：設定窗體客戶區的寬度=720。

• ①Image1屬性設定

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

  

• ②Label9屬性設定

  • Caption：設定顯示的標籤字型=Flying網路列印。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ③Image2屬性

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

  

• ⑤Flying1屬性設定

  • HTTPOptions：HTTP模式下的相關設定
    • Host：HTTP模式下列印伺服器的地址。
    • Port：HTTP模式下列印伺服器的埠號。
  • MQTTOptions：MQTT模式下的相關設定。
    • BrokerHost：MQTT服務端的地址。
    • BrokerPort：MQTT服務端的埠號。
    • PrintPwd：MQTT列印的訂閱驗證碼。
    • PrintTopic：MQTT列印的訂閱主題。
  • PrintOptions：列印相關的設定項。
    • PrintCopies：列印的份數。
    • PrintType：設定列印型別=HTTP。
    • ReportName：設定列印報表的模板名稱。
    • Preview：設定列印預覽=True。
  • WebSocketOptions：WebSocket 模式的相關設定
    • Host：WebSocket 模式下列印伺服器的地址。
    • Port：WebSocket 模式下列印伺服器的埠號。
    • URL：設定 WebSocket 服務的監聽地址。

• ⑥Label2屬性設定

  • Caption：設定顯示的標籤字型=伺服器地址。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ⑦Label1屬性設定

  • Caption：設定顯示的標籤字型=連線選項。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ⑧edtIPAddress屬性設定

  • Name：控制元件名稱=edtIPAddress。
  • Text：設定文字框中的內容，此處填寫地址，例如=192.168.0.109。
  • Font：設定字型，點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ⑨edtPort屬性設定

  • Name：控制元件名稱=edtPort。
  • NumbersOnly：設定是否只允許輸入數字=True。
  • Text：設定編輯的文字，此處為埠號。如8801。
  • Font：設定字型，點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ⑩ComboBoxPrintType屬性設定

  • Name：設定控制元件名稱=ComboBoxPrintType。
  • Text：設定顯示的文字，如HTTP。
  • Items：設定選項。雙擊該屬性或者點選屬性右側的[...]打開編輯器。

  

  • ItemIndex：設定預設選擇的選項=0。
  • Font：設定字型，點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (11)Label7屬性設定

  • Caption：設定顯示的標籤字型=列印選項。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (12)Label3屬性設定

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

  

• (13)Label10屬性設定

  • Caption：設定顯示的標籤字型=連線型別。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (14)Label6屬性設定

  • Caption：設定顯示的標籤字型=印表機。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (15)Label8屬性設定

  • Caption：設定顯示的標籤字型=檔案型別。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (16)Label4屬性設定

  • Caption：設定顯示的標籤字型=列印份數。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (17)Label5屬性設定

  • Caption：設定顯示的標籤字型=啟用預覽。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (18)ImageSearch屬性設定

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

  

• (19)ComboBoxPrinter屬性設定

  • Name：設定控制元件名稱=ComboBoxPrinter。
  • ItemIndex：設定預設選擇的選項=0。
  • Font：設定字型，點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (20)ComboBoxType屬性設定

  • Name：設定控制元件名稱=ComboBoxType。
  • Text：設定顯示的文字，例如pdf。
  • ItemIndex：設定預設選擇的選項=0。
  • Items：設定選項，雙擊該屬性或者點選屬性右側[...]來打開編輯器。

  

  • Font：設定字型，點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (21)edtPrintNum屬性設定

  • Name：控制元件名稱=edtPrintNum。
  • NumbersOnly：設定是否只允許輸入數字=True。
  • Text：設定顯示的文字，此處設定為列印的份數1。
  • Font：設定字型，點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• (22)SwitchButton1屬性設定

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

  

  • SwitchOn：顯示關閉狀態時的影像，雙擊該屬性或者點選右側[...]打開影像編輯器。點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

2.2. Form1窗體

  ①：TChrome元件，控制元件名稱為Chrome1。

• Form1窗體屬性設定

  • BorderStyle：設定邊框型別為bsDialog。
  • Caption：設定窗體標題字幕=預覽。
  • FormStyle：設定窗體風格=fsStayOnTop。

• ①Chrome1屬性設定

  • Align：設定控制元件對齊方式=alClient。

3. 程式設計

3.1. 程式初始設定

  在程式啟動時，為Flying控制元件提供初始值。

constructor TMyHandler.Create(AOwner: TComponent);
begin
  FThis :=TBaseForm(AOwner);
  FThis.Flying1.HTTPOptions.Host := FThis.edtIPAddress.Text;
  FThis.Flying1.HTTPOptions.Port := StrToInt(FThis.edtPort.Text);
  FThis.Flying1.WebSocketOptions.Host := FThis.edtIPAddress.Text;
  FThis.Flying1.WebSocketOptions.Port := StrToInt(FThis.edtPort.Text);
  FThis.Flying1.MQTTOptions.BrokerHost := FThis.edtIPAddress.Text;
  FThis.Flying1.PrintOptions.PrintCopies := StrToInt(FThis.edtPrinTNum.Text);
  FThis.Flying1.PrintOptions.Preview := FThis.SwitchButton1.IsChecked;
  FThis.RFDataSet1.Connection := dm.DBConnection;
  //導出檔案型別選擇
  case FThis.ComboBoxType.ItemIndex of
    1: FThis.Flying1.PrintOptions.ExportFileType := csv;
    2: FThis.Flying1.PrintOptions.ExportFileType := html;
    3: FThis.Flying1.PrintOptions.ExportFileType := jpg;
    4: FThis.Flying1.PrintOptions.ExportFileType := rtf;
    5: FThis.Flying1.PrintOptions.ExportFileType := txt;
    6: FThis.Flying1.PrintOptions.ExportFileType := xls;
  else
    FThis.Flying1.PrintOptions.ExportFileType := pdf;
  end;
  //連線型別選擇
  case FThis.ComboBoxPrintType.ItemIndex of
    1: 
    begin
      FThis.Flying1.PrintOptions.PrintType := MQTT;
      FThis.Flying1.MQTTOptions.Enabled := True;
      FThis.Flying1.WebSocketOptions.Enabled := False;
    end;
    2:
    begin
      FThis.Flying1.PrintOptions.PrintType := WebSocket;
      FThis.Flying1.MQTTOptions.Enabled := False;
      FThis.Flying1.WebSocketOptions.Enabled := True;    
    end;
  else
    FThis.Flying1.PrintOptions.PrintType := HTTP;
      FThis.Flying1.MQTTOptions.Enabled := False;
      FThis.Flying1.WebSocketOptions.Enabled := False;  
  end;
end;

3.2. 事件設定

• (18)ImageSearch-OnClick事件

  點選搜索按鈕，執行獲取印表機列表的子程式。

procedure TMyHandler.ImageSearchClick;
//搜索印表機
begin
  FThis.Flying1.GetPrinterList;
end;

• ⑧edtIPAddress-OnChange事件

  當IP地址的編輯框內容發生變化時，將取值傳遞給Flying1。

procedure TMyHandler.edtIPAddressChange;
//修改列印伺服器地址
begin
  FThis.Flying1.HTTPOptions.Host := FThis.edtIPAddress.Text;
  FThis.Flying1.MQTTOptions.BrokerHost := FThis.edtIPAddress.Text;
  FThis.Flying1.WebSocketOptions.Host := FThis.edtIPAddress.Text;
end;

• ⑨edtPort-OnChange事件

  當埠的編輯框內容發生變化時，將取值傳遞給Flying1。

procedure TMyHandler.edtPortChange;
//修改埠號
begin
  FThis.Flying1.HTTPOptions.Port := StrToInt(FThis.edtPort.Text);
  FThis.Flying1.WebSocketOptions.Port := StrToInt(FThis.edtPort.Text);
  FThis.Flying1.MQTTOptions.BrokerPort := StrToInt(FThis.edtPort.Text);
end;

• (21)edtPrintNum-OnChange事件

  當修改列印份數時，將取值傳遞給Flying1。

procedure TMyHandler.edtPrintNumChange;
//修改列印份數
begin
  FThis.Flying1.PrintOptions.PrintCopies := StrToInt(FThis.edtPrinTNum.Text);
end;

• (20)ComboBoxType-OnChange事件

  修改檔案輸出的型別，將取值傳遞給Flying1。

procedure TMyHandler.ComboBoxTypeChange;
//修改檔案輸出型別
begin
  case FThis.ComboBoxType.ItemIndex of
    1: FThis.Flying1.PrintOptions.ExportFileType := csv;
    2: FThis.Flying1.PrintOptions.ExportFileType := html;
    3: FThis.Flying1.PrintOptions.ExportFileType := jpg;
    5: FThis.Flying1.PrintOptions.ExportFileType := rtf;
    6: FThis.Flying1.PrintOptions.ExportFileType := txt;
    7: FThis.Flying1.PrintOptions.ExportFileType := xls;
  else
    FThis.Flying1.PrintOptions.ExportFileType := pdf;
  end;   
end;

• ⑩ComboBoxPrintType-OnChange事件

  修改連線型別，將獲取到的數值傳遞給Flying1。

procedure TMyHandler.ComboBoxPrintTypeChange;
  //連線型別選擇
begin
  case FThis.ComboBoxPrintType.ItemIndex of
    1:
    begin    
      FThis.Flying1.PrintOptions.PrintType := MQTT;
      FThis.edtPort.Text := IntToStr(FThis.Flying1.MQTTOptions.BrokerPort);
      FThis.Label3.Caption := FThis.siLang1.GetTextW('MQTT');
      FThis.Flying1.MQTTOptions.Enabled := True;
      FThis.Flying1.WebSocketOptions.Enabled := False;
    end;
    2:
    begin
      FThis.Flying1.PrintOptions.PrintType := WebSocket;
      FThis.edtPort.Text := IntToStr(FThis.Flying1.WebSocketOptions.Port);
      FThis.Label3.Caption := FThis.siLang1.GetTextW('port');
      FThis.Flying1.MQTTOptions.Enabled := False;
      FThis.Flying1.WebSocketOptions.Enabled := True;
    end;
  else
    begin
      FThis.Flying1.PrintOptions.PrintType := HTTP;
      FThis.edtPort.Text := IntToStr(FThis.Flying1.HTTPOptions.Port);
      FThis.Label3.Caption := FThis.siLang1.GetTextW('port');
      FThis.Flying1.MQTTOptions.Enabled := False;
      FThis.Flying1.WebSocketOptions.Enabled := False;
    end;
    end;
end;

• ③Image2-OnClick事件

  點選印表機圖示，將數據傳遞給印表機進行列印操作。如果啟用了列印預覽則顯示列印預覽界面。MQTT列印由於不能及時獲取URL，故需要通過延時定時器來獲取。

procedure TMyHandler.Image2Click;
//點選以進行列印操作
var
  v:string;
  vStream:TStream;
  F: TBaseForm;
Begin
  if demo then exit;
  if FThis.ComboBoxPrinter.Items.Text = '' Then exit;
  FThis.Flying1.PrintOptions.PrinterName := FThis.ComboBoxPrinter.Items.Strings[FThis.ComboBoxPrinter.ItemIndex];
  FThis.RFDataSet1.SQL.Text := 'SELECT * FROM Basic_Unit';
  FThis.RFDataSet1.Open;
  FThis.Flying1.PrintOptions.Data.Clear;
  FThis.Flying1.AddPrintData(FThis.RFDataSet1,'A');
  FThis.Flying1.ReportPrint;
end;

• ⑤Flying1-OnReceivedPrinter事件

  當Flying返回印表機列表時，將印表機列表顯示在下拉選單中。

procedure TMyHandler.Flying1ReceivedPrinter;
//獲取印表機列表
begin
  FThis.ComboBoxPrinter.Items.CommaText := APrinterList;
  if FThis.ComboBoxPrinter.Items.Count <> 0  Then
  FThis.ComboBoxPrinter.ItemIndex := 0;
  FThis.ComboBoxPrinter.DroppedDown := True;
end;

• ⑤Flying1-OnReceivedExport事件

  當 Flying 返回輸出的列印格式時，返回URL並顯示。

procedure TMyHandler.Flying1ReceivedExport;
//輸出
var
  F: TBaseForm;
begin
  if FThis.SwitchButton1.IsChecked then
  begin
    F := paxfunc.OpenForm('Form1');
    F.TagObject := FThis;
    TChrome(F.FindComponent('Chrome1')).Active := True;
    TChrome(F.FindComponent('Chrome1')).Uri := AUrl;
  end; 
end;

4. 運行結果

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

  使用滑鼠點選工具欄運行（Run），測試運行結果。

  在本機運行Flying以及本範例，輸入伺服器地址，埠號，選擇連線型別，然後點選搜索圖示，在印表機欄位顯示目前可用的印表機，選擇完成後修改檔案型別以及列印份數，可根據需要選擇是否開啟與預覽。然後點選列印按鈕即可。