了解ADF Faces clientComponent属性

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






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

结果页面如下所示:

了解ADF Faces clientComponent属性

让我们看一下生成的html:

了解ADF Faces clientComponent属性

我们可以看到我们的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呈现。 inputTextvalueChangeListeneroutputText作为部分目标添加到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:

了解ADF Faces clientComponent属性

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

了解ADF Faces clientComponent属性

好的,就部分渲染而言,让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属性

翻译自: https://www.javacodegeeks.com/2013/05/understanding-adf-faces-clientcomponent-attribute.html