1 / 54

JavaServer Faces

JavaServer Faces. Web 开发技术. Web 架构 用超文本技术（ HTML ）实现信息与信息的连接； 用统一资源定位技术（ URI ）实现全球信息的精确定位； 用新的应用层协议（ HTTP ）实现分布式的信息共享。 静态  动态 客户端技术 HTML 、 Java Applets 、 JavaScript 、 ActiveX 、 CSS 、 DHTML 、 XHTML 服务端技术 CGI （ Common Gateway Interface ） C 、 C++ 、 Pascal Perl 、 Python

lorne
Download Presentation

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. JavaServer Faces

  2. Web开发技术 • Web架构 • 用超文本技术（HTML）实现信息与信息的连接； • 用统一资源定位技术（URI）实现全球信息的精确定位； • 用新的应用层协议（HTTP）实现分布式的信息共享。 • 静态  动态 • 客户端技术 • HTML、Java Applets、JavaScript、ActiveX、CSS、DHTML、XHTML • 服务端技术 • CGI（Common Gateway Interface） • C、C++、Pascal • Perl、Python • PHP、ASP、Servlet（JSP）+ JavaBean

  3. 最新发展 • Java Web框架 • Struts、Spring MVC、WebWork、Tapestry • JSF • AJAX(Asynchronous JavaScript and XML) • XHTML 和 CSS 的标准表示; • 使用文档对象模型DOM实现动态显示及用户交互; • 使用 XML 、XSLT和XMLHttpRequest进行数据交换及操作; • 使用 javascript 将所有技术绑定在一起。 • Agile Web • Ruby on Rails • Python（Django、TurboGears、Pylons）

  4. 主要内容 • JSF简介 • JSF入门 • JSF标签 • JSF开发环境

  5. JSF简介 • 什么是JSF • JSF的特性 • JSF与其它框架的比较 • JSF实现 • JSF示例

  6. 什么是JSF • JavaServer Faces (JSF) ：符合JavaEE5标准的Java Web应用框架。目标：简化开发。 • JSF提供： • 标准的编程接口 • 丰富可扩展的组件库 • 一个核心的JSP标记库用来处理事件、执行验证以及其他非UI相关的操作（core） • 一个标准的HTML标记库来表示UI组件（html） • 事件驱动模型 • JSF通过IDE工具支持拖放式开发。

  7. JSF的由来和目标 • 由来 • EJB2的失败 • 非官方Web框架的兴起 • 目标 • 简化开发 • 超越现有Web框架 • 试图在不同的角度上提供网页设计人员、应用程序设计人员、组件开发人员解决方案，让不同技术的人员可以彼此合作又不互相干扰

  8. JSF 体系结构 • JSF 的主要优势之一就是它既是 Java Web 用户界面标准又是严格遵循模型-视图－控制器 (MVC) 设计模式的框架。用户界面代码（视图）与应用程序数据和逻辑（模型）的清晰分离使 JSF 应用程序更易于管理。为了准备提供页面对应用程序数据访问的 JSF 上下文和防止对页面未授权或不正确的访问，所有与应用程序的用户交互均由一个前端“Faces”servlet（控制器）来处理。

  9. JSF的特性 • 技术特性 • 一流的UI组件和事件模型 • POJO依赖注入（又称控制反转） • 客户端独立性 • 使用或者不使用工具 • 可扩展的导航（类似于Struts导航，注：Page导航） • 强大的扩展能力 （如Shale） • 完全的集成（如集成Spring、JPA） • 本地化和易理解性

  10. JSF的特性 • 市场和商业特性 • 广泛的采用，包括SUN，Oracle，IBM，BEA，Apache，EDS • 作为JavaEE 5.0的组成部分 • 大型第三方组件市场（iLog, Business Objects, Oracle, Sun, IBM) • 业内领先的工具支持（Sun Java Studio Creator, NetBeans，Oracle JDeveloper, IBM WSAD, BEA Workshop, Exadel Studio)

  11. 与其它框架的比较（来自TSS）

  12. JSF的优势 • UI组件（UI-component） • 事件驱动模式 • 用户界面到业务逻辑的直接映射 • 程序员和网页设计人员的分工 • 请求处理生命周期的多阶段划分 • 全面的用户自定义支持 • Web开发的官方标准之一 • 大量的IDE工具支持

  13. JSF实现 • JSF是标准 • 实现 • Sun JSF RI • Apache MyFaces • 组件库 • Tomahawk • ADF Faces (from Oracle) • Tobago

  14. JSF示例 <%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@page contentType="text/html;charset=GB2312"%> <html> <head> <title>第一个JSF程序</title> </head> <body> <f:view> <h:form> <h3>请输入您的名称</h3> 名称: <h:inputText value="#{user.name}"/><p> <h:commandButton value=“提交" action="login"/> </h:form> </f:view> </body> </html>

  15. JSF入门 • 第一个JSF程序 • JSF Expression Language • 国际化（I18N） • Managed Beans • 数据转换与验证 • 事件处理

  16. 第一个JSF程序 • JSF开发环境 • Eclipse WTP • JSF插件 • JSF实现（MyFaces） • Tomcat • Managed-Bean • JSP页面 • Pages Navigation

  17. JSF Expression Language • 搭配 JSF 标签来使用，是用来存取数据对象的一个简易语言。 • 以#开始，将变量或运算式放置在 { 与 } 之间。 • #{userBean.name} • EL的变量名也可以程序执行过程中所声明的名称，或是JSF EL预定义的隐含对象。 • #{param.name} • 对于Map类型对象，可以使用 ‘.’运算符指定key值来取出对应的value，也可以使用 [ 与 ] 来指定。 • #{param['name']} • #{someBean.someMap[user.name]} • 如果变量是List类型或阵列的话，则可以在 [] 中指定索引。 • #{someBean.someList[0]}

  18. JSF Expression Language • 也可以指定字面常数，对于true、false、字符串、数字，JSF EL会尝试进行转换。 • <h:outputText value="#{true}"/> • <h:outputText value=“#{‘This is a test’}”/> • 在声明变量名称时，要留意不可与JSF的保留字或关键字同名。 • true false null div mod and or not eq ne lt gt le ge instanceof empty • 在EL中可以直接进行一些算术运算、逻辑运算与关系运算。 • 算术运算符：加法 (+), 减法 (-), 乘法 (*), 除法 (/ or div) 与余除 (% or mod) • 三元运算：( expression ? result1 : result2) • 逻辑运算：and(或&&)、or(或!!)、not(或!) • 关系运算：小于Less-than (< or lt)、大于Greater-than (> or gt)、小于或等于Less-than-or-equal (<= or le)、大于或等于Greater-than-or-equal (>= or ge)、等于Equal (== or eq)、不等于Not Equal (!= or ne) • EL运算符的执行优先顺序与Java运算符对应

  19. 国际化信息 • JSF的国际化（Internationalization，简写I18N）信息处理是基于Java对国际化的支持，可以在一个信息资源文件中统一管理信息资源，资源文件的名称是.properties，而内容是名称与值的配对。 • 资源文件名称由basename加上语言与地区来组成： basename.properties basename_en.properties basename_zh_CN.properties • 信息资源文件必须是ISO-8859-1编码，所以对于非西方语系的处理，必须先将之转换为Java Unicode Escape格式： nameText=名称  nameText=\u540d\u79f0 • 使用<f:loadBundle>标签来指定载入信息资源： <f:loadBundle basename="messages" var="msgs"/> <h:outputText value="#{msgs.nameText}"/>

  20. 国际化信息 • <f:view>可以设定locale属性，直接指定所要使用的语系： <f:view locale="zh_CN"> <f:loadBundle basename="messages" var="msgs"/> • 也可以在faces-config.xml中设定语系： <faces-config> <application> <local-config> <default-locale>zh_CN</default-locale> <supported-locale>en</supported-locale> </local-config> </application> ..... </faces-config> • 甚至可以让使用者选择自己的语系： <f:view locale="#{user.locale}"> <f:loadBundle basename="messages" var="msgs"/> <h:selectOneRadio value="#{user.locale}"> <f:selectItem itemValue="zh_CN" itemLabel="#{msgs.zh_CNText}"/> <f:selectItem itemValue="en" itemLabel="#{msgs.enText}"/> </h:selectOneRadio>

  21. Managed Beans • JSF 使用 Bean 来达到逻辑层与表现层分离的目的，Bean 的管理集中在配置文件中，只要修改配置文件，就可以修改 Bean 之间的相依关系。 • Backing Bean，Glue Bean：在真正的业务逻辑Bean及UI组件之间搭起桥梁，在Backing Bean中会呼叫业务逻辑Bean处理使用者的请求，或者是将业务处理结果放置其中，等待UI组件取出当中的值并显示结果给使用者。

  22. Managed Beans • 在faces-config.xml中集中管理 • 作用域： • application ：一直存活 • session ：会话过程 • request ：请求阶段 • none ：需要时，临时

  23. Beans的配置与设定 • JSF预定义会读取faces-config.xml中关于Bean的定义 • 可在web.xml中利用javax.faces. CONFIG_FILES参数指定自定义文件： <web-app> <context-param> <param-name>javax.faces.CONFIG_FILES</param-name> <param-value>/WEB-INF/beans.xml</param-value> </context-param> ... </web-app> • 定义文件可以有多个，中间以 “,”区隔： /WEB-INF/navigation.xml,/WEB-INF/beans.xml

  24. Beans的配置与设定 • Bean的基本定义： • 名称 <managed-bean-name> • 类 <managed-bean-class> • 存活范围 <managed-bean-scope> • 可选设置 • 属性的初始值 <managed-property> <managed-property> <property-name>user</property-name> <value>#{user}</value> </managed-property>

  25. Beans上的List <managed-property> <property-name>someProperty</property-name> <list-entries> <value-class>java.lang.Integer</value-class> <value>1</value> <value>2</value> <value>3</value> </list-entries> </managed-property>

  26. Beans上的Map <managed-property> <property-name>someProperty</property-name> <map-entries> <value-class>java.lang.Integer</value-class> <map-entry> <key>someKey1</key> <value>100</value> </map-entry> <map-entry> <key>someKey2</key> <value>200</value> </map-entry> </map-entries> </managed-property>

  27. 访问Managed Beans • 如果要在其它类中取得Bean对象，则可以先取得javax.faces.context.FacesContext，它代表了JSF目前的执行环境对象，接着尝试取得javax.faces.el.ValueBinding对象，从中取得指定的Bean对象： FacesContext context = FacesContext.getCurrentInstance(); ValueBinding binding = context.getApplication(). createValueBinding("#{user}"); UserBean user = (UserBean) binding.getValue(context); • 取得Bean的某个属性： FacesContext context = FacesContext.getCurrentInstance(); ValueBinding binding = context.getApplication(). createValueBinding("#{user.name}"); String name = (String) binding.getValue(context);

  28. 数据转换与验证 • 转换器（Converter）协助模型与视图之间的数据转换 • 验证器（Validator）协助进行语意检验（Semantic Validation）

  29. 标准转换器 • HTTP字符串  Java对象 • 对于基本数据类型（primitive type）或是其Wrapper类，JSF会使用javax.faces.Boolean、javax.faces.Byte……等自动进行转换 • 对于 BigDecimal、BigInteger，则会使用javax. faces.BigDecimal、javax.faces.BigInteger自动进行转换 • 对于DateTime、Number，可以使用<f:convert DateTime>、<f:convertNumber>标签进行转换，它们各自提供有一些简单的属性，可以让我们在转换时指定一些转换的格式细节： <h:outputText value="#{user.date}"> <f:convertDateTime pattern="yyyy/MM/dd"/> </h:outputText>

  30. 自定义转换器 • 实现javax.faces.convert.Converter接口，这个接口有两个要实现的方法： public Object getAsObject(FacesContext context, UIComponent component, String str); public String getAsString(FacesContext context, UIComponent component, Object obj); • 在faces-config.xml中注册: <converter> <converter-id>cn.wiztek.converter.User</converter-id> <converter-class>cn.wiztek.converter.UserConverter </converter-class> </converter> • 在JSF页面中通过converter-id使用转换器: <h:outputText value="#{guest.user}" converter="cn.wiztek.converter.User"/>

  31. 标准验证器 • 语法检验（Synatic Validation） • 检查使用者输入的数据是否合乎我们所要求的格式，最基本的就是检查使用者是否填入了栏目值，或是栏目值的长度、大小值等等是否符合要求。 • 三种标准验证器： • <f:validateDoubleRange> • <f:validateLongRange> • <f:validateLength>

  32. 自定义验证器 • 实现javax.faces.validator.Validator接口中的validate()方法，如果验证错误，则丢出一个ValidatorException，它接受一个FacesMessage对象，这个对象接受三个参数，分别表示信息的严重程度（INFO、 WARN、ERROR、FATAL）、信息概述与详细信息内容，这些信息将可以使用<h:messages>或<h: message>标签显示在页面上。 • 在faces-config.xml中注册验证器的标识（Validater ID）。 • 通过<f:validator>标签并设定validatorId属性来使用自定义验证器。

  33. 错误信息处理 • 预定义的错误信息可以使用<h:messages>或<h:message>标签显示出来 • 通过提供一个信息资源文件可以修改预定义的错误信息 • MyFaces提供了支持中文的错误信息文件Messages_zh_CN.properties • 也可以在程序中使用FacesMessage来提供信息

  34. 自定义转换/验证标签 • 使用<f:attribute>标签来设定属性： <f:attribute name="pattern" value=".+[0-9]+"/> • 在自定义验证器中用下面语句获取属性： String pattern = (String) component.getAttributes().get("pattern"); • 也可以开发自己的一组验证标签，并提供相关属性设定： <co:passwordValidator pattern=".+[0-9]+"/>

  35. 事件处理 • 动作事件（Action Event ） • 即时事件（Immediate Event ） • 值变事件（Value Change Event ） • 阶段事件（Phase Event）

  36. 动作事件（Action Event ） • 通过action属性绑定一个事件方法： <h:commandButton value="提交" action="#{user.verify}"/> • 通过actionListener属性绑定一个事件方法， action绑定返回结果的方法： <h:commandButton value="提交" actionListener="#{user.verify}" action="#{user.outcome}"/> • 用<f:actionListener>标签向组件注册事件监听器（实现javax.faces.event. ActionListener接口），action绑定返回结果的方法： <h:commandButton value="提交" action="#{user.outcome}"> <f:actionListener type="onlyfun.caterpillar.LogHandler"/> <f:actionListener type="onlyfun.caterpillar.VerifyHandler"/> </h:commandButton>

  37. 即时事件（Immediate Event ） 即时事件是指JSF视图组件在取得请求中该取得的值之后，即立即处理指定的事件，而不再进行后续的转换器处理、验证器处理、更新模型值等流程。 <h:commandButton value="#{msgs.Text}" immediate="true" actionListener="#{user.changeLocale}"/>

  38. 值变事件（Value Change Event ） • 使用者改变了JSF输入组件的值后提交表单，就会发生值变事件，丢出一个javax.faces.event.ValueChangeEvent对象 • 直接设定JSF输入组件的valueChangeListener属性： <h:selectOneMenu value="#{user.locale}" onchange="this.form.submit();" valueChangeListener="#{user.changeLocale}"> <f:selectItem itemValue="zh_CN" itemLabel="Chinese"/> <f:selectItem itemValue="en" itemLabel="English"/> </h:selectOneMenu> • 实现javax.faces.event.ValueChangeListener接口，并定义其processValueChange()方法；然后在JSF页面上使用<f:valueChangeListener>标签，并设定其type属性： <h:selectOneMenu value="#{user.locale}" onchange="this.form.submit();"> <f:valueChangeListenet type=“cn.wiztek.SomeListener"/> <f:selectItem itemValue="zh_CN" itemLabel="Chinese"/> <f:selectItem itemValue="en" itemLabel="English"/> </h:selectOneMenu>

  39. 阶段事件（Phase Event） • 重建视图（Restore View） 依客户端传来的session数据或服务器端上的session数据，重建JSF视图组件。 • 套用请求值（Apply Request Values） JSF视图组件各自获得请求中的属于自己的值，包括旧的值与新的值。 • 执行验证（Process Validations） 转换为对象并进行验证。 • 更新模型值（Update Model Values） 　　更新Bean或相关的模型值。 • 唤起应用程序（Invoke Application） 　　执行应用程序相关逻辑。 • 绘制响应页面（Render Response） 　　对先前的请求处理完之后，产生页面以反应客户端执行结果。

  40. 阶段事件（Phase Event） • 在每个阶段的前后会引发javax.faces.event. PhaseEvent • 实现javax.faces.event.PhaseListener，并向javax.faces.lifecycle.Lifecycle登记这个Listener，便可捕获事件 • getPhaseId()、beforePhase()与afterPhase() • PhaseId： • PhaseId.RESTORE_VIEW • PhaseId.APPLY_REQUEST_VALUES • PhaseId.PROCESS_VALIDATIONS • PhaseId.UPDATE_MODEL_VALUES • PhaseId.INVOKE_APPLICATION • PhaseId.RENDER_RESPONSE • PhaseId.ANY_PHASE

  41. JSF标签 • 标准标签 • 输出类标签 • 输入类标签 • 命令类标签 • 选择类标签 • 其他标签 • 表格处理

  42. JSF标准标签 • 输出（Outputs） 　　其名称以output作为开头，作用为输出指定的信息或绑定值。 • 输入（Inputs） 　　其名称以input作为开头，其作用为提供使用者输入框。 • 命令（Commands） 　　其名称以command作为开头，其作用为提供命令或链接按钮。 • 选择（Selections） 　　其名称以select作为开头，其作用为提供使用者选项的选取。 • 其它 　　包括了form、message、messages、graphicImage等等未分类的标签。

  43. 标准HTML标签的属性

  44. 输出类标签 • outputLabel 　　产生<label> HTML标签，使用for属性指定组件的client ID，例如： <h:inputText id="user" value="#{user.name}"/> <h:outputLabel for="user" value="#{user.name}"/> • outputLink 　　产生<a> HTML标签，搭配<f:param>可帮链结加上参数，所有的参数都会变成 name=value 的类型附加在链接后，value所指定的内容也可以是JSF EL绑定。例如： <h:outputLink value=“../index.jsp”> <h:outputText value=“Link to Index”/> <f:param name=“name” value=“MyName”/> </h:outputLink> • outputFormat 产生指定的文字信息，可以搭配<f:param>来设定信息的参数以格式化文字信息，例如： <h:outputFormat value="{0}, Your name is {1}."> <f:param value="Hello"/> <f:param value="Guest"/> </h:outputFormat> • outputText 　　简单的显示指定的值或绑定的信息，例如： <h:outputText value="#{user.name}"/>

  45. 输入类标签 • inputText 　　显示单行输入框，即输出<input> HTML标签，其type属性设定为text，例如： <h:inputText value="#{user.name}"/> • inputTextarea 显示多行输入文字区域，即输出<textarea> HTML标签，例如： <h:inputTextarea value="#{user.command}"/> • inputSecret 　　显示密码输入框，即输出<input> HTML标签，其type属性设定为password，例如： <h:inputSecret value="#{user.password}"/> • inputHidden 　　隐藏输入框，即输出<input> HTML标签，其type属性设定为hidden，隐藏输入框的值用于保留一些信息于客户端，以在下一次发送表单时一并提交，例如： <h:inputHidden value="#{user.hiddenInfo}"/>

  46. 命令类标签 • commandButton 显示一个命令按钮，即输出<input> HTML标签，其type属性可以设定为button、submit或reset，预设是submit，按下按钮会触发 javax.faces.event. ActionEvent，例如： <h:commandButton value="提交“ action="#{user.verify}"/> • commandLink 产生超链接，会输出<a> HTML标签，而href属性会有‘#’，而onclick属性会含有一段JavaScript程序，这个JavaScript的目的是按下链接后自动提交表单，具体来说其作用就像按钮，但外观却是超链接，例如： <h:commandLink value="#{msgs.commandText}" action="#{user.verify}"/>

  47. 选择类标签 • 选取框 • <h:selectBooleanCheckbox> • 单选 • 单选按钮<h:selectOneRadio> • 单选列表<h:selectOneListbox> • 单选菜单<h: selectOneMenu> • 复选 • 复选框<h:selectManyCheckbox> • 复选列表<h:selectManyListbox> • 复选菜单<h: selectManyMenu>

  48. 选择类标签的选项 • <f:selectItem> • itemLabel • itemValue 或者value绑定一个传回javax.faces. model.SelectItem的方法 • <f:selectItems> • value绑定至一个提供传回SelectItem的列表（数组）的方法 SelectItem: value, label • value绑定至一个提供传回Map对象的方法 Map : label, value

  49. 其他标签 • <h:messages>或<h:message> • <h:graphicImage> 图片 • <h:panelGrid> 排版 • 本体间只能包括JSF组件，如果想要放入非JSF组件，例如简单的样版（template）文字，则要使用 <f:verbatim>包括住。 • <h:panelGroup> 包装组件

  50. 表格处理 • <h:dataTable>配合<h:column>实现以表格的方式显示数据 • <f:facet> header与footer分别表示表头和表尾 • 使用DataModel处理复杂的数据

More Related