由于Oracle ADF是JSF的扩展，而JSF更是在UI界面组件化上的一个飞跃，说到Web UI 又不得不谈JavaScript。因此我们自然而然地想到如何在客户端来处理ADF组件。ADF很好地用JavaScript将其在客户端进行很好的封装。所以我们在设计界面时在Inspector属性栏中所能见到的大部分ADF组件属性的Accessor均能利用前端的JavaScript中调用。但是调用的前提就是如何在客户端获取组件对象。
我查阅了官方的文档，其中能够获取组件对象的方法大致有三种（其中一种在新版的ADF中也不再使用）
1. AdfUIComponent.findComponent(expr)
这种方式的前提是必须具有实例化的组件后方能调用该方法。首先我们必须明确：所有在客户端展现的ADF组件对象的类均是AdfUIComponent类的子类。那么所有的ADF组件实例就都具备findComponent()这个实例方法。根据以上特性，我们就可轻松获取界面上的组件的引用。假设我们有以下标记代码（我假设你具备了一定的ADF基础）
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Press me" id="MyServerButton" clientComponent="true" partialSubmit="true">
<af:clientListener method="whenButtonClick" type="action"/>
</af:commandButton>
<af:outputText id="console" value="fasdf" clientComponent="true" partialTriggers="MyServerButton"/>
</af:panelGroupLayout>
【代码解释：当ADF组件在声明时属性clientComponent设为true并且ID值已设后方能在客户端的JavaScript中正确调用！】
这段代码声明了一个ADF按钮并为其添加了客户端监听器，以便于在前端的JavaScript中进行处理；另外还声明了一个文本输出控件，用于显示当按钮被按下后所改变的状态。JavaScript代码处理如下：
<trh:script>//<![CDATA[
function whenButtonClick (actionEvent) {
// get component which fires this event
var buttonComponent = actionEvent.getSource();
// get peer component whose id is console
var outputText = buttonComponent.findComponent(":console");
output.setValue("You changed me!");
}
//]]></trh:script>
2. AdfPage.PAGE.findComponent(clientID)
这种方法的好处是我们无需一个已经实例化的AdfUIComponent对象就可以轻松获取到页面的ADF组件对象引用。这里需要对AdfPage.PAGE这个对象说明一下，官方文档上对其这样解释的：AdfPage.PAGE is a global object that provides a static reference to the page's context object,翻译过来就是AdfPage.PAGE一个可以提供页面上下文对象的一个静态引用的全局对象。既然是获取上下文的全局对象，当然得到的应该是已经实例化的ADF组件了。仍然以上面的代码为例，我们修改一下JavaScript代码利用第二种方式来达到同样的效果，代码如下所示：
<trh:script>//<![CDATA[
function whenButtonClick (actionEvent) {
// get component by client id
var outputText = AdfPage.PAGE.findComponent("console");
output.setValue("You changed me!");
}
//]]></trh:script>
是不是更简单明了呢，呵呵
3.AdfPage.PAGE.findComponentByAbsoluteId(absolute expr)
很不幸官方文档上虽对其有说明，但经过测试后发现这个方法在最新的ADF版本上已经不存在了，故在此不做详细解释了。
我查阅了官方的文档，其中能够获取组件对象的方法大致有三种（其中一种在新版的ADF中也不再使用）
1. AdfUIComponent.findComponent(expr)
这种方式的前提是必须具有实例化的组件后方能调用该方法。首先我们必须明确：所有在客户端展现的ADF组件对象的类均是AdfUIComponent类的子类。那么所有的ADF组件实例就都具备findComponent()这个实例方法。根据以上特性，我们就可轻松获取界面上的组件的引用。假设我们有以下标记代码（我假设你具备了一定的ADF基础）
<af:panelGroupLayout layout="horizontal">
<af:commandButton text="Press me" id="MyServerButton" clientComponent="true" partialSubmit="true">
<af:clientListener method="whenButtonClick" type="action"/>
</af:commandButton>
<af:outputText id="console" value="fasdf" clientComponent="true" partialTriggers="MyServerButton"/>
</af:panelGroupLayout>
【代码解释：当ADF组件在声明时属性clientComponent设为true并且ID值已设后方能在客户端的JavaScript中正确调用！】
这段代码声明了一个ADF按钮并为其添加了客户端监听器，以便于在前端的JavaScript中进行处理；另外还声明了一个文本输出控件，用于显示当按钮被按下后所改变的状态。JavaScript代码处理如下：
<trh:script>//<![CDATA[
function whenButtonClick (actionEvent) {
// get component which fires this event
var buttonComponent = actionEvent.getSource();
// get peer component whose id is console
var outputText = buttonComponent.findComponent(":console");
output.setValue("You changed me!");
}
//]]></trh:script>
2. AdfPage.PAGE.findComponent(clientID)
这种方法的好处是我们无需一个已经实例化的AdfUIComponent对象就可以轻松获取到页面的ADF组件对象引用。这里需要对AdfPage.PAGE这个对象说明一下，官方文档上对其这样解释的：AdfPage.PAGE is a global object that provides a static reference to the page's context object,翻译过来就是AdfPage.PAGE一个可以提供页面上下文对象的一个静态引用的全局对象。既然是获取上下文的全局对象，当然得到的应该是已经实例化的ADF组件了。仍然以上面的代码为例，我们修改一下JavaScript代码利用第二种方式来达到同样的效果，代码如下所示：
<trh:script>//<![CDATA[
function whenButtonClick (actionEvent) {
// get component by client id
var outputText = AdfPage.PAGE.findComponent("console");
output.setValue("You changed me!");
}
//]]></trh:script>
是不是更简单明了呢，呵呵
3.AdfPage.PAGE.findComponentByAbsoluteId(absolute expr)
很不幸官方文档上虽对其有说明，但经过测试后发现这个方法在最新的ADF版本上已经不存在了，故在此不做详细解释了。