因为ID的变化，导致客户端JS脚本难以定位控件。解决的思路其实很简单，那就是找到一个不变的ID，通过这个ID来定位控件。一个简单的解决方法是给控件定义一个辅助的CSS类，保证这个类名不会重复。示例如下：

 

<![CDATA[
    <af:resource type="javascript" source="/js/jquery.js"/>
    <af:resource type="javascript">
      function invokeJavaMethod(){
          var clientId = $(".serverListener") [0].id;
          var com = AdfPage.PAGE.findComponentByAbsoluteLocator(clientId);
          AdfCustomEvent.queue(com, "myEvent",  {userName: ‘Nicholas‘}, true);                               
     }
    </af:resource>
         <a onclick="invokeJavaMethod();">Click me</a>
    <af:outputText value="" id="ot1" visible="false" styleClass="serverListener">
              <af:serverListener type="myEvent" method="#{pageFlowScope.myBean.doCustomEvent}"/>
 </af:outputText>             
   ]]>

 

以上的方法会有一个潜在的问题，那就是如果同一个Taskflow在同一个页面被多次引用，那么就会有多个元素拥有定位所依赖的CSS。解决方法有两种：

1. 为Taskflow定义一个输入参数，作为CSS的取值。在调用是给Taskflow输入不同的值，就能避免冲突。

2. 可以使用元素的相对位置获取id值。因为无论taskflow如何嵌套和复用，页面元素的相对位置是不变的。

<![CDATA[

<af:resource type="javascript" source="/js/jquery.js"/>
    <af:resource type="javascript">
      function invokeJavaMethod(id){
          var clientId = id.id;
          var com = AdfPage.PAGE.findComponentByAbsoluteLocator(clientId);
          AdfCustomEvent.queue(com, "myEvent",  {userName: id.innerText}, true);                               
     }
    </af:resource>
    <a onclick="invokeJavaMethod(this.nextSibling);" href="http://www.mamicode.com/#">Click me</a>
    <af:outputText value="http://www.mamicode.com/#{pageFlowScope.taskName}" id="ot1" visible="false" styleClass="serverListener">
              <af:serverListener type="myEvent" method="#{pageFlowScope.myBean.doCustomEvent}"/>
 </af:outputText>

   ]]>