监听客户端事件----ADF Faces入门（文档阅读）

来源：互联网发布：网络隔离编辑：程序博客网时间：2024/05/17 03:55

如何监听客户端事件：

在传统的JSF应用中，如果你想处理客户端的事件，你必须去监听DOM级别的事件。然而，这些事件都不以一种简易的方式进行交付。

ADF Faces客户端事件监听模型类似于JSF的，但是它是实现在客户端。它从DOM中抽象出来，提供了组件级别的事件模型和生命周期，可以独立于服务器执行。因此，你不需要侦听按钮的Click事件。你可以监听AdfActionEvent事件，可通过按键或鼠标事件触发。

由客户端发送的事件都是AdfBaseEvent类的子类。每个客户端事件都存在着事件源，这就是触发事件的组件。事件还存在着类型，例如action，dialog，用来决定哪个监听器对此事件进行关注。你可以使用af:clientListener 标签注册客户端监听器到组件。

例子：通过af:clientListener标签注册一个输出hello dick的事件到一个按钮组件中。

步骤：

1. 拖一个按钮到页面中

2. 为按钮添加事件监听器，即拖一个af:clientListener到按钮中，并设置方法名称以及触发类型，有很多种，这里选择action

3. 写监听代码，JS代码，拖一个af:resource到页面中，然后设置类型为JavaScript，往里面填代码，function。。。。。

<?xml version='1.0' encoding='UTF-8'?><jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <f:view> <af:document id="d1"> <af:resource type="javascript"> function sayHello(actionEvent) { alert("Hello dick"); } </af:resource> <af:form id="f1"> <af:commandButton text="Say Hello " id="cb1"> <af:clientListener type="action" method="sayHello"/> </af:commandButton> </af:form> </af:document> </f:view></jsp:root>

原理：当点击按钮的时候，存在一个客户端版本的组件，引起了AdfAction客户端事件。因为有一个clientListener标签被配置成监听
AdfAction事件，就触发了JS里面sayHello方法的执行。

如何在ADF页面中使用JavaScript：

有两种方式方式，一种就是上述的方法，直接添加内联（inline）的JavaScript代码到页面中，另一种方式是导入JavaScript库到页面中。第二种方式比较庞大，JS库可以供多个页面共享，并且可以缓存在浏览器中。你随时随刻都可以导入JS库。但是这种方式会导致页面巨大，在载入的时候，会影响到性能。所以还是建议使用第一种方式，但是呢会有这种情况，当你发现多个页面使用相同的JS代码的时候，第一种方式会导致代码很恶心，你可以选择在一个模板中导入JS库的方式。当当当JS代码库特别大的时候，你就需要去考虑把这个代码库分割成多个有特定意义的块，而且这些快只在特定的页面（不能是模板）中使用。这样做可以提高性能。

如何导入JS库

用af:resource从页面中获取JS库，这个标签必须放在document标签下名为metaContainer的facet中。

如：<af:document><f:facet name="metaContainer"><af:resource source="/mySourceDirectory"/></facet><af:form></af:form></af:document>

然后其他的如上。。。。。。

如何获取客户端事件源：

上面讲到每个客户端事件都会有事件源，也就是组件

用getSource方法

function sayHello(actionEvent){var component=actionEvent.getSource();//Get the ID for the componentvar id=component.getIdalert("Hello from "+id);}