开始使用 JSF 2 实现 HTML5 组件库（3）
|
- UID
- 1066743
|
开始使用 JSF 2 实现 HTML5 组件库（3）
一个 JSF 2 HTML5 canvas 组件接下来，我要实现一个使用 HTML5 canvas 的 JSF 2 复合组件。我需要复合组件实现以下要求：
- 拥有可配置的（通过标记属性）宽度、高度、画笔颜色、线宽和 CSS 样式
- 将组件标记的正体作为 canvas not supported 消息
- 自动包括 canvas 的 JavaScript
- 在一个页面中支持多个 canvas 组件
使用 canvas 复合组件的应用程序如图 4 所示：
图 4. 动态 canvas 复合组件 中所示的应用程序有三个 canvas 组件，每个组件的配置都有所不同。从左边开始，前两个是绘图画布，类似于 中显示的那一个。最右边的画布仅绘制一个笑脸。
清单 3 显示 中显示的页面的标记：
清单 3. 使用 canvas 复合组件（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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <?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"
xmlns:h5="http://java.sun.com/jsf/composite/html5">
<h:head>
<meta charset="UTF-8" />
<title>#{msgs.windowTitle}</title>
</h:head>
<h:body style="background: #fefeef">
<h3>#{msgs.heading}</h3>
<h5:canvas id="paintingCanvas" width="300px" height="300px"
penColor="#7F7" lineWidth="7">
#{msgs.canvasUnsupported}
</h5:canvas>
<h5:canvas id="secondPaintingCanvas" width="300px" height="300px"
style="border: thick solid red">
#{msgs.canvasUnsupported}
</h5:canvas>
<h5:canvas id="smileyCanvas" library="application" script="smiley.js"
width="300px" height="300px"
style="border: thin solid red">
#{msgs.canvasUnsupported}
</h5:canvas>
</h:body>
</html>
|
在 中，canvas 组件导入适当的 JavaScript — 不同于 ，其中我手动使用 HTML5，且必须显式地导入相关的 JavaScript。页面创建者可以使用 canvas 组件的可选 library 和 script 属性来制定一个画布的 JavaScript，或者他们可以依赖于默认的 JavaScript。在 中，我为笑脸画布使用 script 属性。我为示例中最左边的两个画布使用默认的 JavaScript（resources/html5/canvasDefault.js，实现绘图画布）。
清单 4 显示 canvas 复合组件的实现：
清单 4. canvas 复合组件（resources/html5/canvas.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
26
27
28
29
30
31
32
33
34
35
36
| <?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="id"/>
<composite:attribute name="width"/>
<composite:attribute name="height"/>
<composite:attribute name="library" default="html5"/>
<composite:attribute name="script" default="canvasDefault.js"/>
<composite:attribute name="style" default="border: thin solid blue"/>
<composite:attribute name="penColor" default="#7777FF"/>
<composite:attribute name="lineWidth" default="2"/>
</composite:interface>
<composite:implementation>
<canvas id="#{cc.id}"
width="#{cc.attrs.width}"
height="#{cc.attrs.height}"
style="#{cc.attrs.style}">
<composite:insertChildren/>
</canvas>
<h utputScript library="#{cc.attrs.library}"
name="#{cc.attrs.script}"/>
<script>
#{cc.attrs.script}.init('#{cc.id}',
'#{cc.attrs.penColor}',
'#{cc.attrs.lineWidth}')
</script>
</composite:implementation>
</html>
|
在 中，我为 canvas 复合组件声明了 8 个属性，其中 5 个具有默认值。组件的实现包含一个 HTML5 canvas，带有从组件的相关属性中配置的 ID、宽度、高度和样式。这满足了我对 canvas 组件的第一个要求（可配置属性）。 |
|
|
|
|
|
