了解ADF Faces clientComponent属性

我相信大多数ADF开发人员都知道ADF Faces属性clientComponent 。在这篇文章中，我将展示此属性实际上如何影响组件渲染以及它如何改变其行为。让我们开始考虑一个非常简单的示例：

<af:inputText label="Label 1" id="it1" />
<af:outputText value="outputText1" id="ot1"/>

结果页面如下所示：

让我们看一下生成的html：

我们可以看到我们的outputText已变成简单的文本字符串。没有任何组件代表它。 Java脚本表达式AdfPage.PAGE.findComponent（“ ot1”）将返回“ undefined” 。甚至表达式document.getElementById（“ ot1”）也将返回null。 因此，我们既没有ADF Faces JS丰富对象，也没有对应于outputText的本机DOM元素。没事

让我们的示例更加复杂：

<af:inputText label="Label 1" id="it1" autoSubmit="true"value="#{MainTest.someValue}"valueChangeListener="#{MainTest.inputTextListener}"/>
<af:outputText value="#{MainTest.someValue}" id="ot1" binding="#{MainTest.outputText}"/>

inputText将其值存储在托管bean中，并且此值应由outputText呈现。 inputText的valueChangeListener将outputText作为部分目标添加到faces上下文中：

public void inputTextListener(ValueChangeEvent valueChangeEvent) {AdfFacesContext ctx = AdfFacesContext.getCurrentInstance();ctx.addPartialTarget(outputText);
}

一切似乎都还可以，但是没有用。此外，我们会在日志中找到以下消息：

<PprResponseWriter$PPRTag> <finish> no PPR-capable ID found for elements of: RichOutputText[UIXFacesBeanImpl, id=ot1]

这是因为客户端上没有相应的组件。 outputText仅由简单文本表示。

好吧，让我们将outputText的 clientComponent设置为true：

<af:outputText value="#{MainTest.someValue}" id="ot1" binding="#{MainTest.outputText}"clientComponent="true"/>

这样我们的例子就起作用了！

看一下html：

有呈现的html标签跨度，它表示我们的outputText。 Java脚本表达式document.getElementById（“ ot1”）返回HTMLSpanElement。 AdfPage.PAGE.findComponent（“ ot1”）表达式返回AdfRichOutputText ，它是由以下JS代码创建的ADF Faces JS对象：

好的，就部分渲染而言，让outputText依赖于inputText ：

<af:inputText label="Label 1" id="it1" autoSubmit="true"value="#{MainTest.someValue}"/>
<af:outputText value="#{MainTest.someValue}" id="ot1" partialTriggers="it1"/>

这个例子比上一个例子简单，并且可以工作。 JS表达式document.getElementById（“ ot1”）返回HTMLSpanElement，但是AdfPage.PAGE.findComponent（“ ot1”）表达式返回“ undefined” 。没有为outputText创建任何ADF Faces客户端对象，但是已渲染DOM元素（ span ）。

实际上，通常使用clientComponent属性来获取在客户端创建的ADF Faces JS对象。但是，除此之外， clientComponent属性强制呈现组件的DOM元素，有时我们可能仅出于该原因需要使用clientComponent属性。我们在第一个示例中这样做了，并使它正常工作。

而已！

参考： ADF练习博客上的JCG合作伙伴 Eugene Fedorenko 了解了ADF Faces clientComponent属性。