1 / 24

J2EE —— 第 17 章 JavaServer Faces 技术

J2EE —— 第 17 章 JavaServer Faces 技术. 什么是 JavaServer Faces 技术. 表示 UI 组件、管理它们的状态，处理事件、服务器验证、数据转换，定义页面导航，支持国际化和可访问性，以及为所有这些特性提供可扩展性的 API 两个自定义标签库，分别用于表示 JSP 页面中的 UI 组件和用于将 UI 组件联系到服务器端对象. 可以用 JavaServer Faces 做什么. 把客户端生成的事件通过网络送给服务器端应用代码 把页面上的 UI 组件绑定到服务器端数据 用可重用和可扩展组件构造 UI

maxim
Download Presentation

J2EE —— 第 17 章 JavaServer Faces 技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. J2EE——第17章JavaServer Faces技术

  2. 什么是JavaServer Faces技术 • 表示UI组件、管理它们的状态，处理事件、服务器验证、数据转换，定义页面导航，支持国际化和可访问性，以及为所有这些特性提供可扩展性的API • 两个自定义标签库，分别用于表示JSP页面中的UI组件和用于将UI组件联系到服务器端对象

  3. 可以用JavaServer Faces做什么 • 把客户端生成的事件通过网络送给服务器端应用代码 • 把页面上的UI组件绑定到服务器端数据 • 用可重用和可扩展组件构造UI • 在服务器请求的寿命之外保存和还原UI状态

  4. 运行在服务器上的UI • myUI管理JSP页面引用的对象 • 映射到JSP页面的标签的UI组件对象 • 在组件上注册的事件监听器、验证程序和转换器 • 用户封装组件的数据及特定于应用程序功能的对象

  5. JavaServer Faces技术的优点 • 行为和表示的分离 • 强大的体系结构 • 管理组件状态 • 处理组件数据 • 验证用户输入 • 处理事件

  6. 什么是JavaServer Faces应用程序 • 包含特定于应用程序的功能及数据的JavaBeans组件 • JSP页面 • 服务器端助手类 • 用于在页面上呈现UI组件的自定义标签库 • 用于表示事件处理程序、验证程序和其它动作的自定义标签库 • 在服务器上表示成有状态对象的UI组件 • 定义UI组件属性和功能的Bean • 验证器、转换器、事件监听器和事件处理程序 • 应用程序配置资源文件

  7. 框架角色 • 页面设计者：自定义标签库 • 应用程序开发人员：对象，事件处理程序、验证程序 • 组件设计者 • 应用程序架构师：设计，页面导航，配置bean，注册对象 • 工具提供商

  8. 简单JavaServer Faces应用程序 <HTML><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <body bgcolor="white"><f:view><h:form id="helloForm" > <h2>Hi. My name is Duke. I'm thinking of a number from <h:outputText value="#{UserNumberBean.minimum}"/> to <h:outputText value="#{UserNumberBean.maximum}"/>. Can you guess it?</h2> <h:graphicImage id="waveImg" url="/wave.med.gif" /> <h:inputText id="userNo" value="#{UserNumberBean.userNumber}"> <f:validateLongRange minimum="#{UserNumberBean.minimum}" maximum="#{UserNumberBean.maximum}" /> </h:inputText> <h:commandButton id="submit" action="success"value="Submit" /> <h:message style="color: red; font-family: 'New Century Schoolbook', serif; font-style: oblique; text-decoration: overline" id="errors1“ for="userNo"/> </h:form></f:view></body></HTML>

  9. 定义页面导航 <navigation-rule> <from-view-id>/greeting.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/response.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/response.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/greeting.jsp</to-view-id> </navigation-case> </navigation-rule>

  10. 开发bean(UserNumberBean) Integer userNumber = null; ... public void setUserNumber(Integer user_number) { userNumber = user_number; } public Integer getUserNumber() { return userNumber; } public String getResponse() { if(userNumber != null && userNumber.compareTo(randomInt) == 0) { return "Yay! You got it!"; } else { return "Sorry, "+userNumber+" is incorrect."; } }

  11. 添加托管bean声明 <managed-bean> <managed-bean-name>UserNumberBean</managed-bean-name> <managed-bean-class>guessNumber.UserNumberBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>minimum</property-name> <property-class>long</property-class> <value>0</value> </managed-property> <managed-property> <property-name>maximum</property-name> <property-class>long</property-class> <value>10</value></managed-property></managed-bean>

  12. 用户界面组件模型 • 用于指定UI组件的状态和行为的一组UIComponent类 • 用于定义如何以各种方式呈现组件的呈现模型 • 用于定义如何处理组件事件的事件和监听器模型 • 定义如何在组件上注册数据转换器的转换模型 • 定义如何在组件上注册验证程序的验证模型

  13. 用户界面组件类 • UIColumn UICommand • UIData UIForm • UIGraphic UIInput • UIMessage UIMessages • UIOutput UIPanel • UIParameter UISelectBoolean • UISelectItem UISelectItems • UISelectMany UISelectOne • UIViewRoot

  14. 组件呈现模型 • 组件的功能由组件类定义 • 组件的呈现由呈现程序定义 • 例如： • UICommand组件

  15. UI组件标签(1)

  16. UI组件标签(2)

  17. 转换模型 • 组件绑定到对象 • 模型视图：int, long, Date • 表示视图：yyyy-mm-dd • 组件数据支持的类型 • 自动在两个视图之间转换数据 • 例如UISelectBoolean：String和Boolean • 在组件上注册Converter实现 • Converter实现在两个视图之间转换组件数据 • 实现Convert类、注册Convert类、在组件标签中引用Converter

  18. 事件和监听器模型 • 值更改事件 • 动作事件：按钮和超链接 • 数据模型事件：选定UIData组件新一行 • 事件响应 • valueChangeListerner,actionListener标签 • 组件标签属性中引用支持bean的事件处理方法

  19. 验证模型 • 标准Validator实现标签 • 自定义验证 • 实现执行验证的Validator接口 • 向应用程序注册Validator实现 • 创建自定义标签或用Validator标签来注册组件上的验证程序 • 实现执行验证的支持bean方法 • 从组件标签的Validator属性引用验证程序

  20. 导航模型 • 程序配置资源文件中定义导航规则 • 按钮或超连接组件的action属性的结果String • 动作事件->动作方法->结果String-> NavigationHandle->匹配导航规则->目标页面 <navigation-rule> <from-view-id>/greeting.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/response.jsp</to-view-id> </navigation-case> </navigation-rule>

  21. 受支持bean的管理 • 受支持bean是与UI组件有关的JavaBeans组件 • 定义UI组件属性、绑定组件属性到value或component，定义验证、事件处理、导航处理 <h:inputText id="userNo" value="#{UserNumberBean.userNumber}" validator="#{UserNumberBean.validate}" /> <h:inputText binding="#{UserNumberBean.userNoComponent}" /> UIInput userNoComponent = null; ... public void setUserNoComponent(UIInput userNoComponent) { this.userNoComponent = userNoComponent; } public UIInput getUserNoComponent() { return userNoComponent; }

  22. 各个部分如何进行组合

  23. 请求处理的生命周期场景 • 非Faces请求生成Faces响应(HTML上的超链接) • 提供到FacesServlet的映射、创建新视图、把视图存储在FacesContext中、获取视图需要的对象引用、调用FacesContext.renderResponse、跳到呈现响应阶段，强制立即呈现视图 • Faces请求生成非Faces响应 • 调用FacesContext.responseComplete跳过呈现响应阶段，可以在应用请求、处理验证、更新模型值阶段调用 • Faces请求生成Faces响应 • 不需要其它步骤

  24. 标准请求处理生命周期

More Related