Smart之網路文件瀏覽

1. 說明

  範例可實現線上瀏覽文件的功能。目前僅支援PDF檔案的瀏覽。

  通過範例學習，可以掌握檔案閱讀器的基本使用方式。

2. 設計明細

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

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

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

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

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

  ⑤：TPDFViewer元件，控制元件名稱為PDFViewer1。

  ⑥：TImage元件，控制元件名稱為ImageSurf。

• Main主窗體設定

  • Caption：設定窗體標題=網路文件瀏覽。
  • Height：設定窗體客戶區高度=538。
  • Width：設定窗體客戶區寬度=565。

• ①Image1屬性設定

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

  

• ②Label2屬性設定

  • AutoSize：設定控制元件大小自適應于字型=True。
  • Caption：設定顯示的標籤字型=網路檔案地址。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ③Label1屬性設定

  • AutoSize：設定控制元件大小自適應于字型=True。
  • Caption：設定顯示的標籤字型=網路文件瀏覽。
  • Font：設定標籤字型。點選該屬性右側[...]按鈕或者雙擊該屬性打開字型設定界面，設定內容如下。

  

• ④Edit1屬性設定

  • Height：設定控制元件高度=37。
  • Width：設定控制元件寬度=319。
  • Text：設定文字框內容=http://kanslor.gitee.io/webhost/archives/sample.pdf。
  • TextHint：文字框內容為空時顯示的內容=請輸入地址。

• ⑤PDFViewer屬性設定

  • OptionsZoom：設定關於縮放的相關設定，其中的ZoomMode設定為pzmPageWidth，即縮放為頁面寬度的大小。

• ⑥ImageSurf屬性設定

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

  

3. 程式設計

3.1. 程式初始設定

  該程式無初始設定。

3.2. 事件設定

• ⑥ImageSurf-OnClick事件

  當點選瀏覽的按鈕時，下載指定地址的PDF檔案並瀏覽檔案。

procedure TMyHandler.ImageSurfClick;
//點選瀏覽檔案
begin
  paxfunc.DownLoadFile(FThis.Edit1.Text,'Sample.pdf');
  FThis.PDFViewer1.LoadFromFile('sample.pdf');
end;

4. 運行結果

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

  使用滑鼠點選工具欄運行（Run），測試運行結果。運行後點擊瀏覽圖示，下方的PDFViewer顯示出下載得到的PDF檔案。