JSF 2 简介: JSF 向导
2010-08-26 00:00:00 来源：WEB开发网这个向导模板定义了视图的结构，却没有定义外观。外观被进一步封装在 CSS 内，为您提供了另一个层次的修改视图的基本模板的自由。
清单 5 内的 heading 显示了这次测验的标题，在本例中标题是 Science Quiz，而 清单 6 内的 subheading 则显示了问题。清单 6 内引用的 wizard.cursor 是一个指向当前问题的游标（如果您愿意，也可称之为索引）。该游标的基数为零，所以 #{wizard.cursor+1} 显示的将是题号，而 #{questions[wizard.cursor].question} 显示的是问题。
完成了这些需要提前进行的准备（比如服务器端 bean 和模板）后，我接下来将向您展示一些真正有趣的东西了：此向导的 Ajax 是如何实现的，以及此向导是如何使用 CDI 的。先从 Ajax 开始。
Ajax
此测验向导内的所有用户交互都会导致 Ajax 调用，当这些调用返回时，只呈现页面的适当部分。Ajax 调用所做的一件事情就是控制此向导按钮的启用状态。图 5 显示了在第一个问题和第二个问题期间，此向导按钮的启用状态：
图 5. 测验向导的按钮
查看原图（大图）
这个向导的 Ajax 被整齐地封装在两个 facelet 文件内。清单 7 显示了 choices.xhtml：
清单 7. 选项
<!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 2 简介: JSF 向导”更多相关内容
中查找“JSF 2 简介: JSF 向导”更多相关内容更多精彩
赞助商链接
