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
- login
- templates
- masterLayout.xhtml
- 2,资源文件
- resources
- 样式表资源:css
- styles.css
- 图像资源:images
- Earth.gif
- ……
- Venus.gif
- 样式表资源:css
- resources
- 3,WEB-INF
- 自定义标签资源:tags
- corejsf
- planet.xhtml
- corejsf
- 应用程序配置文件:web.xml
- CDI配置文件:beans.xml
- JSF配置文件:faces-config.xml
- 标签库文件:corejsf.taglib.xml
- corejsf-facelets-tags.xml
- 自定义标签资源:tags
- + -1,页面文件
- 源包src
- com.corejsf
- 类:Planetarium.java
- 类:User.java
- 消息包:messages.properties
- com.corejsf
- 库
- JDK 1.7
- GlassFish Server 3.1.2
- web
- + -第四步:阅读案例新功能
- 第一层面:视图
- 页面文件
- 首页:login.xhtml
- *窗口标题显示内容:Welcome to the Planetarium
- 欢迎来到Planetarium(天文馆)
- *页眉显示内容:Welcome to the Planetarium
- *页面左边(左侧边栏)
- 显示文本:Welcome to the Planetarium. Please log in.
- 显示图像:土星
- *页面中间
- 登录用户名输入框
- 登录密码输入框
- 登录按钮
- *窗口标题显示内容:Welcome to the Planetarium
- 其它文件
- 略
- 首页:login.xhtml
- 页面文件
- 第二层面:控制
- 页面控制器
- User
- *对应页面JSF HTML组件的属性
- 1,name:String
- 2,password:String
- *对应页面JSF HTML组件的方法
- 1,对应于上述属性的读写方法
- *对应页面JSF HTML组件的属性
- User
- 数据控制器
- 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
- 应用程序配置:web.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,模板文件
- + -*自定义标签
- 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']}"
- *添加名称空间声明
- *在web.xml中指定标签库文件的位置
- 4,关于新功能的实现技术,参见下一节 第五步:详解新技术
- 1,标签文件
- *Facelets模板
- 第一层面:视图
- + -第五步:详解新技术(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,可替换的部分
- masterLayout.xhtml
- 视图片段(组合)
- 组合文件理解
- 1,它是一个xhtml文件片段
- *它使用了 标签ui:composition
- *却不使用模板,即不使用特性template指定模板
- 2,在编译和运行时,标签ui:compotion外部的所有标签都将被移除,其余内容被组合在所在的页面文件中
- 1,它是一个xhtml文件片段
- 组合文件
- /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
- 用来设置一个标签图像文件
- name
- 使用了组合文件的文件
- 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"
-
-
- login.xhtml
- 视图资源
- 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"}'>
-
- 把特性name的值传给后台bean:planetarium,通过方法:changePlanet()
- *在planet.xhtml页面中使用
- User
- 数据控制器
- 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
- *参数值:是标签库文件相对于根目录的全路径
- (1)定义标签的名称空间
-
- 配置自定义标签文件
- + -第五层面:国际化
- 英文消息文件
- com.corejsf.messages.properties
- 注意:这里不讨论太多国际化问题,它超出了该案例的主要问题
- 英文消息文件
- + -第一层面:视图