RichFaces富组件入门指南

### RichFaces 富组件入门指南 #### 1. RichFaces 基础回顾与富组件引入 RichFaces 在标准 JSF 基础上进行了重要升级，提供了如 `<a4j:commandButton>`、`<a4j:commandLink>`、`<a4j:poll>` 和 `<a4j:jsFunction>` 等用于发送 Ajax 请求的组件，还涵盖了 `<a4j:outputPanel>` 组件和 `limitRender` 属性等高级渲染选项，以及 `<a4j:region>` 组件来决定 JSF 视图的执行部分，同时对标准 JSF 队列进行了大幅升级。接下来，我们将开启富组件（rich:* 标签库）的学习之旅。 #### 2. 富组件还是 Ajax 组件？ 在选择使用富组件还是 Ajax 组件时，其实不必过于纠结，二者皆可，关键是要理解它们的本质。以 `<rich:inplaceInput>` 组件为例，它初始渲染为一个标签，点击后会切换为输入框。该组件提供了丰富的用户界面，是一个富组件，但它不会自动发送 Ajax 请求，所有更改仅在客户端（浏览器）进行，更准确地说，它是一个富客户端组件。不过，我们可以通过特定方式让它发送 Ajax 请求。 而像 `<rich:tabPanel>` 组件，它内置了基于某些事件的 Ajax 行为，会在特定操作时发送 Ajax 请求。 #### 3. 富组件的共同特性 所有富组件通常具有以下共同特性： - 利用面（facets）重新定义组件的部分内容 - 发送 Ajax 请求 - 使用组件的客户端 JavaScript API - 触发客户端事件（可为这些事件附加客户端行为） - 皮肤（skins） 需要注意的是，部分富组件可能并非具备所有这些特性，如需获取最新信息，可访问 RichFaces 文档页面（www.jboss.org/richfaces/docs）。 #### 4. 利用面重新定义组件部分内容 以流行的标签面板组件为例，最初的 JSF 页面代码如下： ```xml <h:form> <rich:tabPanel style="width:40%" switchType="ajax"> <rich:tab header="San Francisco"> <h:outputText value="San Francisco is a major city in northern California, on the West Coast of the United States" /> </rich:tab> <rich:tab header="Los Angeles"> <h:outputText value="Los Angeles is a major city in southern California, on the West Coast of the United States" /> </rich:tab> <rich:tab header="New York City"> <h:outputText value="New York City is a major city on the East Coast of the United States" /> </rich:tab> </rich:tabPanel> </h:form> ``` `<rich:tabPanel>` 是一个包含一个或多个 `<rich:tab>` 组件的容器，每个标签的标题通过 `header` 属性定义，但该属性只能使用文本。若想在标题旁添加城市图片或旗帜，就需要借助面（facets）。 以下是添加城市旗帜后的更新代码： ```xml <h:form> <rich:tabPanel style="width:40%" switchType="ajax"> <rich:tab> <f:facet name="header"> <h:panelGrid columns="2"> <h:outputText value="San Francisco" /> <h:graphicImage value="/images/sf_flag.png" height="25" width="25" /> </h:panelGrid> </f:facet> <h:outputText value="San Francisco is a major city in northern California, on the West Coast of the United States" /> </rich:tab> <rich:tab> <f:facet name="header"> <h:panelGrid columns="2"> <h:outputText value="Los Angeles" /> <h:graphicImage value="/images/la_flag.png" height="25" width="25" /> </h:panelGrid> </f:facet> <h:outputText value="Los Angeles is a major city in southern California, on the West Coast of the United States" /> </rich:tab> <rich:tab> <f:facet name="header"> <h:panelGrid columns="2"> <h:outputText value="New York City" /> <h:graphicImage value="/images/nyc_flag.png" height="25" width="25" /> </h:panelGrid> </f:facet> <h:outputText value="New York City is a major city on the East Coast of the United States" /> </rich:tab> </rich:tabPanel> </h:form> ``` 通过添加名为 `header` 的面，我们可以在其中放置城市名称和旗帜图片。由于 JSF 面只能有一个子元素，所以我们使用了 `<h:panelGrid>` 容器来包含多个组件，也可以使用 `<h:panelGroup>`。除了 `header` 面，`<rich:tab>` 面板还提供了其他面，具体如下表所示： | 面名称 | 描述 | | --- | --- | | header | 允许使用任何内容自定义标题 | | headerActive | 标签当前处于活动状态时使用 | | headerInactive | 标签当前不处于活动状态时使用 | | headerDisabled | 标签被禁用时使用 | 若想了解某个组件有哪些可用的面，可查阅 RichFaces 组件指南（www.jboss.org/richfaces/docs）。许多 RichFaces 组件都提供了各种面，让我们能够重新定义组件的不同部分。 #### 5. 发送 Ajax 请求 富组件在发送 Ajax 请求方面有不同情况，有些组件内置了 Ajax 行为，有些则是纯客户端组件，需要我们手动添加 Ajax 行为。 以标签面板为例，`<rich:tab>` 组件内置了 Ajax 支持，标签切换默认通过 Ajax 完成，也可设置为客户端或服务器模式。当选择新标签时，会发送 Ajax 请求并渲染新标签的全部内容。 最初包含时间组件的 JSF 页面代码如下： ```x ```