在客户端调用JS代码

今天主要看了如何在客户端调用JS代码，并调用生成的bean里的函数，首先要给要加载的控件添加控件clientListener，然后添加serverListener，要调用这两个监听器，一定要将被夹在的控件的clientComponent置为true，否则无法调用监听器。如：

<af:commandButton text="commandButton 1" clientComponent="true">

<af:clientListener method="dbClickTable" type="action"/>

<af:serverListener type="dbClickServer"                                   method="#{backingBeanScope.EmployeeTable.dbClickTo}"/>

</af:commandButton>

其中clientListener中的method为在JS文件中添加的JavaScript函数，type为操作方式，serverListener中的type是用来定义给客户端的，客户端通过定义的type来通知服务器端，服务器端监听到这个事件后调用managerBean里的函数。

   在JavaScript里面添加了如下的代码：

function dbClickTable(event){

   var source = event.getSource();

            AdfCustomEvent.queue(source,"dbClickServer",{},true);

         }

其中的event是从页面获取的事件，通过getSource()函数页面的事件对象，其中AdfCustomEvent.queue函数中的第二个参数是serverListener中定义的类型，通过这个来通知服务器端调用managerBean里的函数。在这里总结了一下clientListener和serverListener是如何工作的：当触发一个事件的时候(如用鼠标点击按钮)，客户端监听器脚本启动，脚本首先调用AdfCustomEvent.queue()方法，方法里的一个事件被启动，这个事件就是服务器端定义的type，服务器端监听到这个事件后，执行与其关联的bean方法。

 

     在学习的过程中遇到过一个问题，就是在使用clientListener的时候，类型定义的问题，就是对于不同的被加载的控件，所使用的clientListener的类型有要求，譬如对command类型的控件，类型可以定义为action，但是如果定义成click的时候，在调用JS代码的时候，无法通过getSource获取页面的事件对象，刚开始的时候试了几次都没有成功，后来查了资料，想了一下，这大概适合每个控件的生命周期有关系，不同的控件的生命周期不一样，因为action可以用于所有的command控件，而click只是用于用户点击一个控件的时候。

 

除了上面的，今天还总结了一下如何在客户端获取组件对象，由于ADF是JSF的扩展，在写JS代码的时候必然要调用组件对象，这里总结了三种方法：

(1).AdfUIComponent.findComponent(expr)

这种方式必须是具有实例化的组件后才能调用该方法，所有在客户端展现的ADF组件对象的类均是AdfUIComponent的子类，那么所有的ADF组件实例就都具有findComponent这个实例方法了。

以下是调用JS文件中的dbClickTable2函数，为要调用的组建添加一个clientListener：

<af:commandButton text="commandButton 2" id="btn2">

 <af:clientListener method="dbClickTable2" type="action"/>

<af:serverListener type="dbClickServer"/>

</af:commandButton>

  这是JS文件里的函数：

function dbClickTable2 (actionEvent){

  var buttonComponent = actionEvent.getSource();

   var output1 = buttonComponent.findComponent("Output1");

   alert("output1 :"+output1);

}

 其中通过actionEvent.getSource()活动组件对象，然后用findComponent调用组件，其中的参数为组建的ID，这样就可以使用了。

 2. AdfPage.PAGE.findComponentByAbsoluteId

这种方法不需要实例化AdfUIComponent对象就可以轻松获取到页面的ADF组件对象引用。它能获取上下文的全局对象，当然得到的应该是已经实例化的ADF组件了。仍然以上面的代码为例，只是修改了JS文件中的代码：

function dbClickTable2 (actionEvent){

var output1 = AdfPage.PAGE.findComponentByAbsoluteId("Output1");

   alert("output1 :"+output1);

}

其中无需使用actionEvent事件，用该种方法一步到位即可.

3.AdfPage.PAGE.findComponentByAbsoluteId(absolute expr)
该种方法类似于方法二，也是一步到位，具体的js代码为：

function dbClickTable2 (actionEvent){

var output1 = AdfPage.PAGE.findComponentByAbsoluteId ("Output1");

   alert("output1 :"+output1);

}