JSF 事件处理_软件开发

PPT 内容

1. 演讲人：Apusic OperaMasks 开发团队时间：2007-09AOM Tutorials (6)：JSF 事件处理Kingdee Middleware 2007-03
2. 注意本文原著来源自 www.coreservlets.com/JSF-Tutorial/ 本文将原著译成中文，但受限于译者水平，难免会有个别差错本文介绍的所有内容，基本上是 JSF 标准知识，以使本文成为 JSF 入门教程原文在MyFaces/Sun RI上的示例，在本文中会将其移植在 Apusic OperaMasks 之上，从而使读者了解 Apusic OperaMasks 如何使用如果您想与本文作者联系，请mail至：operamasks(AT)gmail.comKingdee Middleware 2007-03
3. JSF：事件处理提纲ContentAction Controller与事件监听器的比较 ActionListener ValueChangeListener 在同一个GUI元件中结合使用ActionListener和ActionControllerKingdee Middleware 2007-03
4. 动机两种不同的事件类型 Action Controller：在后端程序处理的事件(通常这类事件会涉及业务逻辑) 我们已经在前面的章节中有详细的介绍 ActionListener与ValueChangeListener：会对用户界面（UI）产生影响的事件 JSF将上述事件的处理方法划分为ActionController（行为控制器）和事件监听器（ActionListener和ValueChangeListener ） ActionController主要用于处理表单 ActionController被调用之前，form的数据会被填充在ManagedBean中 ActionController调用之前，还会完成验证逻辑的调用(请看后面章节) 返回字符串（导航条件），直接影响页面导航事件监听器处理UI事件通常在form数据被填充给ManagedBean之前调用通常会绕过验证逻辑从不直接影响页面导航 Kingdee Middleware 2007-03
5. 事件处理 vs. Ajax事件处理是JSF中最方便的特性之一特别是与Struts或常规的MVC相比然而，Ajax在这一方面做得更好当申请事件处理时，大多数情况下，只要少量的元素改变在这种情况下，Ajax可产生出更具交互性的用户体验尽管这种技术在老的浏览器或未启用JavaScript时会失效事实上，AOM对Ajax的支持是最完美的本章节不介绍此内容，会有专门的章节介绍Ajax相关内容请参考 www.operamasks.org 相关资料Kingdee Middleware 2007-03
6. JSF控制流程(更新)Kingdee Middleware 2007-03
7. 事件监听器的类型ActionListener 在点击按钮、图形映射和附带JavaScript的超链接时调用自动提交对应的表单 ValueChangeListener 在点击组合框、复选框、单选框、文本框等控件时调用不会自动提交对应的表单 Kingdee Middleware 2007-03
8. JSF：事件处理提纲ContentActionController与事件监听器的比较 ActionListener ValueChangeListener 在同一个GUI元件中结合使用ActionListener和ActionControllerKingdee Middleware 2007-03
9. 在JSF中使用ActionListener一些按钮提交表单并在后端进行业务处理，用的是 Action Controller而并非 ActionListener 用倘若另一些按钮只影响UI，此时，应该用ActionListener 用你通常希望这个处理发生在beans的form数据被加载之前，特别是在验证控件进行验证前因为通常情况下，当UI被调整时，表单的信息并不完整用”immediate”可明确指定这个listener在bean的form数据被加载前或触发验证前调用Kingdee Middleware 2007-03
10. Java代码中的ActionListener实现通常情况下，监听器是放在表单对应bean的类中但如果你用FacesContext接收来自request或session的对象并对表单对应bean进行查询，可以把监听器放在单独的类中以一个ActionEvent当作例子无返回类型(而事件控制器中返回String类型) ActionEvent属于javax.faces.event ActionEvent有一个getComponent的方法，用于引用UIComponent 你可以从UIComponent中取得component ID、renderer和其他的底层信息代码样例 public void someMethod(ActionEvent event) { doSomeSideEffects(); }Kingdee Middleware 2007-03
11. 实例：使某些UI控件失去作用每一个UI控件有一个”disabled”特性，其默认值为false 用带有ActionListener的按钮作例子，演示如何使控件失去作用和重新工作详细例子在一份样本简历中显示收集到的”name”和”job title” 创建组合框以便用户选择前景色和背景色。 f:selectltems的值必须是一个SelectIem型的数组由一个按钮控制组合框的disable属性是ture还是false Kingdee Middleware 2007-03
12. JSF的创建步骤1）创建一个bean A）为表单数据提供特性 B）提供ActionController和ActionListener的方法 C）为结果数据提供占位符 2）创建一个输入表单 A）输入与表单相关的bean特性 B）指定按钮的ActionController方法返回的情况 C）指定按钮和其他GUI控件事件监听方法 3）创建结果页面用h:outputText输出表单和结果数据 Kingdee Middleware 2007-03
13. 步骤1：创建BeanA）为表单数据提供特性 @ManagedBean(name="resumeBean", scope=ManagedBeanScope.SESSION) public class ResumeBean implements Serializable { ... private String fgColor = "BLACK"; private String bgColor = "WHITE"; private SelectItem[] availableColorNames = { new SelectItem("BLACK"), new SelectItem("WHITE") }; public String getFgColor() { return fgColor; } public void setFgColor(String fgColor) { this.fgColor = fgColor; } ... public SelectItem[] getAvailableColors() { ... } ... }Kingdee Middleware 2007-03
14. 步骤1：创建Bean（续）A）为表单数据提供特性... private String name = ""; private String jobTitle = ""; ... public String getName() { return name; } public void setName(String name) { this.name = name; } public String getJobTitle() { return jobTitle; } public void setJobTitle(String jobTitle) { this.jobTitle = jobTitle; } ...Kingdee Middleware 2007-03
15. 步骤1：创建Bean（续）B）提供ActionController和ActionListener的方法... public boolean isColorSupported() { return isColorSupported; } public void toggleColorSupport(ActionEvent event) { isColorSupported = !isColorSupported; } public String showPreview() { if (isColorSupported && fgColor.equals(bgColor)) { // return "same-color"; // AOM new feature return "/WEB-INF/results/same-color.jsp"; } else { // return "success"; // AOM new feature return "/WEB-INF/results/show-preview.jsp"; } }...ActionListenerActionControllerKingdee Middleware 2007-03
16. 步骤2：创建输入表单新特性用h:selectOneMenu创建组合框用f:selectItems加载选项列表用h:commandButton 使用actionListener和immediate 指定监听器的代码，使用户在点击按钮时触发对应监听器改变按钮的label值，其值依赖于点击按钮后将进行的行为在这种情况下，按钮是一个触发器代码样例 Kingdee Middleware 2007-03
17. 步骤2：创建输入表单A）输入表单 ... Foreground color:
Background color:
... Name:
Job Title:
Kingdee Middleware 2007-03
18. 步骤2：创建输入表单B）ActionController 即便已经有ActionListener，但在某些情况下还需要ActionController 如前所说，它们调用业务逻辑和参与导航 Setter方法与验证会在ActionController执行处理前调用 ... Kingdee Middleware 2007-03
19. 步骤2：创建输入表单C）ActionListener ActionListener表现服务器端效果，并在表单上重新显示通常，它们不调用业务逻辑、setter方法，且从不参与页面导航正常情况下，你应该用”immediate”来显式指明setter方法不被调用 ... Kingdee Middleware 2007-03
20. 步骤2：初始结构文件位于apusic_dir/domains/mydomain/applications/aom-jobs/customize.jsp URL是http://localhost:6888/aom-jobs/customize.facesKingdee Middleware 2007-03
21. 步骤2：点击按钮后的结果(独立于ActionController)由于AOM提供了强大的扩展功能，使用者不必为维护faces-config.xml烦恼。如对AOM导航有任何不明白，可参考AOM Tutorials第一、二章的内容Kingdee Middleware 2007-03
22. 步骤3：创建结果页面WEB-INF/results/same-color.jsp 结果页面采用ActionController而不是ActionListener <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> … You chose "" as both the foreground and background color.
You don't deserve to get a job, but I suppose we will let you try again. … Kingdee Middleware 2007-03
23. 步骤3：创建结果页面WEB-INF/results/show-preview.jsp<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> … " BGCOLOR="">

Experienced seeks challenging position doing something.
Employment History
Blah, blah, blah, blah. Yadda, yadda, yadda, yadda. … Kingdee Middleware 2007-03
24. 步骤4：相同颜色的样例结果Kingdee Middleware 2007-03
25. 步骤4：不同颜色的样例结果Kingdee Middleware 2007-03
26. JSF：事件处理提纲ContentActionController与事件监听器的比较 ActionListener ValueChangeListener 在同一个GUI控件中结合使用ActionListener和ActionControllerKingdee Middleware 2007-03
27. 在JSP中使用ValueChangeListenerActionListener隶属于按钮控件当点击按钮时会自动提交表单 ValueChangeListener隶属于组合框、列表框、单选框、复选框、文本框等不会自动提交表单需要添加onclick=”submit()”或onchange=”submit()”JavaScript代码才能提交表单 Firefox和IE对事件的响应不一样当组合框的选项改变、单选框被选中或复选框被check/uncheck时，Firefox、Netscape和Opera fire触发onchange事件 IE需在选项发生变化且其他GUI控件获得聚焦时触发事件 IE更老版本的事件触发表现也不一样！需要在多种浏览器上测试事实上，我们建议用AOM的能够达到同样的目的并获得更好的效果本章节不对Ajax作过多介绍，请参考其它专门章节Kingdee Middleware 2007-03
28. 实现ValueChangeListener通常监听器方法位于表单bean的类中如前论述以一个ValueChangeEvent作为例子有用的ValueChangeEvent方法有： getComponet(为了论及ActionEvent) getOldValue(GUI元件的旧值) getNewValue(GUI元件的现在值) 需要，因为bean的数据很有可能未被加载复选框值的类型是Boolean 单选框或文本框的值与request的参数对应代码样例 public void someMethod(ValueChangeEvent event) { boolean flag = ((Boolean)event.getNewValue()).booleanValue(); takeActionBasedOn(flag); }Kingdee Middleware 2007-03
29. 实例：改变前景色列表和背景色列表的颜色值在h:selectOneMenu中使用f:selectItems以获取组合框的列表值用复选框调用ValueChangeListener 下面定义的列表拥有监听触发器颜色名 RGB的值Kingdee Middleware 2007-03
30. JSF的创建步骤1）创建一个bean A）为表单数据提供特性 B）提供ActionController和ValueChangeListener的方法 C）为结果数据提供占位符 2）创建一个输入表单 A）输入与表单相关的bean特性 B）指定按钮的ActionController方法返回的情况 C）指定按钮和其他GUI控件事件监听方法 3）创建结果页面用h:outputText输出表单和结果数据Kingdee Middleware 2007-03
31. 步骤1：创建一个bean(ResumeBean)（A）颜色选项的代码private SelectItem[] availableColorNames = { new SelectItem("BLACK"), new SelectItem("WHITE") }; private SelectItem[] availableColorValues = { new SelectItem("#000000"), new SelectItem("#FFFFFF") }; private boolean isUsingColorNames = true; public SelectItem[] getAvailableColors() { if (isUsingColorNames) { return availableColorNames; } else { return availableColorValues; } }Kingdee Middleware 2007-03
32. 步骤1：创建Bean(B)ActionListener 当复选框的选项被改变即改变了颜色选项，就会返回RGB值代替颜色名 ActionController、ActionListener和其他表单数据如前例所示... public void changeColorMode(ValueChangeEvent event) { boolean flag = ((Boolean)event.getNewValue()).booleanValue(); setUsingColorNames(!flag); } public SelectItem[] getAvailableColors() { if (isUsingColorNames) { return availableColorNames; } else { return availableColorValues; } }...Kingdee Middleware 2007-03
33. 步骤2：创建输入表单(和指定事件代码)新特性用h:selectBooleanCheckbox创建复选框用valueChangeListener指定事件代码使用onclick会在复选框值发生变化时，自动提交表单在Firefox中只要值发生了改变即会触发onchange，但在IE中触发onchange事件代码样例 onclick="submit()"是在客户端进行处理的JavaScript代码Kingdee Middleware 2007-03
34. 步骤2：初始结果文件位于apusic_dir/domains/mydomain/applications/aom-jobs/customize.jsp URL为http://localhost:6888/aom-jobs/customize.facesKingdee Middleware 2007-03
35. 步骤2：改变checkbox值的结果(独立于ActionController)Kingdee Middleware 2007-03
36. 步骤3与前面的例子一样，具体步骤请看前面例子的步骤3Kingdee Middleware 2007-03
37. JSF：事件处理提纲ContentActionController与事件监听器的比较 ActionListener ValueChangeListener 在同一个GUI控件中结合使用ActionListener和ActionControllerKingdee Middleware 2007-03
38. 动机起因Motivation通常情况下，ActionListener 和 ActionController 是隶属于不同的按钮有时你不得不两者一起使用 ActionListener能访问GUI对象底层详细信息如Renderer、client ID等当我们覆盖用户自定义控件时尤其需要最通用的例子：针对图形的客户端与服务器端映射譬如一个h:commandButton使用的是image而不是value，而我们这时需要将此image进行客户端与服务器端的映射倘若我们需要知道用户点击此图片的哪个位置（clientID）导致产生了事件，这种情况下必须用ActionListener才能够知道这些底层细节只有监听器可以获得事件产生的clientID（clientID.x，clientID.y）Kingdee Middleware 2007-03
39. 实例：从图形映射中选择背景色向用户显示灰度条让用户点击他们期望的颜色，作为背景色建立对应的RGB值读取clientID.x的值基于图片的宽度，将0到256均布于图片中用十六进制数以#RRGGBB的格式输出在ActionListener中处理导航至其它JSP页面在ActionController中处理Kingdee Middleware 2007-03
40. JSF的创建步骤1）创建一个bean A）为表单数据提供特性 B）提供ActionController和ActionListener的方法 C）为结果数据提供占位符 2）创建一个输入表单 A）输入与表单相关的bean特性 B）指定按钮的ActionController方法返回的情况 C）指定按钮和其他GUI控件事件监听方法 4）创建结果页面用h:outputText输出表单和结果数据Kingdee Middleware 2007-03
41. 步骤1：创建Bean(A)表单数据@ManagedBean(name="colorBean", scope=ManagedBeanScope.SESSION) public class ColorBean { private String bgColor = "WHITE"; public String getBgColor() { return bgColor; } public void setBgColor(String bgColor) { this.bgColor = bgColor; }... }Kingdee Middleware 2007-03
42. 步骤1：创建Bean监听器查询x的值并创建颜色控制器指定输出页面... public void selectGrayLevel(ActionEvent event) { FacesContext context = FacesContext.getCurrentInstance(); String clientId = event.getComponent().getClientId(context); HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest(); String grayLevelString = request.getParameter(clientId + ".x"); int grayLevel = 220; try { grayLevel = Integer.parseInt(grayLevelString); } catch(NumberFormatException nfe) {} grayLevel = (256 * grayLevel) / 440; String rVal = Integer.toString(grayLevel, 16); setBgColor("#" + rVal + rVal + rVal); } ...... public String showPreview() { return "/WEB-INF/results/show-preview2.jsp"; }...Kingdee Middleware 2007-03
43. 步骤2：创建输入表单指定行为和actionListener ActionListener会被第一时间执行，并且能够访问更多的事件内部细节 h:commandButton用image属性而不是value属性将图片在客户端与服务器端之间进行映射输入表单的部分代码 ... Kingdee Middleware 2007-03
44. 步骤2：结果文件位于apusic-dir/domains/mydomain/applications/aom-jobs/customize-bg.jsp URL为http://localhost:6888/aom-jobs/customize-bg.facesKingdee Middleware 2007-03
45. 步骤3：创建结果页面WEB-INF/results/show-preview2.jsp<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> Preview of Background Color ">
Preview of Background Color
Experienced employee seeks challenging position doing something.
Employment History
Blah, blah, blah, blah. Yadda, yadda, yadda, yadda. … Kingdee Middleware 2007-03
46. 步骤4：结果例子Kingdee Middleware 2007-03
47. 总结事件监听器是用于解决只影响用户界面的事件特别地，在beans的form数据被加载和触发验证前被调用用immediate=“true”指明这个行为不触发验证在监听器调用后，会重新显示表单不应用导航规则，不重定向页面 ActionListener 隶属于按钮、超链接和图形映射控件自动提交对应表单 ValueChangeListener 隶属于单选框、组合框、列表框、复选框、文本框等控件需要用onclick=“submit()”或onchange=“submit()”的方式提交表单请在各种不同的浏览器上小心测试Kingdee Middleware 2007-03
48. 本章所用到的资源基于 Apusic 应用服务器 5.x 版本建议使用 Apusic 应用服务器最新版本，点击这里下载将 aom-jobs.war 直接放到 apusic-dir/domain/mydomain/applications 目录中即可自动部署更详细的使用说明请参考这里或者 Apusic应用服务器信息中心基于 Apusic Studio 5.x 版本建议使用 Apusic Studio 最新版本，点击这里下载需要在 Apusic Studio中引入Apusic应用服务器5.x 将 aom-jobs-studio.zip 解压缩，再通过Apusic Studio中将其导入到工作区工程导入以后，可能会出现编译错误，请在Project的属性页的“Apusic工程属性”标签页内，设置正确的 Apusic应用服务器及domain 更详细的使用说明可参考 Apusic Studio 联机文档 Kingdee Middleware 2007-03
49. QuestionsKingdee Middleware 2007-03

JSF 事件处理

ediku

贡献于2012-05-23

JSF 事件处理

PPT 内容

Employment History

Preview of Background Color

Employment History

PPT 图集

相关PPT