java 创建 Header

All + All -

headersAndFooters

• + -本章阅读说明

• 1，第一步、第二步的内容适合于那些没有读过该案例之前的章节读者，建议其他读者直接从第三步开始阅读
• 2，这里的读书记录，偏重于该案例在书中想要说明的知识点，而不是把前面章节没有涉及的内容都作为新知识点
• 3，建议阅读者，能够对照第四步中的内容，写出该案例的功能设计说明书
• 4，建议阅读者，能够对照第五步中的内容，写出该案例的功能实现方案
• 5，建议阅读者，能够动手在NetBeans 7.2（或其他IDE）中将该案例从头做一遍
• 6，本人在读书时，使用了思维导图（FreeMind）工具，如果有阅读者需要原型文档的，可qq联系：1028637037
• 7，该书是由美国 David Geary 和 Cay Horstmann 合著，由王超翻译，由《清华大学出版社》出版。如果您需要下载案例，可到出版社网址去。

• + -第一步：创建案例

• 使用随书源码在NetBeans中创建项目

• + -第二步：运行案例

• + -一，在IDE中运行该案例

• *启动首页面index.xhtml

• + -第三步：阅读案例结构

• web

• 1，页面文件

• index.xhtml

• 2，资源文件

• + -resources

• css

• styles.css

• 3，WEB-INF

• 应用程序配置文件：web.xml
• CDI配置文件：beans.xml
• JSF配置文件：faces-config.xml

• 源包src

• com.corejsf

• 类：Name.java
• 类：TableData.java
• 消息包：messages.properties

• 库

• JDK 1.7
• GlassFish Server 3.1.2

• + -第四步：阅读案例新功能

• 第一层面：视图

• 页面文件

• 首页：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]

• 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指定了

• 组件的普通文本为：An Array of Names

• 2，一个“列”组件

• 标签：h:column

• *它是dataTable组件的子容器组件
• *它可以与header和footer facet一起用于链头和链尾
• *它的子组件用于显示或处理每一列中的数据

• 特性

• *headerClass

• 指定列头的css类

• *footerClass

• 指定列尾的css类

• 子组件

• *一个“面”组件

• 其标签：f:facet
• 用特性name指定该组件的名称为“列头”：name="header"
• 文本：#{msgs.lastnameColumn}

• *一个文本

• 由迭代数据表的元素变量name访问其属性last的值来获取：#{name.last}，后面添加一个逗号

• *一个“面”组件

• 其标签：f:facet
• 用特性name指定该组件的名称为列尾：name="footer"
• 文本：#{msgs.alphanumeric}

• 3，一个“列”组件

• 标签：h:column

• *它是dataTable组件的子容器组件
• *它可以与header和footer facet一起用于链头和链尾
• *它的子组件用于显示或处理每一列中的数据

• 特性

• *headerClass

• 指定列头的css类

• *footerClass

• 指定列尾的css类

• 子组件

• *一个“面”组件

• 其标签：f:facet
• 用特性name指定该组件的名称为“列头”：name="header"
• 文本：#{msgs.firstnameColumn}

• *一个文本

• 由迭代数据表的元素变量name访问其属性last的值来获取：#{name.first}

• *一个“面”组件

• 其标签：f:facet
• 用特性name指定该组件的名称为列尾：name="footer"
• 文本：#{msgs.alphanumeric}

• *2个数据表的“数据列”组件

• 作为数据表组件的子组件来使用
• 标签：h:column
• 用来显示数据表的一个列

• 第二层面：控制

• 页面控制器

• TableData

• *对应页面JSF HTML组件的属性

• 1，names:Name[]

• *对应页面JSF HTML组件的方法

• 1，对应于上述属性的读方法getNames():Name[]

• 数据控制器

• TableData

• 第三层面：模型

• 对象模型

• Name

• *对象属性

• 1，first:String
• 2，last:String

• *对象行为

• 1，对应上述属性的读写方法

• 第四层面：配置

• 无新内容

• 新功能重点总结

• *利用数据表的特性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”

• + -视图资源

• resources

• css

• styles.css

• + -第二层面：控制

• 页面控制器

• + -TableData

• + -*在index.xhtml页面中使用

• 对象名称为：tableData
  对象的方法getNames()返回值，作为“数据表”组件的特性value的值：
  value="#{tableData.names}"

• 数据控制器

• + -TableData

• 通过方法getNames()操作（获取）对象模型Name的对象数组:
  public Name[] getNames() {
          return names;
  }

• + -第三层面：模型

• + -对象模型

• + -Name

• *属性

• first:String
• last:String

• *方法

• 属性对应的读写方法
  构造方法，具有上述两个属性对应的参数：
  public Name(String first, String last) {
          this.first = first;
          this.last = last;
      }

• + -第四层面：配置

• 无新内容

• + -第五层面：国际化

• 英文消息文件

• com.corejsf.messages.properties

• 注意：这里不讨论太多国际化问题，它超出了该案例的主要问题