读《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
    • 注意：这里不讨论太多国际化问题，它超出了该案例的主要问题