JSF 2 复合组件不使用 f:ajax 更新值答案

【问题标题】：JSF 2 Composite Component doesn't update value with f:ajaxJSF 2 复合组件不使用 f:ajax 更新值
【发布时间】：2011-07-28 10:24:36
【问题描述】：

我正在尝试在 JSF 2 中实现一个复合组件，它将支持“更改”ajax 事件。抄送是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface name="inputText">
    <composite:attribute name="label" />
    <composite:attribute name="value" />
    <composite:attribute name="disabled" default="false" />
    <composite:attribute name="required" default="false" />
    <composite:attribute name="rendered" default="true" />
    <composite:clientBehavior name="change" event="change" 
        targets="#{cc.clientId}:input" />
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
    <h:panelGroup id="#{cc.clientId}" rendered="#{cc.attrs.rendered}">
        <h:outputLabel value="#{cc.attrs.label}" for="input" />
        <h:inputText id="input" label="#{cc.attrs.label}" 
            value="#{cc.attrs.value}" disabled="#{cc.attrs.disabled}" 
            required="#{cc.attrs.required}" />
        <h:message for="input" />
    </h:panelGroup>
</composite:implementation>
</html>

现在，我尝试以以下形式使用它：

<h:form id="form">
    <input:inputText value="#{bean.value}" label="d1" id="d1">
        <f:ajax event="change" update="@this,d2,d3" />
    </input:inputText>
    <h:inputText value="#{bean.value}" id="d2">
         <f:ajax event="change" update="@this,d1,d3" />
    </h:inputText>
    <h:outputText id="d3" value="#{bean.value}" />
</h:form>

据我了解，如果我改变d1，d2和d3应该显示d1的值，如果我改变d2，d1和d3都应该改变相应地。
问题是当我改变d2中的值时，它只反映在d3中，而d1保持空白，当我改变d2时，d1和d2保持空白。
我正在使用 Mojarra 2.0.2（我无法在 Google App Engine 上制作 2.0.3，这是我的 AS）。我是否错过了应该构建复合组件的方式？还是 Mojarra 2.0.2 中的错误？

【问题讨论】：

标签： java jsf-2 composite-component

【解决方案1】：

这个：

<h:panelGroup id="#{cc.clientId}"

不正确。 #{cc.clientId} 是您的组件的 id，它是该 panelGroup 的父级。将它们设置为具有相同的 ID 是不正确的。给它一个像“myComponentPanel”这样的id，它将具有“#{cc.clientId}:myComponentPanel”的绝对id（当放置在组件树中时）。

我怀疑如果你纠正这个，你的 ajax 行为会起作用。

【讨论】：

嗯，你是对的。删除“#{cc.clientId}”并将其设置为“面板”解决了它。将 cc.clientId 放入 panelGroup 会导致 JSF 生成错误的 html id（呈现的 html 组件没有附加表单 id），而放置一个静态的则解决了它。我觉得奇怪的是，在 IBM 博客中的一个示例中，他们正在使用这种技术 - ibm.com/developerworks/java/library/j-jsf2fu-0610
@Yonatan IBM 实际上使用了一个 div（不是 JSF panelGroup），其 id 设置为 #{cc.clientId}
Here's 另一篇 IBM JSF fu 文章提供了更多背景信息，说明为什么应该在复合组件中使用 div。