访问 primefaces 中的 ui 组件答案

【问题标题】：access to a ui component in primefaces访问 primefaces 中的 ui 组件
【发布时间】：2014-07-18 11:30:13
【问题描述】：

您好，我是 PrimeFaces 的新手，例如，我有一个 JSF 页面，其中包含许多由 id 引用的元素，例如 in

<p:panelGroup id="container">
    <h:form id="form1">
        <div id="div1">
        ...
        ...
    </h:form>
<p:commandButton action="#{bean.action}" value="update div1"  />
   ...

那么我怎样才能更新div1 的内容或者我怎样才能通过它的 id 访问组件呢？

总的来说，我认为有这样的事情：update=":container:form1:div1" 但它对我不起作用。

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

JSF 是一个基于组件的框架，PrimeFaces 是一个基于 JSF 的组件库，旨在在标准 JSF 之上提供更广泛的组件。两者都有很多组件。例如，来自 PrimeFaces 的 <p:panelGroup> 和来自 JSF 的 <h:form> 是您的问题中提到的。每个组件都有其唯一的 ID，或者通过 id="component-id" 预设，或者在省略 id 属性时自动生成。

在 JSF 生命周期中创建以UIViewRoot 开头的组件树，然后它被组件的嵌套结构所占据。由于（最常见的）您使用 Facelets 来声明组件结构，您的 Facelet 的内容将在组件树中获得相应的位置。也就是说，所有被引用的标签（如<p:commandButton> 等）最终都会成为JSF 组件树中的UIComponent 实例。

如果您的文件符合 XHTML 文件的所有限制，所有剩余的标签（如 HTML <div> 等）都将被解释为纯文本。一旦 JSF 将呈现响应，这些纯文本将按原样写入响应，无需修改。请记住，JSF 到底是 HTML 代码生成器。此外，与具有唯一 id 的 JSF 组件相比，它们在组件树中不会有任何对应的实例。

同样值得注意的是，JSF 组件的id 属性与其呈现给响应的clientId 之间的区别。欲了解更多信息，请阅读 UINamingContainer 以添加其子项的 id。

接下来，组件的内容可以通过 AJAX （重新）呈现。为此，您需要在<p:commandButton> 的update 属性中传递要（重新）渲染的组件的ID。关于如何通过 id 找到要渲染的组件存在一些细微差别，并且这些可能因一个组件库而异于另一个组件库。对于基本的 JSF 规则，请阅读经典：Communication in JSF 2.0 以掌握。

最终，您可以根据上述情况设计出一条出路：

如果您想重新渲染某些东西，从 HTML 元素切换到纯 JSF 组件，在您的情况下，这些组件将作为容器工作，例如 <h:panelGroup id="renderme">，它也将呈现为 <div>。该组件可以包装您最初想要重新渲染的块。从现在开始，JSF 将能够找到该组件并重新渲染它；
在命令按钮的update 属性中为要重新渲染的组件指定right id，在您的情况下为update=":container:form1:renderme"。

鉴于此，您的视图将是：

<p:panelGroup id="container">
    <h:form id="form1">
        <p:panelGroup id="renderme">
            <div id="div1">
                ...
            </div>
        </p:panelGroup>
    </h:form>
</p:panelGroup>
<p:commandButton action="#{bean.action}" value="update renderme" update=":container:form1:renderme" />

【讨论】：