开始使用 JSF 2 实现 HTML5 组件库（2）
|
- UID
- 1066743
|
开始使用 JSF 2 实现 HTML5 组件库（2）
使用 HTML5 canvasHTML5 canvas 是一种成熟的 2D 绘图界面，足以完成 Plants vs. Zombies 和 Quake II 这样的游戏。我对 HTML5 canvas 的使用，如图 2 所示，可能没有那么深入，但是作为指导已经足够了：
图 2. 一个简单的 HTML5 canvas 示例 我向 HTML5 canvas 添加了一些 JavaScript 来实现 所示的简单绘画应用程序。在移动鼠标时，画布左上角的读出器中显示鼠标坐标。在画布中拖动鼠标时，使用蓝色画笔绘图。
中所示的应用程序是一个 JSF 应用程序。图 3 显示其目录结构：
图 3. canvas 示例的目录结构 应用程序的 facelet 在 web/WEB-INF/index.xhtml 中定义，且应用程序的 JavaScript 位于 web/resources/application/paintingCanvas.js 中。清单 1 显示 index.xhtml：
清单 1. 使用 <canvas> tag (WEB-INF/index.xhtml)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>#{msgs.windowTitle}</title>
</h:head>
<h:body style="background: #fefeef">
<h utputScript library="application" name="paintingCanvas.js"
target="head" />
<h3>#{msgs.heading}</h3>
<canvas width="400px" height="400px" id="paintingCanvas">
Canvas not supported.
</canvas>
</h:body>
</html>
|
中的 index.xhtml 文件是一种 HTML5 多语言文档（参见 ），因为它有一个 HTML5 文档类型/名称空间和格式标准的 XHTML 语法 — 这正是我酝酿 facelets 和 HTML5 所必需的。
我使用 <hutputScript> 标记导入相应的 JavaScript。最后，我开始使用 HTML5 canvas 元素。如果浏览器不明白 <canvas> 标记，它会显示一条 Canvas not supported 消息。<canvas> 标记不会高亮显示；所有有趣的代码在相应的 JavaScript 中，如清单 2 所示：
清单 2. 绘图画布 JavaScript (resources/application/paintingCanvas.js)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| window.addEventListener("load", function() {
var canvas, context, painting;
function init() {
canvas = document.getElementById("paintingCanvas");
if (canvas == null) return;
context = canvas.getContext("2d");
if (context == null) return;
painting = false;
context.strokeStyle = "#00f";
context.lineWidth = 3;
context.font = "15px Helvetica";
}
init();
canvas.addEventListener("mousedown", function(ev) {
painting = true;
context.beginPath();
context.moveTo(ev.offsetX, ev.offsetY);
}, false);
canvas.addEventListener("mousemove", function(ev) {
updateReadout(ev.offsetX, ev.offsetY);
if (painting) {
paint(ev.offsetX, ev.offsetY);
}
function updateReadout(x, y) {
context.clearRect(0, 0, 100, 20);
context.fillText("x: " + x + ", y: " + y, 5, 15);
}
function paint(x, y) {
context.lineTo(ev.offsetX, ev.offsetY);
context.stroke();
}
}, false);
canvas.addEventListener("mouseup", function() {
painting = false;
context.closePath();
}, false);
}, false);
|
运行样例代码本系列的代码基于运行于企业容器（比如 GlassFish 或 Resin）内的 JSF 2。参阅本系列第一期 “”，这是个分步教程，讲解如何使用 GlassFish 安装和运行本系列的代码。参见 部分，获取本文的样例代码。
使用鼠标光标读出器实现简单的绘画，如 所示。当页面加载时，我使用 document.getElementById() 获取对画布的引用。从画布中，我获取对画布上下文的引用。我在后续的事件处理程序中使用该内容，我使用 JavaScript 闭包或 Java 开发人员所指的匿名内部类实现它。
如果您使用过 Abstract Window Toolkit (AWT)，就会了解画布内容是对 AWT 的图形内容的模仿。毕竟，绘制二维的形状、图像和文本有这么多方式。在 中，我使用蓝色的描边风格 初始化上下文，并设置了线宽和字体。之后所需的操作就只是移动、描边、重复、鼠标上下拖动。
学习了 HTML5 canvas 基础知识之后，我将向您展示如何创建一个 JSF 2 HTML5 复合组件。 |
|
|
|
|
|
