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