CHAPTER-11-JSF标签.ppt

JSF UI组件 信息工程学院软件系 2021/1/27 JSF组件 包 JSF 组件包 UI 组件类 事件和监听器模型 验证模型 转换模型 显示模型 2021/1/27 JSF组件 包 JSF技术是基于 java的 Web应用程序的服务器端用户接口 组件框架。 JSF以显示界面为中心， API实现的基础 UIComponent抽象类 定义用户界面组件 (抽象 )类 UIComponentBase实现类 实现抽象类的组件类 JSF组件类方法的功能是通过与标签绑定实现的： core标签库： jsf-impl.jar 定义特定的核心动作 HTML标签库： jsf-api.jar 定义 HTML控件或表单 2021/1/27 UI组件 JSF技术提供了一个丰富的、灵活的组件架构，包括： UIComponent类 ，用于指定 UI组件的状态和行为 呈现模型， 用来定义如何使用不同方法呈现组件 事件和监听器模型 ，定义了如何处理组件事件 转换器模型 ，定义在一个组件上注册数据转换器 验证器模型 ，定义在一个组件上注册验证器 2021/1/27 UIComponent类 UIParameter 表示替换参数。 UISelectBoolean 允许用户通过选择或者不选择在一个控件上设置布尔值。该类是 UIInput类的子类。 UISelectItem 表示在一组条目中的单个条目。 UISelectItems 表示一组条目。 UISelectMany 允许用户从一组条目中选择多个条目。是UIInput类的子类。 UISelectOne 允许用户从一组条目中选择一个条目。是UIInput类的子类。 UIViewRoot 表示组件树的根。 2021/1/27 UIComponent类 除继承 UIComponentBase外，组件类还实现一个或多个 行为接口，每个接口中都定义了特定的行为。包括： ActionSource： 指出组件可以触发一个动作事件，这个 接口是提供给使用 JSF1.1_01或更早版本的用户的。 ActionSource2： 继承 ActionSource，当调用处理动作 事件的方法时它允许组件使用统一 EL。 ValueHolder：实现该接口的组件用于维护一个值。 EditableValueHolder： 是对 ValueHolder的扩展，为可 编辑组件指定附加的特性，例如处理校验验证等。 NamingContainer： 要求在组件中的每个组件有唯一的 ID。 StateHolder：指出组件的状态必须在 request之间保存。 2021/1/27 JSF 标签库 JSF组件类的功能通过标签实现。 JSF定义了两 个标签库：核心标签库和 HTML标签库。核心库执 行与特定渲染绘制无关的操作； HTML标签库用于 直接生产 HTML标签。有两个基础标签： ：所有的 UI标签必须放在其中； ：所有的表单标签必须放在其中； 2021/1/27 JSF 核心标签 标签类别 标签 说明 标签的容器 创建顶层视图 容器标签 创建视图的子视图 Facet标签 向组件添加 facet的嵌套组件 参数置换标签 向组件添加参数 实现配置标签 向组件添加属性 事件处理标签 在父组件上注册操作监听器 向父组件注册值变更监听器 数据转换标签 注册任意转换器 注册日期时间转换器 f:convertNumber 注册数量转换器 2021/1/27 JSF 核心标签 标签类别 标签 说明 验证器标签 验证组件值的长度 验证组件值的双精度范围 验证组件值的长整型范围 向组件添加验证器 本地化标签 加载资源包 输出标签 向页面中添加非 JSF标签 表示列表中 列项目的标 签 指定 UISelectOne 或 UISelectMany 组件的一个 项目 指定 UISelectOne 或 UISelectMany 组件的多个 项目 2021/1/27 JSF 核心标签 创建一个视图 所有的 JSF标签必须包含在 和 之间。 创建一个子视图 其中可以包含 JSF标签，也可以包含 子页面 ，但页面 中的内容必须都为 JSF标签；否则使用 迚行 转换。子页面内容可通过 包含迚来。 2021/1/27 JSF 核心标签 和 用于向 UI的 select*标签中添加成员，如生成 select 标记的 JSF标签添加 等。 selectItem通过 itemValue和 itemLabel（用于显示） 生成数据项，而 selectItems通过 itemValue属性指定多个 数据项， value的数据类型为 List型。 selectItems一般用于动态的生产选项条目。 2021/1/27 JSF标签 (UI组件 ) 标准标签 输出类标签 输入类标签 命令类标签 选择类标签 其他标签 表格处理 2021/1/27 JSF标准标签 输出（ Outputs） 其名称以 output作为开头，作用为输出指定的信息或绑定值。 输入（ Inputs） 其名称以 input作为开头，其作用为提供使用者输入框。 命令（ Commands） 其名称以 command作为开头，其作用为提供命令或链接按钮。 选择（ Selections） 其名称以 select作为开头，其作用为提供使用者选项的选取。 其它 包括了 form、 message、 messages、 graphicImage等等未分 类 的标签。 2021/1/27 标准标签的通用属性 属性名称 适用 说明 id 所有组件 可指定 id名称，以让其它标签或 组件参考 binding 所有组件 绑定至 UIComponent rendered 所有组件 是否显示组件 styleClass 所有组件 设定 Cascading stylesheet(CSS) value 输入、输出、命 令组件 设定值或绑定至指定的值 valueChangeListener 输入组件 设定值变事件处理者 converter 输入、输出组件 设定转换器 validator 输入组件 设定验证器 required 输入组件 是否验证必填输入框 immediate 输入、命令组件 是否为即时事件 2021/1/27 标准标签的属性 除了共通的属性之外，您还可以在某些组件上 设定卷标 HTML 4.01的属性，像是 size、 alt、 width等属性，或者是设定 DHTML事件属性，例如 onchange、 onclick等等。 2021/1/27 输出类标签 outputLabel 产生 HTML标签，使用 for属性指定组件的 client ID，例如： outputText 简单的显示指定的值或绑定的信息，例如： 2021/1/27 输出类标签 outputLink 产生 HTML标签，搭配 可为链结 加上参数。 2021/1/27 输出类标签 outputFormat 产生指定的文字信息，可以搭配 来 设定信息的参数以格式化文字信息（国际化信息）， 例如： 2021/1/27 输入类标签（表单标签） form 所有的表单标签都必须放在 form标签体中。 属性： enctype：指定表单的 MIME类型； application/x-www-form- urlencoded（默认）， multipart/form-data（上传文件）。 target：指定一个 frame名称，在何处显示表单处理结果。 prependId：是否将表单 ID加在后代元素的 ID之前，两个 ID用 “ ”连接。 2021/1/27 输入类标签（表单标签） inputText 显示单行输入框，其 type属性设定为 text，例如： inputTextarea 显示多行输入文字区域，即输出 HTML标签，例 如： inputSecret 显示密码输入框，例如： inputHidden 隐藏输入框 .例如： 2021/1/27 命令类标签 commandButton 显示一个命令按钮，其 type属性可以设定为 button、 submit 或 reset，预设是 submit，按下按钮会触发 javax.faces.event. ActionEvent，例如： commandLink 产生超链接，会输出 HTML标签，而 href属性会有 #， 而 onclick属性会含有一段 JavaScript程序，这个 JavaScript的目的是按下链接后自动提交表单，例如： 注意与 outputLink标签的区别。 2021/1/27 选择类标签 选取框 单选 单选按钮 单选列表 单选菜单 复选 复选框 复选列表 复选菜单 2021/1/27 选择类标签 选择类标签中除 之外，其 他所有标签的选项都由 或 生成。例： 注： firefox对 selectManyMenu支持不好，避免使用！ 2021/1/27 选择类标签 标签在页面上产生一个复 选框，与上面的所有选择类按钮不同的是，其绑定值必须是 一个 boolean类型的属性。 2021/1/27 图片标签 生成 标签， value指向一张 图片的 url。如： 2021/1/27 简单布局标签 和 panelGrid用来作简单的组件排版，它会使用 HTML 表格卷标来绘制表格，并将组件置于其中，主要指定 columns属性 ，指明每行显示几列。 panelGrid之间的 JSF标签各占一个单元格 。 的本体间只能包括 JSF组件，如果想要放入 非 JSF组件，则要使用 包括住。若要将多个 组件放在一个单元格则将这些组件用 包起来。 2021/1/27 panelGrid属性 columnClasses：值为 css类名列表（用逗号隔开），为每 列指定一个 CSS，若少于列数，则后面列不指定样式。 rowClasses：值为 css类名列表（用逗号隔开），为行指定 CSS样式，表中行的样式循环使用列表中的样式。 captionClass、 headClass、 footClass： 分别指定表格标 题、标题行、表尾行的 CSS样式。 2021/1/27 表头、表尾、标题控制 facet：用于控制表头（ header）、表尾（ footer）的显示 及标题（ caption）；属性： name：值为： header|footer|caption；指明是生成表 头还是表尾。 2021/1/27 表栺处理标签 dataTable 用于遍历指定对象的值生成一个 表格。属性： value： 待遍历了的对象，可以是 List、 ResultSet、数组； var： 指向当前被迭代的对象，在本体内引用； border： 指定边框粗度； rows： 指定显示几行 ,0（默认）为显示全部； first： 从第几行开始显示 2021/1/27 表栺处理其他标签 styleClass：表格样式； rowClassess， columnClasses：行、列的样式 ： 在 dataTableb本体内生成一个单元格； 2021/1/27 表栺示例 Name Code 2021/1/27 JSF消息 在 JSF生命周期中，任何一个组件都可以创建 JSF消息， JSF消息通常由 FaceContext添加，并由 FaceContext自动 维护消息队列，在 JSF生命周期结束迚入响应呈现阶段时， 视图通过 来显示。使用方法： ：显示所有信息； 显示指定组件的信息 2021/1/27