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
- + -*当3个文本框都没有输入内容时,点击按钮
- + -第三步:阅读案例结构
- + -第一层面:视图
- + -页面文件
- index.xhtml
- + -页面资源
- + -文件夹:resource
- + -子文件夹:css
- styles.css
- + -子文件夹:javascript
- checkPassword.js
- + -子文件夹:css
- + -文件夹:resource
- + -页面文件
- + -第二层面:控制
- 无
- + -第三层面:模型
- 无
- + -第四层面:配置
- 无新内容
- + -第一层面:视图
- + -第四步:阅读案例功能
- + -第一层面:视图
- + -页面文件
- + -index
- + -*标签:h:outputStylesheet
- + -特性:library
- 指定css文件所在的子文件夹名称
- + -特性:name
- 指定css文件名称
- + -特性:library
- + -*标签:h:outputScript
- + -特性:library
- 指定js文件所在的子文件夹名称
- + -特性:name
- 指定js文件名称
- + -特性:library
- + -*标签:h:inputSecret
- + -特性:id
- 组件的标识
- 默认由JSF实现生成
- + -特性:id
- + -*标签:h:panelGrid
- + -特性:columns
- 指定模板网格的列数
- 默认为1列
- + -特性:columns
- + -*标签:h:commandButton
- + -特性:type
- 指定按钮的类型为:button
- 默认为:submit
- + -特性:onclick
- 指定按钮上的“点击”事件激活的功能方法,这里是js脚本语言的一个函数
- + -特性:type
- + -*标签:h:outputStylesheet
- + -index
- + -页面文件
- + -第二层面:控制
- + -页面控制器
- 无
- + -数据控制器
- 无
- + -页面控制器
- + -第三层面:模型
- 无
- + -第四层面:配置
- 无新内容
- 发现新功能
- *脚本语言Javascript及其应用
- + -第一层面:视图
- + -第五步:案例中使用的新技术
- + -第一层面:视图
- + -视图文件
- + -index.xhtml
- *应用了面板网格组件h:panelGrid,来实现其内部的组件布局
- *应用了组件特性columnClasses,来指定组件中列的css类
- *应用组件特性id,来指定组件的标识,这里方便js文件中对组件的引用
- *应用组件特性type,来指定该按钮的类型是“普通按钮”而不是默认的“提交按钮”
- *应用组件特性onclick,来指定单击该组件时要激活的js函数,由该函数来处理该事件
- + -index.xhtml
- + -web page 资源
- + -文件夹resource
- *该文件夹的位置和名称是默认的
- *对应于标签h:outputStylesheet和h:outputScript来说,该文件夹的位置和名称是固定不变的
- + -文件夹css和javascript
- *文件夹的位置在resource下是不变的
- *文件夹的名称在resource下是可变的,因为它们由标签特性library来指定
- *文件夹下的文件后缀是对应的
- + -文件夹resource
- + -视图文件
- + -第二层面:控制
- 无
- + -第三层面:模型
- 无
- + -第四层面:配置
- 无新内容
- + -第一层面:视图