读《JavaServer Faces 核心编程（第3版）》一书的记录—— 第 5 章 Facelets——案例 planets

All +All -
planets

+
-本章阅读说明

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

+
-第一步：创建案例

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

+
-第二步：运行案例

在IDE中运行该案例

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

web

+
-1，页面文件

earth.xhtml
……
venus.xhtml
sections

login

header.xhtml
sidebarLeft.xhtml

planetarium

header.xhtml
sidebarLeft.xhtml

templates

masterLayout.xhtml

2，资源文件

resources

样式表资源：css

styles.css

图像资源：images

Earth.gif
……
Venus.gif

3，WEB-INF

自定义标签资源：tags

corejsf

planet.xhtml

应用程序配置文件：web.xml
CDI配置文件：beans.xml
JSF配置文件：faces-config.xml
标签库文件：corejsf.taglib.xml
corejsf-facelets-tags.xml

源包src

com.corejsf

类：Planetarium.java
类：User.java
消息包：messages.properties

库

JDK 1.7
GlassFish Server 3.1.2

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

第一层面：视图

页面文件

首页：login.xhtml

*窗口标题显示内容：Welcome to the Planetarium

欢迎来到Planetarium（天文馆）

*页眉显示内容：Welcome to the Planetarium
*页面左边（左侧边栏）

显示文本：Welcome to the Planetarium. Please log in.
显示图像：土星

*页面中间

登录用户名输入框
登录密码输入框
登录按钮

其它文件

略

第二层面：控制

页面控制器

User

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

1,name:String
2，password:String

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

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

数据控制器

User

第三层面：模型

“用户”对象模型

User

第四层面：配置

应用程序配置：web.xml

*欢迎文件

<welcome-file-list>

<welcome-file>faces/login.xhtml</welcome-file>

</welcome-file-list>

*上下文参数

对自定义标签库的配置：

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value>/WEB-INF/corejsf.taglib.xml</param-value>

</context-param>

标签库文件：corejsf.taglib.xml
标签文件：corejsf-facelets-tags.xml

+
-新功能重点总结

*Facelets模板

1，模板文件

masterLayout.xhtml
允许替代的部分

标签：ui:insert
指定允许替代部分的名称，使用特性name

例如：name="windowTitle"

2，模板使用

该项目中web根目录下的后缀为xhtml的页面文件中都使用了这个模板
使用模板的标签

ui:compostion

指定模板文件的特性

template="/templates/masterLayout.xhtml"

替代模板中允许替代部分

使用标签：ui:define
指定要替代的那个部分的名称，使用特性name

例如：name="windowTitle"

+
-*自定义标签

1，标签文件

*文件名称

planet.xhtml

*文件位置

WEB-INF文件夹下

2，标签库文件

*文件名称

corejsf.taglib.xhtml

*文件位置

WEB-INF文件夹下

*文件要求

以taglib.xhtml为后缀

3，自定义标签的使用

*在web.xml中指定标签库文件的位置

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value>/WEB-INF/corejsf.taglib.xml</param-value>

</context-param>

*使用该标签的页面文件

sections\planetarium\sidebarLeft.xhtml

*使用自定义标签的页面设计

*添加名称空间声明

xmlns:corejsf="http://corejsf.com/facelets"

*标签形式

corejsf:planet

*指定特性name值

例如：name="mercury"

*指定特性image值

例如：image="#{resource['images:Mercury.gif']}"

4，关于新功能的实现技术，参见下一节 第五步：详解新技术

+
-第五步：详解新技术(Facelets)

+
-第一层面：视图

视图模板

masterLayout.xhtml

1，可替换的部分

应用标签：ui:insert
指定可替换部分的名称时，使用特性：name
可替换部分有

*窗口标题

<ui:insert name="windowTitle"/>

*页面眉部

<ui:insert name="heading">

*页面左侧边栏

<ui:insert name="sidebarLeft">

*页面主内容

<ui:insert name="content"/>

2，添加另一个文件

应用标签：ui:include
指定要包含文件的路径，使用特性：src
包含文件的地方有

*页面眉部

<ui:include src="/sections/planetarium/header.xhtml"/>

*页面左侧边栏

<ui:include src="/sections/planetarium/sidebarLeft.xhtml"/>

*有关包含的文件请参考“视图片段”一节

3，该模板包含页面标签

*html
*head
*title
*body

视图片段（组合）

组合文件理解

1，它是一个xhtml文件片段

*它使用了 标签ui:composition
*却不使用模板，即不使用特性template指定模板

2，在编译和运行时，标签ui:compotion外部的所有标签都将被移除，其余内容被组合在所在的页面文件中

组合文件

/sections/login/header.xhtml
/sections/planetarium/header.xhtml
/sections/login/sidebarLeft.xhtml
/sections/planetarium/sidebarLdft.xhtml
/WEB-INF/tags/corejsf/planet.xhtml

它是作为自定义标签的模板组合文件而设计的
其中包含一个“命名链接”组件

子组件是一个图像组件

使用了后台bean Planetarium
包含二个变量

name

用来设置一个标签名称

image

用来设置一个标签图像文件

使用了组合文件的文件

login.xhtml
masterLayout.xhtml

使用了自定义标签的文件

/sections/planetarium/sidebarLdft.xhtml

视图文件

login.xhtml

*为了使用Facelets标签

添加了名称空间声明：

xmlns:ui="http://java.sun.com/jsf/facelets"

*为了应用模板

1，使用组合标签ui:composition，例如：

ui:composition

2，使用特性template来加载模板文件：

template="/templates/masterLayout.xhtml"

3，使用子标签ui:insert来指定可变部分（可插入内容的地方）：

ui:define name="windowTitle"
ui:define name="heading"
ui:define name="sidebarLeft"
ui:define name="content"

视图资源

JSF2.0资源规定目录：resource
存放资源文件的子目录：css
级联样式表

styles.css

+
-第二层面：控制

页面控制器

User

*在login.xhtml页面中使用

Planetarium

*在planet.xhtml页面中使用

#该文件作为一个页面片段被使用
#当单击该片段时，激活了其中的“命令链接”组件

把特性name的值传给后台bean：planetarium，通过方法：changePlanet（）

例如：<h:commandLink action="#{planetarium.changePlanet(name)}">

把css设置为planetImage或planetImageSelected，根据传来的name值，通过方法：getSelectedPlanet（）

例如：<div class='#{name == planetarium.selectedPlanet ? "planetImageSelected" : "planetImage"}'>

数据控制器

User
Planetarium

+
-第三层面：模型

+
-对象模型

User
Planetarium

+
-第四层面：配置

配置自定义标签文件

1，标签配置文件：corejsf-facelets-tags.xml

2，标签库文件：corejsf.taglib.xml

（1）定义标签的名称空间

例如：<namespace>http://corejsf.com/facelets</namespace>

（2）定义每个标签的名称

例如：<tag-name>planet</tag-name>

（3）定义每个标签对应的模板文件的位置

例如：<source>tags/corejsf/planet.xhtml</source>

3，在应用程序配置文件web.xml中，指定该标签库文件的位置：

<context-param>

<param-name>facelets.LIBRARIES</param-name>

<param-value>/WEB-INF/corejsf.taglib.xml</param-value>

</context-param>

*它是属于上下文参数
*参数名称：facelets.LIBRARIES
*参数值：是标签库文件相对于根目录的全路径

+
-第五层面：国际化

英文消息文件

com.corejsf.messages.properties

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