Tree组件使用指南之七：让树节点支持mouseOver事件

运行环境：JDeveloper 11.1.2.2.0 + Oracle Database 10g Express Edition 10.2.0.1。

这个实验来源于一个客户的实际需求：
（1）鼠标移到节点上时，能够弹出一个类似于Tips的信息窗口。
（2）鼠标移到不同的节点上时，弹出的信息不同，也就是说要从节点上获取参数。
（3）根据从节点上获取的参数，调用后台方法，获取最终要显示的信息，并显示在弹出窗口中。

设计思路：
（1）使用ClientListener + ServerListener实现把参数从前端传递到后端，并调用后台服务方法。
（2）使用Popup组件实现弹出窗口，其内容绑定到Managed Bean中，并使用程序局部刷新。

重点步骤说明：

1. 修改页面
（1）增加ClientListener + ServerListener，以及showPopupBehavior + Popup组件

<f:facet name="model.EmployeesView">
  <af:panelGroupLayout id="pgl3">
      <af:image source="/resources/images/file.gif" id="i2"
                inlineStyle="height:14px; width:16px;vertical-align:middle;"/>
      <af:outputText value="#{node}" id="ot2">
          <af:clientListener method="onMouseOver" type="mouseOver"/>
          <af:serverListener type="mouseOverEvent"
                             method="#{myBackingBean.mouseOverListener}"/>
          <af:showPopupBehavior triggerType="mouseOver" popupId="popupTips"
                                align="endAfter"/>
      </af:outputText>
      <af:popup id="popupTips">
          <af:outputText value="" id="ot3" rendered="true"
                         binding="#{myBackingBean.tips}"/>
      </af:popup>
  </af:panelGroupLayout>
</f:facet>

（2）增加JavaScript函数：onMouseOver
function onMouseOver(event) {
var node = event.getSource();
var nodeValue = node.getValue(); 
AdfCustomEvent.queue(node, "mouseOverEvent", {params : nodeValue},true);
}

2. 修改Managed Bean

    public void mouseOverListener(ClientEvent clientEvent) {
        Object nodeValue = (Object)clientEvent.getParameters().get("params");
        System.out.println("############################## nodeValue " + nodeValue);
        retrieveTips(nodeValue);      
    }

    public void retrieveTips(Object nodeValue) {
        ApplicationModule am = ADFUtils.getDCBindingContainer().getDataControl().getApplicationModule();
        AppModuleImpl service = (AppModuleImpl)am;
        String returnValue = service.queryTips(nodeValue);
        this.tips.setValue(returnValue);
        AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
        adfFacesContext.addPartialTarget(this.tips);
    }

3. 修改AM，生成实现类，并增加一个方法：queryTips
服务方法一般暴露在AM中，这里的逻辑只是简单返回了一个String。
你可以根据需要修改逻辑，比如访问某个数据库或调用某个WebService获取某些信息，等等。
public String queryTips(Object nodeValue) {
return "Hello: " + nodeValue.toString();
}

4. 运行
鼠标移动到Employee节点上，会出现Tips，其中显示的就是调用AM方法queryTips的返回值。

Project 下载：ADF_Tree_SelectionListener(5).7z

http://maping930883.blogspot.com/2012/06/adf137treemouseover.html