JavaFX WebView概述，很强大，内置了类似Electron的功能

为什么80%的码农都做不了架构师？>>>   

 来自 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

转载于:https://my.oschina.net/gemron/blog/2208696