jsf中通过javascript调用事件或者监听器。。。［ZT］

最新推荐文章于 2017-11-10 19:56:46 发布

zoe984623

最新推荐文章于 2017-11-10 19:56:46 发布

阅读量439

点赞数

分类专栏： Jsf 文章标签： JSF JavaScript 应用服务器 Bean F# ViewUI

Jsf 专栏收录该内容

9 篇文章

订阅专栏

本文介绍JSF中的事件处理机制，包括值变化事件、动作事件及生命周期事件等。通过实例展示了如何使用JSF处理用户交互，如菜单选择和按钮点击。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WEB应用通常需要响应用户事件，比如选择菜单项目或者单击按钮。例如，响应用户对地址表单中的国家选择，更改场所和加载当前页面以更好的适应用户。

通常，可以与组件一起注册事件处理器；例如，可以在JSF页面中使用菜单来注册值变化监听器。如：

JSF代码

<h:selectOneMenu id="select" valueChangeListener="#{user.myEvent}" onchange="submit();"
value="#{user.selectedContent}">
<f:selectItems value="#{user.countryItems}"></f:selectItems>
</h:selectOneMenu>

在上述代码中，方法绑定#{user.myEvent}引用form bean的myEvent方法，当用户从菜单中作出选择之后，JSF实现调用该方法。

JSF支持三种类型的事件：
值变化事件
动作事件
阶段事件

当输入组件的值发生变化并且比较表单时，值变化事件由该输入组件触发，例如： h:inputText,h:selectRadio,h:selectManyMenu。

当激活按钮或连接时，命令组件（如：h:commandButton和h:commandLink）会触发动作事件。

生命周期事件

JSF应用程序中的请求由JSF实现产生――该JSF实现通常时一个控制器servlet――然后执行JSF生命周期。JSF生命周期包括下列阶段：

Restore View（恢复视图）
Apply Request Values（应用请求值）
Process Validations(处理验证)
Update Model Values（更新模型值）
Invoke Application（调用应用程序）
Render Response（呈现响应）

在用户再次访问JSF页面时，恢复视图阶段将重新创建服务器组件树，应用请求值阶段将请求参数（request parameters）复制到组件提交值（submitted value）中。处理验证阶段首先转换这些提交的值并验证转换后的值。更新模型值将转换后和验证过的值复制到模型中。这通常是由JSF页面中值引用表达式所表示，如：

JSF代码

<h:inputText value=”#{user.name}”/>

<h:inputtext value="”#{user.name}”/">
调用应用程序阶段调用动作监听器和动作，可以在一个组件中注册动作监听器和动作。
<h:commandbutton action="”#{bean.action}”" actionlistener="”#{bean.listener}”/">

JSF 代码

<h:commandButton action=”#{bean.action}” actionListener=”#{bean.listener}”/>

在这里，JSF实现将调用该bean的listener方法，接着是action方法.

最后，呈现响应阶段保存状态并加载下一个视图，对于JSP应用程序，JSF导航处理器或者转发或者重定向到另一个JSF页面，转发是默认的行为，但是可以在faces配置文件中使用redirect元素指定重定向。

从应用请求值阶段开始，事件被创建和放置到每个生命周期中的一个事件序列中。完成这些阶段之后，JSF实现将这些排队的事件传播到注册的监听器上。

每个监听器都会以下列三种方法之一来影响JSF生命周期：1。生命周期正常进行；2。调用FacesContext.renderResponse()来跳过生命周期的其他部分，而直接到呈现响应；3。调用FacesContext.responseComplete ()来跳过生命周期的其他所有部分。
</h:commandbutton></h:inputtext>

值变化事件
Web应用程序中的组件通常是相互依赖的。可以使得所依赖的组件与值变化事件保持同步。例如，下图显示的应用程序，当选择下拉框中的内容时，在下面显示所选中的内容。这在验证了新值和提交关闭之后由输入组件触发。

上图显示的应用程序将一个值变化监听器连接到select菜单，并使用onchange属性来在菜单值变化之后强迫执行表单提交：

JSF代码

<h:selectOneMenu id="select" valueChangeListener="#{user.myEvent}" onchange="submit();"
value="#{user.selectedContent}">
<f:selectItems value="#{user.countryItems}"></f:selectItems>
</h:selectOneMenu>

当用户从菜单中选择一个国家时，JavaScript submit函数将被调用来提交菜单的表单，然后它调用JSF生命周期。在处理验证阶段，JSF实现将调用form bean的myEvent（）方法。这个方法将根据新的selectedContent值来更改视图的场所：

java 代码

/*
*
* FileName：filename
* Description：description of the file
*
* Version：1.0
* Author：gmplayer
* FinishDate：2007-3-29
*
* http://www.ncepu.edu.cn
*/
package jsf;
import javax.faces.event.ActionEvent;
import javax.faces.event.ValueChangeEvent;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
import java.util.Locale;
public class UserBean ...{
String result;
String input;
private ArrayList countryItems = null;
private String selectedContent = null;
public String getSelectedContent() ...{
return selectedContent;
}
public void setSelectedContent(String selectedContent) ...{ //保持下拉框的状态不改变
this.selectedContent = selectedContent;
}
public String getResult() ...{
return result;
}
public void setResult(String result) ...{
this.result = result;
}
public void listen(ActionEvent e) ...{ //按钮点击时触发的事件
FacesContext context = FacesContext.getCurrentInstance();
String myclientId = e.getComponent().getClientId(context);
String clientId = e.getComponent().getId();
if (clientId.equals("btnSubmitAdd"))
setResult(getInput());
}
public void myEvent(ValueChangeEvent e) ...{ //下拉框改变时触发的事件
FacesContext context = FacesContext.getCurrentInstance();
String clientId = e.getComponent().getId();
if (clientId.equals("select")) ...{
setResult(e.getNewValue().toString());
}
}
public String getInput() ...{
return input;
}
public void setInput(String input) ...{
this.input = input;
}
public Collection getCountryItems() ...{ //给下拉框赋值
SelectItem aa= new SelectItem();
if (countryItems == null) ...{
countryItems = new ArrayList();
countryItems.add(new SelectItem("Sun", "Sun", null));
countryItems.add(new SelectItem("Month", "Month", null));
countryItems.add(new SelectItem("Earth", "Earth", null));
}
return countryItems;
}
public void setCountryItems(ArrayList<selectitem> countryItems) ...{ </selectitem>
this.countryItems = countryItems;
}

与所有值变化监听器一样，上述监听器将传递一个值变化事件，该监听器使用该事件来访问组件的新值。ValueChangeEventl类扩展了FacesEvent，两个类都位于javax.faces.event包中。下面列出了这些类中的常用方法：
javax.faces.event.ValueChangeEvent

UIConponent getComponent()
返回触发事件的输入组件
Object getNewValue（）
当转换和验证新值后，返回组件的新值
Object getOldValue（）
返回组件的以前值

Javax.faces.event.FacesEvent

Void queue()
将传送事件放到当前生命周期阶段的末端并排队等待
PhaseID getPhaseId()
返回对应于发送事件阶段的阶段标识符
Void setPaseId(PhaseId)
设置对应于发送事件阶段的阶段标识符

上图的页面代码为：

Myjsp.jsp

<%@ page language="java" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<f:view>
<head>
<title>This is the first JSF example!</title>
</head>
<body>
<h:form>
<h:inputText value="#{user.input}" id="input" />
<h:selectOneMenu id="select" valueChangeListener="#{user.myEvent}"
onchange="submit()" value="#{user.selectedContent}">
<f:selectItems value="#{user.countryItems}"></f:selectItems>
</h:selectOneMenu>
<p>
<h:commandButton value="Login" action="login" id="btnSubmitAdd"
actionListener="#{user.listen}" />
</p>
<h:outputText value="#{user.result}" />
</h:form>
</body>
</f:view>
</html>

动作事件
动作事件在组件被激活时由命令按钮触发――按钮，连接等等。正如前面“生命周期事件”所讨论的，动作事件在调用应用程序阶段触发，接近生命周期的末端。

通常将动作监听器连接到JSF页面的命令组件，例如可以将一个动作监听器添加到一个按钮上。如上例中为按钮定义了一个事件：
<h:commandbutton value="Login" action="login" actionlistener="#{user.listen}">

当命令组件被激活时，它们提交请求，因此不需要使用onchange来强迫提交表单，这与值变化事件中所做的有所不同，当激活一个命令或连接时，封闭的表单将被提交，然后JSF实现将触发动作事件。

认识action listener和action之间的区别很重要，动作被设计用于业务逻辑并参与导航处理，而动作监听器通常执行用户页面逻辑，但不参与导航处理。当动作需要用户界面相关的信息时，动作监听器通常与动作一起工作。</h:commandbutton>