JSF 向导 用 JSF 2 和 CDI 实现一个向导-4
|
- UID
- 1066743
|
JSF 向导 用 JSF 2 和 CDI 实现一个向导-4
Ajax此测验向导内的所有用户交互都会导致 Ajax 调用，当这些调用返回时，只呈现页面的适当部分。Ajax 调用所做的一件事情就是控制此向导按钮的启用状态。图 5 显示了在第一个问题和第二个问题期间，此向导按钮的启用状态：
图 5. 测验向导的按钮 这个向导的 Ajax 被整齐地封装在两个 facelet 文件内。清单 7 显示了 choices.xhtml：
清单 7. 选项1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:form id="choices">
<h:panelGrid columns="2">
<h:selectOneRadio value="#{questions[wizard.cursor].answer}"
layout="pageDirection">
<f:selectItems value="#{questions[wizard.cursor].choices}"/>
<f:ajax render=":buttons"/>
</h:selectOneRadio>
</h:panelGrid>
</h:form>
</ui:composition>
|
当用户选择一个单选按钮时，JSF 就会向服务器进行一次 Ajax 调用并会在一个 backing-bean 属性内记录这次单选按钮的选择（问题的答案）。当调用返回时，JSF 就会更新向导的按钮。
清单 8 显示了 controls.xhtml：
清单 8. 控件 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
| <!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:form id="buttons">
<h:panelGrid columns="4" styleClass="wizardControls">
<f:ajax render=":question :choices buttons">
<h:commandButton id="next"
styleClass="wizardButton"
value="#{msgs.nextButtonText}"
disabled="#{not wizard.nextButtonEnabled}"/>
actionListener="#{wizard.nextButtonClicked}"/>
<h:commandButton id="previous"
styleClass="wizardButton"
value="#{msgs.previousButtonText}"
disabled="#{not wizard.previousButtonEnabled}"
actionListener="#{wizard.previousButtonClicked}"/>
</f:ajax>
<h:commandButton id="finish"
styleClass="wizardButton"
value="#{msgs.finishButtonText}"
disabled="#{not wizard.finishButtonEnabled}"
action="#{wizard.end}"/>
</h:panelGrid>
</h:form>
</ui:composition>
|
当用户单击 Next 或 Previous 按钮时，JSF 就会向服务器进行一次 Ajax 调用，并且当此 Ajax 调用返回时，JSF 就会更新问题、问题的选择（单选按钮）以及按钮本身。
Finish 按钮不是一个 Ajax 按钮，因为单击它会导航到 done 页面。
请注意清单 和 中对 wizard bean 有很多引用。该 bean 实际上是这个测验向导的一个控制器。我在本文结束之前来介绍一下这个 bean。 |
|
|
|
|
|
