JavaFX WebView概述，很強大，內置了相似Electron的功能

 來自 Murali Billa 
JavaFX技術人員的主要成員

在本博客中，咱們將瞭解JavaFX如何呈現網頁及其主要的組件 - 即WebView

JavaFX是：

• 用於建立和交付桌面應用程序的軟件平臺，以及能夠在各類設備上運行的富Internet應用程序（RIA）。
• 一組圖形和媒體包，使開發人員可以設計，建立，測試，調試和部署在不一樣平臺上一致運行的富客戶端應用程序。

JavaFX主要特色：

WebView：使用WebKit HTML技術的Web組件，能夠在JavaFX應用程序中嵌入Web頁面。在WebView中運行的JavaScript能夠調用Java API，Java API能夠調用在WebView中運行的JavaScript。JavaFX中添加了對其餘HTML5功能的支持，包括Web套接字，Web Worker和Web字體以及打印功能。

JavaFX WebView：

• JavaFX WebView  是一種迷你瀏覽器（也稱爲嵌入式瀏覽器），它經過JavaFX  應用程序中的API提供Web查看器和完整瀏覽功能  。
• 此瀏覽器基於  WebKit，這是一個支持HTML5，JavaScript，CSS，DOM渲染和SVG圖形的開源Web瀏覽器引擎。
• WebView類是Node類的擴展。
• 嵌入式瀏覽器從Node類繼承全部字段和方法，所以它具備其全部功能。
• 它封裝了WebEngine對象，將HTML內容合併到應用程序的場景中，並提供應用效果和轉換的屬性和方法。
• 在WebView對象上調用的getEngine（）方法返回與之關聯的Web引擎。
• 構成嵌入式瀏覽器的類位於javafx.scene.web包中。
• WebView   使開發人員可以在其Java應用程序中實現如下功能：
  • 從本地或遠程URL呈現HTML內容
  • 支持歷史記錄並提供後退和前進導航
  • 從新加載內容
  • 將效果應用於Web組件
  • 編輯HTML內容
  • 執行JavaScript命令
  • 執行從JavaScript到JavaFX的上行調用
  • 處理事件
•  除了支持CSS3和ecmascript6（ES6）以外，WebView組件還支持如下HTML5功能：
  • DOM3
  • 畫布
  • 媒體播放
  • 表單控件（<input type =「color」>除外）
  • 可編輯的內容
  • 歷史維護
  • 支持<meter>，<progress>，<details>和<summary>標籤
  • SVG
  • Web套接字
  • Web Worker
  • 支持使用本國語言編寫的域名

下圖描繪了嵌入式瀏覽器的體系結構及其與其餘JavaFX類的關係：

Web引擎：

1. 是一個可以一次管理一個網頁的非可視對象
2. 經過其API提供基本網頁功能。
3. 它支持用戶交互，例如導航連接和提交HTML表單，但它不直接與用戶交互。
4. 它加載網頁，建立文檔模型，根據須要應用樣式，並在頁面上運行JavaScript。
5. 它提供對當前頁面的文檔模型的訪問，並容許Java應用程序和頁面的JavaScript代碼之間的雙向通訊。
6. 它包裝了一個WebPage對象，該對象提供與本機Webkit核心的交互。

WebView和WebEngine類之間的關係：

用於在JavaFX WebView中加載內容的代碼片斷：

1. 建立WebView，WebEngine對象並經過遠程URL加載：

2.加載靜態HTML內容：

 

3.從本地文件加載HTML內容：

4.  在LoadWorker的幫助下跟蹤Load Progress：

• 加載老是發生在後臺線程上。在安排後臺做業後當即啓動加載返回的方法。
• 要跟蹤進度和/或取消做業，咱們可使用getLoadWorker（）  方法中 提供的  Worker實例  。
• 如下示例在加載成功完成時更改階段標題：

 

5.  訪問文檔模型

• WebEngine對象爲其Web頁面建立和管理文檔對象模型（DOM）。可使用Java DOM Core類訪問和修改模型。
• getDocument（）方法提供對模型根的訪問。此外，支持DOM事件規範以在Java代碼中定義事件處理程序。
• 如下示例將Java事件偵聽器附加到Web頁面的元素。單擊該元素會致使應用程序退出：

6.  從JavaFX調用Javascript ：

• WebView加載網站後，可使用executeScript（java.lang.String）方法在當前頁面的上下文中執行任意JavaScript代碼。

7.將   JavaScript值映射到Java對象：

• JavaScript值使用明顯的Java類表示：null變爲Java null; boolean變成了java.lang.Boolean; 一個字符串成爲java.lang.String。
• 若是結果是JavaScript對象，則將其包裝爲JSObject類的實例。
• JSObject類是一個代理，它提供對其底層JavaScript對象的方法和屬性的訪問。
• 最經常使用的JSObject方法是getMember（讀取命名屬性），setMember（設置或定義屬性）和調用（調用函數值屬性）。
• DOM節點映射到擴展JSObject並實現適當DOM接口的對象。要獲取Node的JSObject對象，只需執行轉換：

JSObject jdoc =（JSObject）webEngine.getDocument（）;

8.將Java對象映射到JavaScript值：

• JSObject方法的參數setMember和call將Java對象傳遞給JavaScript環境。
• 這與上面描述的JavaScript-to-Java映射大體相反：Java String，Number或Boolean對象被轉換爲明顯的JavaScript值。
• JSObject對象將轉換爲原始包裝的JavaScript對象。不然，將建立JavaRuntimeObject。
• 這是一個JavaScript對象，充當Java對象的代理，由於訪問JavaRuntimeObject的屬性會致使訪問具備相同名稱的Java字段或方法。

JDK中的Webkit升級：

1. WebView Webkit引擎基於Apple Safari端口（https://trac.webkit.org/）。這個端口也被iOS，GTK，WinCairo，EFL等使用。
2. 咱們遵循Webkit GTK發佈週期，並將在6個月內升級Webkit一次（https://trac.webkit.org/wiki/WebKitGTK/StableRelease）
3. 升級Webkit的目的是除了新功能和遵照最新標準以外，還要修復安全漏洞。

我接下來的幾篇博客將介紹JavaFX WebView架構和Webkit引擎內部的詳細信息。

參考文獻：

1. https://docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebEngine.html
2. https://o7planning.org/en/11151/javafx-webview-and-webengine-tutorial