课程提纲 口第一部分Java EE基础 口第二部分Java Web开发 口第三部分JSF框架 ◆第8章JSF组件等 JSF (JavaServer Faces) 口第四部分EJB 口第五部分JPA 口第六部分SSH框架 JavaEE:技术 ·1。西北农林科大学信息工程学院本科生课程
课程提纲 第一部分 Java EE基础 第二部分 Java Web开发 第三部分 JSF框架 ◆第8章 JSF组件等 JSF (JavaServer Faces) 第四部分 EJB 第五部分 JPA 第六部分 SSH框架 Java EE技术 •1 信息工程学院本科生课程
本讲目标 ~JSF UI组件、组件标签及其使用方法： ●UI组件类 ●HTML组件标签 ●core组件标签 JSF组件 ·2。西北农林升装大学信息工程学院本科生课程
❖ JSF UI组件、组件标签及其使用方法： ⚫ UI组件类 ⚫ HTML组件标签 ⚫ core组件标签 本讲目标 JSF组件 •2 信息工程学院本科生课程
UI组件类 。SF技术提供了一个丰富的、灵活的组件架构， 包括： ·一组UI Component?类，用于指定U川组件的状态和行为； ·一个呈现(render)模型，用来定义如何使用不同方法 呈现组件； 。一个事件(event)和监听器(listener)模型，定义 了如何处理组件事件； 。一个转换器(converter)模型，定义了如何在一个组 件上注册数据转换器； ,一个验证器(val idator)模型，定义了如何在一个组件 上注册验证器。 JSF组件 •3。西北农林科大学信息工程学院本科生课程
❖ JSF技术提供了一个丰富的、灵活的组件架构， 包括： • 一组UIComponent类，用于指定UI组件的状态和行为； • 一个呈现 (render) 模型，用来定义如何使用不同方法 呈现组件； • 一个事件 (event) 和监听器 (listener) 模型，定义 了如何处理组件事件； • 一个转换器 (converter) 模型，定义了如何在一个组 件上注册数据转换器； • 一个验证器 (validator)模型，定义了如何在一个组件 上注册验证器。 UI组件类 JSF组件 •3 信息工程学院本科生课程
HTML组件标签 标签 组件 功能 呈现的HTML 外观 col umn UICol umn 表示在U川Data组 在HTML table中的 table中 件中的一列数 一列数据 的一列 据 commandButton UICommand 将一个表单提交 HTML 元素， 其中type值可以 是submit, reset或者image commandL i nk 链接到另一页面 HTML元素 超链接 或者同一页面 的某位置 dataTable U川Data 用来封装一组数 HTML元素 可动态修 据 改的表 格 JSF组件 4。 品北农林升教大学信息工程学院本科生课程
标签 组件 功能 呈现的HTML 外观 column UIColumn 表示在UIData组 件中的一列数 据 在 HTML table中的 一列数据 table中 的一列 commandButton UICommand 将一个表单提交 给应用 HTML 元素， 其中type值可以 是submit， reset或者image 按钮 commandLink 链接到另一页面 或者同一页面 的某位置 HTML 元素 超链接 dataTable UIData 用来封装一组数 据 HTML 元素 可动态修 改的表 格 HTML组件标签 JSF组件 •4 信息工程学院本科生课程
HTML组件标签(2) 标签 组件 功能 呈现的HTML 外观 form UIForm 表示一输入表单 HTML元素 无显示 inputHidden UlInput 允许页面制作人员在 HTML 隐藏变量 元素 inputSecret 允许用户输入一个字 HTML 元素 的字符串 inputText 允许用户输入一个字 HTML 元素 inputTextarea 允许用户输入一个多 HTML 多行文本 行字符串 元素 域 JSF组件 •5。西北农林科教大学信息工程学院本科生课程
标签 组件 功能 呈现的HTML 外观 form UIForm 表示一输入表单 HTML 元素 无显示 inputHidden UIInput 允许页面制作人员在 页面中包含一个 隐藏变量 HTML 元素 无显示 inputSecret 允许用户输入一个字 符串而在文本域 中并不显示实际 的字符串 HTML 元素 密码域 inputText 允许用户输入一个字 符串 HTML 元素 文本域 inputTextarea 允许用户输入一个多 行字符串 HTML 元素 多行文本 域 HTML组件标签（2） JSF组件 •5 信息工程学院本科生课程
HTML组件标签（3) 标签 组件 功能 呈现的HTML 外观 outputFormat UlOutput 显示一个本地化的 纯文本 纯文本 消息 outputLabel 作为一个label为 HTML元 纯文本 一个特定的输 素 入域显示一个 嵌入的组件 outputLink 链接到另一个页面 HTML元素 超链接 或者同一页面 的某个位置， 但不产生动作 事件 outputText 显示一行文本 纯文本 纯文本 JSF组件 6。 品北农林升教大学信息工程学院本科生课程
标签 组件 功能 呈现的HTML 外观 outputFormat UIOutput 显示一个本地化的 消息 纯文本 纯文本 outputLabel 作为一个label为 一个特定的输 入域显示一个 嵌入的组件 HTML 元 素 纯文本 outputLink 链接到另一个页面 或者同一页面 的某个位置， 但不产生动作 事件 HTML 元素 超链接 outputText 显示一行文本 纯文本 纯文本 HTML组件标签（3） JSF组件 •6 信息工程学院本科生课程
HTML组件标签（4) 标签 组件 功能 呈现的HTML 外观 graphiclmage UIGraphic 显示一幅图像 HTML元素 一幅图像 message UIMessage 显示一个本地化的 HTML元素， 文本字符 消息 果使用了样 串 式 messages UIMessages 显示多个本地化的 组HTML〈span> 文本字符 消息 元素，如果使 串 用了样式 panelGrid UIPanel 显示一个table 带有和 表格 的HTML 元素 panel Group 将多个组件分为同 表格中的 一个父亲下的 行 一组 JSF组件 7。 西北农林科教大学信息工程学院本科生课程
标签 组件 功能 呈现的HTML 外观 graphicImage UIGraphic 显示一幅图像 HTML 元素 一幅图像 message UIMessage 显示一个本地化的 消息 HTML 元素， 如果使用了样 式 文本字符 串 messages UIMessages 显示多个本地化的 消息 一组HTML 元素，如果使 用了样式 文本字符 串 panelGrid UIPanel 显示一个table 带有和 的HTML 元素 表格 panelGroup 将多个组件分为同 一个父亲下的 一组 表格中的 行 HTML组件标签（4） JSF组件 •7 信息工程学院本科生课程
HTML组件标签（5) 标签 组件 功能 呈现的HTML 外观 selectltem UISelect 表示U川Se|ect0ne组 HTML 无显示 Item 件中列表的一项 元素 selectltems UISelect 表示U川Select0ne组 一组 无显示 Items 件中的多项 元素 selectOneListbox UlSelect 允许用户从一组列表 元素 列表框 One 中选择一项，所 有选择项立刻显 示 sel ectOneMenu 允许用户从下拉菜单 select>元素 下拉式组 的一组项目中选 合框 择一项 selectOneRadio 允许用户从一组项目 元素 JSF组件 8。 品北农林升教大学信息工程学院本科生课程
标签 组件 功能 呈现的HTML 外观 selectItem UISelect Item 表示UISelectOne组 件中列表的一项 HTML 元素 无显示 selectItems UISelect Items 表示UISelectOne组 件中的多项 一组 元素 无显示 selectOneListbox UISelect One 允许用户从一组列表 中选择一项，所 有选择项立刻显 示 元素 列表框 selectOneMenu 允许用户从下拉菜单 的一组项目中选 择一项 元素 下拉式组 合框 selectOneRadio 允许用户从一组项目 中选择一项 元素 一组单选 按钮 HTML组件标签（5） JSF组件 •8 信息工程学院本科生课程
HTML组件标签(6) 标签 组件 功能 呈现的HTML 外观 selectBooleanC UISelectB 允许修改Boolean 元素 selectManyChec UISelectM 显示一组复选框， chexkbox:类型 一组复选 kbox any 允许多选 的一组 框 元 素 selectManyList 允许用户从一组列 (select>元素 列表框 box 表中选择多项， 所有选择项立 刻显示 sel ectManyMenu 允许用户从下拉菜 元素 下拉式组 单的一组项目 合框 中选择多项 JSF组件 9。 西北农林升教大学信息工程学院本科生课程
标签 组件 功能 呈现的HTML 外观 selectBooleanC heckbox UISelectB oolean 允许修改Boolean 选择的值 元素 单个复选 框 selectManyChec kbox UISelectM any 显示一组复选框， 允许多选 chexkbox类型 的一组 元 素 一组复选 框 selectManyList box 允许用户从一组列 表中选择多项， 所有选择项立 刻显示 元素 列表框 selectManyMenu 允许用户从下拉菜 单的一组项目 中选择多项 元素 下拉式组 合框 HTML组件标签（6） JSF组件 •9 信息工程学院本科生课程
UI组件标签属性 属性 作用 id 唯一地表示组件 immediate 如设置为true,表示任何与组件相关的事件、验证和转换 都应该发生在应用请求值阶段而不是后续的阶段 rendered 指定组件呈现的条件。如条件不满足，组件就不呈现 style 为标签指定CSS样式 styleclass 指定一个包含样式定义的CS$样式表类 value 将组件值绑定到Bean属性或内部对象上 binding 将组件实例绑定到该Bean属性上，支持动态改变组件属性 以上属性，每个U川组件都拥有。另外除id以外， 其他属性都接受表达式。 JSF组件 10。品北农林升大学信息工程学院本科生课程
属性 作用 id 唯一地表示组件 immediate 如设置为true，表示任何与组件相关的事件、验证和转换 都应该发生在应用请求值阶段而不是后续的阶段 rendered 指定组件呈现的条件。如条件不满足，组件就不呈现 style 为标签指定CSS样式 styleclass 指定一个包含样式定义的CSS样式表类 value 将组件值绑定到Bean属性或内部对象上 binding 将组件实例绑定到该Bean属性上，支持动态改变组件属性 UI组件标签属性 ❖ 以上属性，每个UI组件都拥有。另外除id以外， 其他属性都接受表达式。 JSF组件 •10 信息工程学院本科生课程