读《JavaServer Faces 核心编程（第3版）》一书的记录—— 第 6 章 数据库——案例 editing

All +All -
editing

+
-本章阅读说明

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，资源文件

无

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，从运行结果看新内容

*窗口标题显示内容：Editing Table Cells

编辑表单元格

*页面主体内容

一个数据表格（3列）

3个列头

文本分别为：Edit 、Last Name、First Name

字体风格：黑体

4行数据表内容

每行分为3列

第1列是“单个复选框”
第2、3列是“显示文本”

1个按钮

显示文本：Save Changes

是个提交按钮

2，从页面文件index.xhtml看（新内容）

*1个“数据表”组件

标签：h:dataTable
特性

*迭代的数据由特性value指定：value="#{tableData.names}"
*迭代数据中的每个项由特性var指定：var="name"

子组件

1，第1列

*列标签：h:column
*嵌套子组件

一个“面”组件

标签：f:facet
属性

名称属性：name="header"

嵌套子组件

*“输出文本”组件

标签：h:outputText

为输出文本组件

属性

value='#{msgs.editColumn}'

为指定输出文本的内容

style="font-weight: bold"

为指定输出文本的风格

*“单个复选框”组件

标签：h:selectBooleanCheckbox
属性

value

用来指定组件的boolean值
默认值为：false

onclick

用来指定单击组件时执行的js代码

这里是js的submit()

2，第2列

*列标签：h:column
*嵌套子组件

一个“面”组件

标签：f:facet
属性

名称属性：name="header"

嵌套子组件

*“输出文本”组件

标签：h:outputText

为输出文本组件

属性

value='#{msgs.editColumn}'

为指定输出文本的内容

style="font-weight: bold"

为指定输出文本的风格

*“单个复选框”组件

标签：h:selectBooleanCheckbox
属性

value

用来指定组件的boolean值
默认值为：false

onclick

用来指定单击组件时执行的js代码

这里是js的submit()

*“输出文本”组件

标签：h:outputText
属性

value

用来指定组件的值

rendered

用来指定组件显示与否
默认为true

*“输入文本”组件

标签：h:inputText
属性

value

用来指定组件的值

rendered

用来指定组件显示与否
默认为true

3，第3列

*列标签：h:column
*嵌套子组件

一个“面”组件

标签：f:facet
属性

名称属性：name="header"

嵌套子组件

*“输出文本”组件

标签：h:outputText

为输出文本组件

属性

value='#{msgs.editColumn}'

为指定输出文本的内容

style="font-weight: bold"

为指定输出文本的风格

*“单个复选框”组件

标签：h:selectBooleanCheckbox
属性

value

用来指定组件的boolean值
默认值为：false

onclick

用来指定单击组件时执行的js代码

这里是js的submit()

*“输出文本”组件

标签：h:outputText
属性

value

用来指定组件的值

rendered

用来指定组件显示与否
默认为true

*“输入文本”组件

标签：h:inputText
属性

value

用来指定组件的值

rendered

用来指定组件显示与否
默认为true

*一个“按钮”组件

标签：h:commandButton

称为“命令按钮”

特性

vlaue

用来指定组件的值（即显示文本）

action

用来指定激活该组件时所调用的表达式
该表达式必须是一个求值的、无参数的公有方法
该方法返回值必须是一个String类型
该返回值作为应用程序的导航字符串之用

说明

该组件处在“表单”内部，在“数据表”之后
作用是提交表单

第二层面：控制

页面控制器

TableData

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

1，names:Name[]

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

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

数据控制器

TableData

第三层面：模型

对象模型

Name

*对象属性

1，first:String
2，last:String
3，editable:boolean

*对象行为

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

第四层面：配置

无新内容

新功能重点总结

*在数据表的姓名列前，增加了一列。

该列的“列头”文本为：Edit
该列在每行中列出了“复选框”组件

该复选框默认值为false，即显示为未选状态

*在名字列中放置了两个组件h:outputText和inputText

当处于未选择状态时，该行的名字列就显示为不可编辑的输出文本组件
当处于选择状态时，该行的名字列就改为“可编辑”的输入文本组件

*在数据表后增加了提交按钮，以便进行程序导航

第五步：详解新技术(可编辑单元格)的应用

第一层面：视图

视图文件

index.xhtml

*为了选择每行单元格的可编辑性

1，在名字前添加了一个列
2，列中嵌套一个复选框组件

*为了使名字列具备可编辑和不可编辑两个状态

1，用输出文本组件来表现不可编辑状态时之用
2，用输入文本组件来提供可编辑状态时之用

*为了使名字的可编辑状态能够按行选择，并立即改变

1，设置复选框组件上的onclick特性的值为submit()

就是说，当单击复选框时，可以立即提交表单

视图资源

resources

css

styles.css

第二层面：控制

页面控制器

TableData

*在index.xhtml页面中使用

对象名称为：tableData

对象的方法getNames()返回值，作为“数据表”组件的特性value的值：

value="#{tableData.names}"

对象的方法save()，把各个名字的可编辑状态均设置为不可编辑

数据控制器

TableData

通过方法getNames()操作（获取）对象模型Name的对象数组:

public Name[] getNames() {

return names;

}

通过方法save()操作对象模型Name的可编辑状态：

public String save() {

for (Name name : names) {

name.setEditable(false);

}

return null;

}

第三层面：模型

对象模型

Name

*属性

first:String
last:String
editable:boolean

为了读写名字的可编辑状态

*方法

属性对应的读写方法

构造方法，具有上述两个属性对应的参数：

public Name(String first, String last) {

this.first = first;

this.last = last;

}

+
-第四层面：配置

无新内容

+
-第五层面：国际化

英文消息文件

com.corejsf.messages.properties

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