`

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

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

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

JSF代码
 
  1. <h:selectOneMenu id="select" valueChangeListener="#{user.myEvent}" onchange="submit();"  
  2.    value="#{user.selectedContent}">  
  3.      <f:selectItems value="#{user.countryItems}"></f:selectItems>  
  4. </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代码
 
  1. <h:inputText value=”#{user.name}”/>  

<h:inputtext value="”#{user.name}”/">
调用应用程序阶段调用动作监听器和动作,可以在一个组件中注册动作监听器和动作。
<h:commandbutton action="”#{bean.action}”" actionlistener="”#{bean.listener}”/">
JSF 代码
 
  1. <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>
1

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


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

JSF代码
 
  1. <h:selectOneMenu id="select" valueChangeListener="#{user.myEvent}" onchange="submit();"  
  2.    value="#{user.selectedContent}">  
  3.    <f:selectItems value="#{user.countryItems}"></f:selectItems>  
  4. </h:selectOneMenu>  


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

java 代码
 
  1. /* 
  2. * Copyright (c) 2006,Science And Technology Of NCEPU 
  3. * All rights reserved. 
  4. * 
  5. * FileName:filename 
  6. * Description:description of the file 
  7. * 
  8. * Version:1.0 
  9. * Author:gmplayer 
  10. * FinishDate:2007-3-29 
  11. * 
  12. * http://www.ncepu.edu.cn 
  13. */  
  14. package jsf;  
  15. import javax.faces.event.ActionEvent;  
  16. import javax.faces.event.ValueChangeEvent;  
  17. import javax.faces.context.FacesContext;  
  18. import javax.faces.model.SelectItem;  
  19. import java.util.ArrayList;  
  20. import java.util.Collection;  
  21. import java.util.List;  
  22. import java.util.Locale;  
  23. public class UserBean ...{  
  24.     String result;  
  25.     String input;  
  26.     private ArrayList countryItems = null;  
  27.     private String selectedContent = null;  
  28.     public String getSelectedContent() ...{  
  29.     return selectedContent;  
  30.     }  
  31.     public void setSelectedContent(String selectedContent) ...{ //保持下拉框的状态不改变  
  32.     this.selectedContent = selectedContent;  
  33.     }  
  34.     public String getResult() ...{  
  35.         return result;  
  36.     }  
  37.     public void setResult(String result) ...{  
  38.         this.result = result;  
  39.     }  
  40.     public void listen(ActionEvent e) ...{ //按钮点击时触发的事件  
  41.         FacesContext context = FacesContext.getCurrentInstance();  
  42.         String myclientId = e.getComponent().getClientId(context);  
  43.         String clientId = e.getComponent().getId();  
  44.         if (clientId.equals("btnSubmitAdd"))  
  45.             setResult(getInput());  
  46.         }  
  47.   
  48.     public void myEvent(ValueChangeEvent e) ...{ //下拉框改变时触发的事件  
  49.         FacesContext context = FacesContext.getCurrentInstance();  
  50.         String clientId = e.getComponent().getId();  
  51.         if (clientId.equals("select")) ...{  
  52.             setResult(e.getNewValue().toString());  
  53.         }  
  54.         }  
  55.     public String getInput() ...{  
  56.         return input;  
  57.     }  
  58.     public void setInput(String input) ...{  
  59.         this.input = input;  
  60.     }  
  61.     public Collection getCountryItems() ...{ //给下拉框赋值  
  62.         SelectItem aa= new SelectItem();  
  63.         if (countryItems == null) ...{  
  64.         countryItems = new ArrayList();  
  65.         countryItems.add(new SelectItem("Sun""Sun"null));  
  66.         countryItems.add(new SelectItem("Month""Month"null));  
  67.         countryItems.add(new SelectItem("Earth""Earth"null));  
  68.         }  
  69.         return countryItems;  
  70.         }  
  71.         public void setCountryItems(ArrayList<selectitem> countryItems) ...{  </selectitem>
  72.         this.countryItems = countryItems;  
  73.         }  
1

与所有值变化监听器一样,上述监听器将传递一个值变化事件,该监听器使用该事件来访问组件的新值。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
 
  1. <%@ page language="java" pageEncoding="ISO-8859-1"%>  
  2. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>  
  3. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>  
  4.   
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  6. <html>  
  7.     <f:view>  
  8.         <head>  
  9.             <title>This is the first JSF example!</title>  
  10.         </head>  
  11.         <body>  
  12.             <h:form>  
  13.                 <h:inputText value="#{user.input}" id="input" />  
  14.                 <h:selectOneMenu id="select" valueChangeListener="#{user.myEvent}"  
  15.                     onchange="submit()" value="#{user.selectedContent}">  
  16.                     <f:selectItems value="#{user.countryItems}"></f:selectItems>  
  17.                 </h:selectOneMenu>  
  18.   
  19.                 <p>  
  20.                     <h:commandButton value="Login" action="login" id="btnSubmitAdd"  
  21.                         actionListener="#{user.listen}" />  
  22.                 </p>  
  23.                 <h:outputText value="#{user.result}" />  
  24.             </h:form>  
  25.         </body>  
  26.     </f:view>  
  27. </html>  


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

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

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

认识action listener和action之间的区别很重要,动作被设计用于业务逻辑并参与导航处理,而动作监听器通常执行用户页面逻辑,但不参与导航处理。当动作需要用户界面相关的信息时,动作监听器通常与动作一起工作。</h:commandbutton>
分享到:
评论
1 楼 prajuacj 2008-10-10  
请教要是需要在监听器中实现页面错误提示怎么实现?谢谢

相关推荐

Global site tag (gtag.js) - Google Analytics