实例化客户端组件----ADF Faces入门（文档阅读）

实例化客户端组件

默认的RCF没有保证哪些组件拥有客户端实例。你可以通过注册一个clientListener handler来做到与客户端组件交互。当一个组件被注册了clientListener handler以后，它会自动的拥有客户端组件的表现。倘若你需要在客户端设置某个组件不可用，你可以显示的设置该组件的clientComponent属性为true来使该组件可用。如果你想在客户端用程序对组件进行处理，你只有通过设置组件的clientComponent属性为true来做到。

当你设置某个组件的clientComponent属性为true，RCF会为该组件创建一个AdfUIComponent类的实例。这个类提供了你在客户端进行操作的API，提供了组件基本属性的获取方法，例如setProperty()，getProperty()，还提供了事件监听的注册以及事件的delivery-related。

例子：在客户端设置outputText的值为特定值

步骤：

1. 往页面中拖两个组件，一个按钮，一个outputText，outputText的clientComponent属性设置为true

2. 为按钮添加clientListener

3. 写JS代码，如代码

<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:trh="http://myfaces.apache.org/trinidad/html" version="2.1"> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <f:view> <af:document id="d1"> <af:resource type="javascript"> function sayHello(actionEvent) { alert("Hello world"); var buttonComponent=actionEvent.getSource(); buttonComponent.setText("改过"+buttonComponent.getId()); var greetingComponent=buttonComponent.findComponent(":greeting1"); greetingComponent.setValue("HelloWorld : "); } </af:resource> <af:form id="f1"> <af:panelGroupLayout id="pgl1"> <af:commandButton text="Say Hello" id="cb1"> <af:clientListener method="sayHello" type="action"/> </af:commandButton> <af:outputText id="greeting1" value="" clientComponent="true"/> </af:panelGroupLayout> </af:form> </af:document> </f:view> </jsp:root>

在没有组件实例去调AdfUIComponent.findComponent(expr)的时候，可以使用AdfPage.PAGE，这是一个提供静态reference给页面上下文的全局对象，但是如果你要获取的组件在一个命名容器中的话，必须使用AdfUIComponent.findComponent(expr)

      var greetingComponent=buttonComponent.findComponent(":greeting1");和var greetingComponent=AdfPage.PAGE.findComponentByAbsoluteId("greeting1");作用一致

在获取的组件不在一个命名容器中的适合有效

最后调侃下命名容器，我们是如何判断命名容器的呢，可以通过查阅标签文档，标签文档中都有说明哪些是命名容器组件，哪些不是。

如果不住一个命名容器里面的话，获取组件的表达方式如下:

例子：find某模板页中的某region中的某panel collection中的表：t1   :myTemplate:r1:pc1:t1

如果去获取的那个组件在相同region中的话，可以这样表示： ::pc1:t1

::表示回到上层结构，可以用我们目录结构表示的方式理解，回到上层目录，如../

倘若你知道你所要获取的组件总是在相同的命名容器的话，你可以选择使用绝对路径。反之，如果你知道所获取组件处于相对位置，你可以选择使用相对路径。

在客户端没有getChildren() 或者 getFacet()方法，然而，框架有AdfUIComponent.visitChildren()函数，它可以遍历所有子组件或者是facets