DOC-04-03 支持的HTML5特性
本章描述JavaFX的web组件支持的HTML5特性的范围。大多数支持的功能都是WebEngine类和WebView类的一部分，并且这个功能没有任何公共API。
JavaFX web组件的当前版本支持以下HTML5特性：
● Canvas和可缩放矢量图形（SVG）
● 媒体重播
● 表单控件
● 历史维护
● 交互式元素标记（Interactive element tags）
● DOM
● Web workers
● Web sockets
● Web fonts
3.1 Canvas和SVG
对canvas和svg元素标签的支持使JavaFX程序有了基本的图形功能，包括渲染图形、使用SVG（Scalable Vector Graphics）语法构建阴影、应用颜色设置、可视化效果和动画。例3-1提供了一个使用<canvas>和<tag>标签来渲染web组件的简单测试程序。
例3-1 Canvas和SVG元素的使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html> <head> <title>Canvas and SVG</title> </head> <body> <canvas style="border:3px solid darkseagreen;" width="200" height="100"> </canvas> <svg> <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red"/> </svg> </body> </html> |
当你加载一个例3-1中的HTML页面到WebViewSample程序中时，渲染出的图形效果如图3-1所示。
图3-1 渲染图形
3.2 媒体播放
WebView组件让你可以在已加载的HTML页面中播放视频和音频内容。共支持如下几种编码格式：
● 音频：AIFF、WAV(PCM)、MP3和AAC
● 视频：VP6、H264
● 媒体容器：FLV、FXM、MP4和MpegTS(HLS)
有关嵌入媒体内容的更多信息，请参考HTML5规范中的video和audio标签。
3.3 表单控件
JavaFX的web组件实现了表单呈现和处理数据输入。支持的表单组件包括文本框、按钮、复选框以及其他可用的输入控件。例3-2提供了控件的一个简单集合，让人可以录入一个问题摘要并指定其优先级。
例3-2 表单输入控件
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE HTML> <html> <form> <p><label>Login: <input></label></p> <fieldset> <legend> Priority </legend> <p><label> <input type=radio name=size> High </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Low </label></p> </fieldset> </form> </html> |
例3-2中的HTML内容加载到WebView组件中以后，输出结果展示如图3-2所示：
图3-2 呈现表单元素
更多有关用户如何提交数据并通过使用表单组件处理数据的内容，请参考HTML5规范。
3.4 历史维护
你可以通过使用javafx.scene.web包中的WebHistory类来获取已访问网页的列表。WebHistory类表示与WebEngine对象关联的会话历史。
在你用来学习JavaFX web组件功能的WebViewSample程序中，就使用了历史维护功能。请参考“管理Web历史”章节来了解更多实现细节。
3.5对交互式元素标记的支持
WebView组件对交互式HTML5元素提供了支持，例如details、summary、command和menu。例3-3展示了details和summary元素是如何被添加到web组件中，该样例也使用了progress和meter元素。
例3-3 details、summary、progress和meter元素的使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html> <h1>Download Statistics</h1> <details> <summary>Downloading... <progress max="100" value="25"></progress> 25%</summary> <ul> <li>Size: 1,7 MB</li> <li>Server: oracle.com</li> <li>Estimated time: 2 min</li> </ul> </details> <h1>Hard Disk Availability</h1> System (C:) <meter value=240 max=326></meter> </br> Data (D:) <meter value=101 max=130></meter> </html> |
该页面加载到web组件中以后，WebViewSample程序展示效果如图3-3所示。
图3-3 呈现交互式HTML5元素
查看HTML5规范来了解更多关于交互式元素的属性的信息。
3.6 文档对象模型（DOM）
WebEngine对象是JavaFX web组件的非可视化部分，可创建和提供对web页面DOM元素的访问。可通过使用WebEngine类的getDocument()方法访问文档模型的根元素。例3-4提供的代码片段实现了一些基本任务：获取web页面的URI并把它显示在程序窗口的标题上。
例3-4 从DOM中获取URI
|
1 2 3 |
WebView browser = new WebView(); WebEngine webEngine = browser.getEngine(); stage.setTitle(webEngine.getDocument().getDocumentURI()); |
此外，文档模型事件规范支持在JavaFX代码中定义事件处理器。查看WebEngine类的说明来理解样例程序，该样例程序将事件监听器与web页面中的某元素关联在了一起。
3.7 Web Sockets
WebView组件支持WebSocket接口，使JavaFX程序与服务端进程建立双向通信。WebSocket的API规范中描述了其更多细节。例3-5展示了一个使用web sockets的通用模型。
例3-5 在HTML代码中使用Web Sockets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html> <head> <title>Web Worker</title> </head> <body> <script> socketConnection = new WebSocket('ws://example.com:8001'); socketConnection.onopen = function () { // do some stuff }; </script> </body> </html> |
3.8 Web Worker
JavaFX web组件支持在已加载的网页上运行并行web worker脚本。此功能使需要长时间运行的脚本能够在无需等待UI的情况下运行。
例3-6展示了使用了myWorker脚本的网页
例3-6 使用Web Worker脚本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE HTML> <html> <head> <title>Web Worker</title> </head> <body> <script> var worker = new Worker('myWorker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script> </body> </html> |
从HTML5规范中学习更多关于web worker脚本的内容。
3.9 Web Font支持
JavaFX web组件支持web fonts，使用@font-face注解声明。使用该注解以后即链接上了字体，该字体会在需要时自动下载。根据HTML5规范，该功能使程序能够选择字体以使页面能够最匹配设计目标。例3-7使用了@font-face规则来链接通过URL指定的字体。
例3-7 使用Web Font
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML> <html> <head> <title>Web Font</title> <style> @font-face { font-family: "MyWebFont"; src: url("http://example.com/fonts/MyWebFont.ttf") } h1 { font-family: "MyWebFont", serif;} </style> </head> <body> <h1> This is a H1 heading styled with MyWebFont</h1> </body> </html> |
上面这段HTML代码加载到WebViewSample程序中以后，该程序展示结果如图3-4所示。
图3-4 呈现Web Font
