首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

JSF 向导 用 JSF 2 和 CDI 实现一个向导-3

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>  
    <hutputStylesheet 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 开始。
返回列表