读《JavaServer Faces 核心编程（第3版）》一书的记录—— 第 4 章 标准 JSF 标签——案例 javascript

All +All -

javascript

• + -第一步：创建案例
  • 使用随书源码在NetBeans中创建项目
• + -第二步：运行案例
  • 在IDE中运行该案例
  • 案例默认打开的首页页面是index.xhtml
  • + -首页上显示的内容
    • + -*页面标题
      • Accessing Form Elements with JavaScript
    • + -*文本组件
      • Name：
      • Password：
      • Confirm Password：
    • + -*按钮组件
      • 其文本为：Submit Form
    • + -*输入文本框组件
      • 文本Name对应的
      • 文本Password对应的
      • 文本Confirm Password对应的
  • + -对首页的操作记录
    • + -*当3个文本框都没有输入内容时，点击按钮
      • 无反应
    • + -*当在第1个文本框中输入用户名（任意合法字符）时，点击按钮
      • 无反应
    • *当在第1个文本框中输入用户名，第2个文本框中输入用户密码（任意合法字符）时，点击按钮
    • + -*当在第1个文本框中输入用户名，
           在第2个文本框中输入用户密码，
           在第3个文本框中输入用户相同密码时，点击按钮
      • 第1个文本框内容（用户名）保留不变
      • 第2、3个文本框内容清空
    • + -*当在第1个文本框中输入用户名，
           在第2个文本框中输入用户密码，
           在第3个文本框中输入与上面用户密码不相同的字符时，点击按钮
      • 弹出对话框
      • 对话框的文本内容是：
        Password and password confirm fields don't match
• + -第三步：阅读案例结构
  • + -第一层面：视图
    • + -页面文件
      • index.xhtml
    • + -页面资源
      • + -文件夹：resource
        • + -子文件夹：css
          • styles.css
        • + -子文件夹：javascript
          • checkPassword.js
  • + -第二层面：控制
    • 无
  • + -第三层面：模型
    • 无
  • + -第四层面：配置
    • 无新内容
• + -第四步：阅读案例功能
  • + -第一层面：视图
    • + -页面文件
      • + -index
        • + -*标签：h:outputStylesheet
          • + -特性：library
            • 指定css文件所在的子文件夹名称
          • + -特性：name
            • 指定css文件名称
        • + -*标签：h:outputScript
          • + -特性：library
            • 指定js文件所在的子文件夹名称
          • + -特性：name
            • 指定js文件名称
        • + -*标签：h:inputSecret
          • + -特性：id
            • 组件的标识
            • 默认由JSF实现生成
        • + -*标签：h:panelGrid
          • + -特性：columns
            • 指定模板网格的列数
            • 默认为1列
        • + -*标签：h:commandButton
          • + -特性：type
            • 指定按钮的类型为：button
            • 默认为：submit
          • + -特性：onclick
            • 指定按钮上的“点击”事件激活的功能方法，这里是js脚本语言的一个函数
  • + -第二层面：控制
    • + -页面控制器
      • 无
    • + -数据控制器
      • 无
  • + -第三层面：模型
    • 无
  • + -第四层面：配置
    • 无新内容
  • 发现新功能
    • *脚本语言Javascript及其应用
• + -第五步：案例中使用的新技术
  • + -第一层面：视图
    • + -视图文件
      • + -index.xhtml
        • *应用了面板网格组件h:panelGrid，来实现其内部的组件布局
        • *应用了组件特性columnClasses，来指定组件中列的css类
        • *应用组件特性id，来指定组件的标识，这里方便js文件中对组件的引用
        • *应用组件特性type，来指定该按钮的类型是“普通按钮”而不是默认的“提交按钮”
        • *应用组件特性onclick，来指定单击该组件时要激活的js函数，由该函数来处理该事件
    • + -web page 资源
      • + -文件夹resource
        • *该文件夹的位置和名称是默认的
        • *对应于标签h:outputStylesheet和h:outputScript来说，该文件夹的位置和名称是固定不变的
      • + -文件夹css和javascript
        • *文件夹的位置在resource下是不变的
        • *文件夹的名称在resource下是可变的，因为它们由标签特性library来指定
        • *文件夹下的文件后缀是对应的
  • + -第二层面：控制
    • 无
  • + -第三层面：模型
    • 无
  • + -第四层面：配置
    • 无新内容