headersAndFooters
- + -本章阅读说明
- 1,第一步、第二步的内容适合于那些没有读过该案例之前的章节读者,建议其他读者直接从第三步开始阅读
- 2,这里的读书记录,偏重于该案例在书中想要说明的知识点,而不是把前面章节没有涉及的内容都作为新知识点
- 3,建议阅读者,能够对照第四步中的内容,写出该案例的功能设计说明书
- 4,建议阅读者,能够对照第五步中的内容,写出该案例的功能实现方案
- 5,建议阅读者,能够动手在NetBeans 7.2(或其他IDE)中将该案例从头做一遍
- 6,本人在读书时,使用了思维导图(FreeMind)工具,如果有阅读者需要原型文档的,可qq联系:1028637037
- 7,该书是由美国 David Geary 和 Cay Horstmann 合著,由王超翻译,由《清华大学出版社》出版。如果您需要下载案例,可到出版社网址去。
- + -第一步:创建案例
- 使用随书源码在NetBeans中创建项目
- + -第二步:运行案例
- + -一,在IDE中运行该案例
- *启动首页面index.xhtml
- + -一,在IDE中运行该案例
- + -第三步:阅读案例结构
- web
- 1,页面文件
- index.xhtml
- 2,资源文件
- + -resources
- css
- styles.css
- css
- + -resources
- 3,WEB-INF
- 应用程序配置文件:web.xml
- CDI配置文件:beans.xml
- JSF配置文件:faces-config.xml
- 1,页面文件
- 源包src
- com.corejsf
- 类:Name.java
- 类:TableData.java
- 消息包:messages.properties
- com.corejsf
- 库
- JDK 1.7
- GlassFish Server 3.1.2
- web
- + -第四步:阅读案例新功能
- 第一层面:视图
- 页面文件
- 首页:index.xhtml
- 1,从运行结果看
- *窗口标题显示内容:Headers, Footers, and Captions
- 列头、列尾和标题
- *页面主体内容
- 1行文本:An array of names:
- 字体风格:斜体
- 一个表格(2列)
- 列头1:Last Name
- 字体风格:粗体
- 列头2:First Name
- 字体风格:粗体
- 4行西方人的姓名
- 每行分为2列
- 每列之间由英文的逗号“,”隔开
- 列尾1:[alpha]
- 列尾2:[alpha]
- 列头1:Last Name
- 1行文本:An array of names:
- *窗口标题显示内容:Headers, Footers, and Captions
- 2,从页面文件看(新内容)
- *1个“数据表”组件
- 标签:h:dataTable
- 特性
- *迭代的数据由特性value指定:value="#{tableData.names}"
- *迭代数据中的每个项由特性var指定:var="name"
- *数据表的标题的风格由特性captionStyle指定:captionStyle="font-size: 0.95em; font-style:italic"
- *数据表的整体风格由特性style指定:style="width: 250px;"
- 子组件
- 1,一个“面”组件
- 标签:f:facet
- *它是一个嵌套组件
- *它的父组件是:h:dataTable
- 特性
- *组件的名称由特性name来指定
- 即:name="caption"
- 表明该面组件的名称为“标题”
- 该标题的style由父标签特性captionStyle指定了
- *组件的名称由特性name来指定
- 组件的普通文本为:An Array of Names
- 标签:f:facet
- 2,一个“列”组件
- 标签:h:column
- *它是dataTable组件的子容器组件
- *它可以与header和footer facet一起用于链头和链尾
- *它的子组件用于显示或处理每一列中的数据
- 特性
- *headerClass
- 指定列头的css类
- *footerClass
- 指定列尾的css类
- *headerClass
- 子组件
- *一个“面”组件
- 其标签:f:facet
- 用特性name指定该组件的名称为“列头”:name="header"
- 文本:#{msgs.lastnameColumn}
- *一个文本
- 由迭代数据表的元素变量name访问其属性last的值来获取:#{name.last},后面添加一个逗号
- *一个“面”组件
- 其标签:f:facet
- 用特性name指定该组件的名称为列尾:name="footer"
- 文本:#{msgs.alphanumeric}
- *一个“面”组件
- 标签:h:column
- 3,一个“列”组件
- 标签:h:column
- *它是dataTable组件的子容器组件
- *它可以与header和footer facet一起用于链头和链尾
- *它的子组件用于显示或处理每一列中的数据
- 特性
- *headerClass
- 指定列头的css类
- *footerClass
- 指定列尾的css类
- *headerClass
- 子组件
- *一个“面”组件
- 其标签:f:facet
- 用特性name指定该组件的名称为“列头”:name="header"
- 文本:#{msgs.firstnameColumn}
- *一个文本
- 由迭代数据表的元素变量name访问其属性last的值来获取:#{name.first}
- *一个“面”组件
- 其标签:f:facet
- 用特性name指定该组件的名称为列尾:name="footer"
- 文本:#{msgs.alphanumeric}
- *一个“面”组件
- 标签:h:column
- 1,一个“面”组件
- *2个数据表的“数据列”组件
- 作为数据表组件的子组件来使用
- 标签:h:column
- 用来显示数据表的一个列
- *1个“数据表”组件
- 1,从运行结果看
- 首页:index.xhtml
- 页面文件
- 第二层面:控制
- 页面控制器
- TableData
- *对应页面JSF HTML组件的属性
- 1,names:Name[]
- *对应页面JSF HTML组件的方法
- 1,对应于上述属性的读方法getNames():Name[]
- *对应页面JSF HTML组件的属性
- TableData
- 数据控制器
- TableData
- 页面控制器
- 第三层面:模型
- 对象模型
- Name
- *对象属性
- 1,first:String
- 2,last:String
- *对象行为
- 1,对应上述属性的读写方法
- *对象属性
- Name
- 对象模型
- 第四层面:配置
- 无新内容
- 新功能重点总结
- *利用数据表的特性captionStyle指定标题风格
- *利用数据表的特性style指定整个表的风格
- *利用JSF的核心库的“面”组件facet,嵌套在数据表组件中
- 作为该数据表的“标题”
- 并使用其特性name指定该组件的名称:name="caption"
- 该特性的值采用caption,是为了呼应父组件“数据表”的特性captionStyle
- 标签内容为可显示的普通文本,这里作为数据表的标题
- *利用数据表的列组件的特性headerClass指定列头的css类
- *利用数据表的列组件的特性footerClass指定列尾的css类
- *利用JSF的核心库的“面”组件facet,嵌套在数据表的列组件中
- 作为该列的“列头”
- 使用其特性name指定该组件的名称:name="header"
- 该特性的值采用header,是为了呼应父组件“列”的特性headerClass
- *利用JSF的核心库的“面”组件facet,嵌套在数据表的列组件中
- 作为该列的“列尾”
- 使用其特性name指定该组件的名称:name="footer"
- 该特性的值采用header,是为了呼应父组件“列”的特性footerClass
- 第一层面:视图
- + -第五步:详解新技术(数据表)的应用
- + -第一层面:视图
- + -视图文件
- + -index.xhtml
-
*为了使用一个数据表,应用一个数据表标签h:dataTable迭代数据来创建HTML表格
*为了指定数据表中使用的数据,应用数据表标签的特性value的值来指定
- 例如:value="#{tableData.names}"
- 特性value的值可以是
- 一个Java对象
- 或一个数组
- 或java.util.List的实例
- 或java.sql.ResultSet的实例
- 或javax.servlet.jsp.jstl.sql.Result的实例
- 或javax.faces.model.DataModel的实例
*为了迭代数据表中使用数据的每一项,应用数据表标签的特性var的值来指定
- 例如:var="name"
*为了在数据报表中嵌套一个标题,并且使该标题的css风格能够在其父组件数据表的特性中设定
- 1,使用核心组件:f:facet
- 2,并且指定该组件名称为caption:name="caption"
*为了显示数据表中数据的每一项的各个列,应用数据表标签的子标签h:column
*为了在列中设定列头和列尾的css风格
- 1,应用特性headerClass指定列头的css类
- 2,应用特性footerClass指定列尾的css类
*为了在列中嵌套一个列头组件,使用组件f:facet
*为了使用列组件中列头特性指定的值,指定组件 f:facet 的特性 name 的值为“header”
*为了在列中嵌套一个列尾组件,使用组件f:facet
*为了使用列组件中列尾特性指定的值,指定组件 f:facet 的特性 name 的值为“footer”
-
- + -index.xhtml
- + -视图资源
- resources
- css
- styles.css
- css
- resources
- + -视图文件
- + -第二层面:控制
- 页面控制器
- + -TableData
- + -*在index.xhtml页面中使用
-
对象名称为:tableData
对象的方法getNames()返回值,作为“数据表”组件的特性value的值:
value="#{tableData.names}"
-
- + -*在index.xhtml页面中使用
- + -TableData
- 数据控制器
- + -TableData
-
通过方法getNames()操作(获取)对象模型Name的对象数组:
public Name[] getNames() {
return names;
}
-
- + -TableData
- 页面控制器
- + -第三层面:模型
- + -对象模型
- + -Name
- *属性
- first:String
- last:String
- *方法
-
属性对应的读写方法
构造方法,具有上述两个属性对应的参数:
public Name(String first, String last) {
this.first = first;
this.last = last;
}
-
- *属性
- + -Name
- + -对象模型
- + -第四层面:配置
- 无新内容
- + -第五层面:国际化
- 英文消息文件
- com.corejsf.messages.properties
- 注意:这里不讨论太多国际化问题,它超出了该案例的主要问题
- 英文消息文件
- + -第一层面:视图