JSF 向导 用 JSF 2 和 CDI 实现一个向导-3
|
- UID
- 1066743
|
JSF 向导 用 JSF 2 和 CDI 实现一个向导-3
模板和视图对于大多数的向导，您可以放心地归纳出向导的结构，如图 4 所示：
图 4. 向导的结构 清单 3 显示了封装该结构的一个模板：
清单 3. 向导模板 (templates/wizardTemplate.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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>
<ui:insert name="windowTitle">
#{msgs.windowTitle}
</ui:insert>
</title>
</h:head>
<h:body>
<h utputStylesheet library="css" name="styles.css" target="head"/>
<ui:insert name="heading"/>
<div class="wizardPanel">
<div class="subheading">
<ui:insert name="subheading"/>
</div>
<div class="work">
<ui:insert name="work"/>
</div>
<div class="controls">
<ui:insert name="controls"/>
</div>
</div>
</h:body>
</html>
|
这个测验向导的实现则如清单 4 所示：
清单 4. 向导 facelet (quizWizard/wizard.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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/wizardTemplate.xhtml">
<ui:define name="heading">
<ui:include src="heading.xhtml"/>
</ui:define>
<ui:define name="subheading">
<ui:include src="question.xhtml"/>
</ui:define>
<ui:define name="work">
<ui:include src="choices.xhtml"/>
</ui:define>
<ui:define name="controls">
<ui:include src="controls.xhtml"/>
</ui:define>
</ui:composition>
|
模板都相当简单。它们插入由视图定义的页面的某些部分。在本例中， 内所示的模板插入的是由 内的视图所定义的 heading、subheading、work 和 controls 节。在模板内封装视图的常见特性会让创建新视图更为简便 — 在本例中，就是新类型的向导。
清单 5 显示了这个测验向导的 heading 节：
清单 5. heading (quizWizard/heading.xhtml)1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<div class="heading">
#{msgs.quizTitle}
</div>
</ui:composition>
|
清单 6 显示了 subheading 节：
清单 6. subheading (quizWizard/question.xhtml) 1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.or g/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGrid columns="1" id="question">
#{wizard.cursor+1}. #{questions[wizard.cursor].question}?
</h:panelGrid>
</ui:composition>
|
视图抽象模板让您能够封装视图的一些共有特性，让您得以重点关注于视图之间的变化。比如，这个向导模板就提供了窗口标题、样式表以及 — 通过 <div> 元素 — 每个视图的整体结构。正是由于对共有特性的封装，您才可以通过简单地插入页面的各个部分来轻松实现新的视图。
这个向导模板定义了视图的结构，却没有定义外观。外观被进一步封装在 CSS 内，为您提供了另一个层次的修改视图的基本模板的自由。
内的 heading 显示了这次测验的标题，在本例中标题是 Science Quiz，而 内的 subheading 则显示了问题。 内引用的 wizard.cursor 是一个指向当前问题的游标（如果您愿意，也可称之为索引）。该游标的基数为零，所以 #{wizard.cursor+1} 显示的将是题号，而 #{questions[wizard.cursor].question} 显示的是问题。
完成了这些需要提前进行的准备（比如服务器端 bean 和模板）后，我接下来将向您展示一些真正有趣的东西了：此向导的 Ajax 是如何实现的，以及此向导是如何使用 CDI 的。先从 Ajax 开始。 |
|
|
|
|
|
