JSF在Web开发中的应用.ppt

《JSF在Web开发中的应用.ppt》由会员分享，可在线阅读，更多相关《JSF在Web开发中的应用.ppt（79页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章 JSF入门,Email:,信息类专业课程,西北农林科技大学,主要内容,JSF简介 JSF入门 JSF标签 JSF开发环境,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

2、）+ JavaBean,最新发展,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）,二、JSF简介,什么是JSF JSF的特性 JSF与其它框架的

3、比较 JSF实现 JSF示例,什么是JSF,JavaServer Faces (JSF) ：符合JavaEE5标准的Java Web应用框架。目标：简化开发。 JSF提供： 标准的编程接口 丰富可扩展的组件库 一个核心的JSP标记库用来处理事件、执行验证以及其他非UI相关的操作（core） 一个标准的HTML标记库来表示UI组件（html） 事件驱动模型 JSF通过IDE工具支持拖放式开发。,JSF的由来和目标,由来 EJB2的失败 非官方Web框架的兴起 目标 简化开发 超越现有Web框架 试图在不同的角度上提供网页设计人员、应用程序设计人员、组件开发人员解决方案，让不同技术的人员可以彼此合

4、作又不互相干扰,JSF 体系结构,JSF 的主要优势之一就是它既是 Java Web 用户界面标准又是严格遵循模型-视图控制器 (MVC) 设计模式的框架。用户界面代码（视图）与应用程序数据和逻辑（模型）的清晰分离使 JSF 应用程序更易于管理。为了准备提供页面对应用程序数据访问的 JSF 上下文和防止对页面未授权或不正确的访问，所有与应用程序的用户交互均由一个前端“Faces”servlet（控制器）来处理。,JSF的特性,技术特性 一流的UI组件和事件模型 POJO依赖注入（又称控制反转） 客户端独立性 使用或者不使用工具 可扩展的导航（类似于Struts导航，注：Page导航） 强大的扩

5、展能力 （如Shale） 完全的集成（如集成Spring、JPA） 本地化和易理解性,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),与其它框架的比较（来自TSS）,JSF的优势,UI组件（UI-c

6、omponent） 事件驱动模式 用户界面到业务逻辑的直接映射 程序员和网页设计人员的分工 请求处理生命周期的多阶段划分 全面的用户自定义支持 Web开发的官方标准之一 大量的IDE工具支持,JSF实现,JSF是标准 实现 Sun JSF RI Apache MyFaces 组件库 Tomahawk ADF Faces (from Oracle) Tobago,JSF示例, 第一个JSF程序 请输入您的名称 名称: ,二、JSF入门,第一个JSF程序 JSF Expression Language 国际化（I18N） Managed Beans 数据转换与验证 事件处理,第一个JSF程序,JS

7、F开发环境 Eclipse WTP JSF插件 JSF实现（MyFaces） Tomcat Managed-Bean JSP页面 Pages Navigation,JSF应用一：输入页面, ,f:loadBundle basename=messages var=msg/,用于临时加载国际化资源的语言包,输出指定key对应的国际化消息,JSF应用一：输入页面,JSF应用二：开发托管Bean,从作用上看托管Bean类似struts2的Action，但作用模式不同。对于struts2的Action而言，应用通过表单提交方式把请求提交到struts2的Action；但JSF的托管Bean，系统直接将J

8、SF中的UI组件的行为绑定到托管Bean的属性或方法。 如： 该文本框的行为绑定到login Bean的name属性。 该按钮的行为直接绑定到login Bean的valid方法上,JSF应用二：开发托管Bean,public class LoginBean /下面的三个属性都会直接与JSF标签绑定 private String name; private String pass; private String err; . . . /该方法被绑定到UI组件（按钮）的action属性 public String valid() if (name.equals(crazyit) ,JSF应用三：

9、定义导航规则,JSF以导航规则来决定逻辑视图与物理视图资源之间的对应关系； JSF导航规则可以指定系统从哪个页面开始，以该页面的提交按钮绑定的值作为 逻辑视图； JSF使用标准的配置文件定义导航规则； JSF允许每个表单域单独触发事件，JSF常用的两类事件： ValueChange事件：表单域的值发生改变时触发该事件； Action事件：用户单击按钮或超链接时触发这类事件。,JSF应用三：定义导航规则, /login.jsp success /greeting.jsp failure /login.jsp ,faces-config-nav.xml,JSF应用四：解读JSF配置,对于大部分JS

10、F初级开发者而言，常作的两件事是：定义托管Bean，配置XML文件。 配置核心控制器 Web应用基本上是请求-响应架构，即：用户向Web应用发请求，Web应用处理请求，处理完成后将请求送回客户端。 JSF与传统的MVC框架一样，也提供了一个核心控制器负责处理所有用户请求，即javax.faces.webapp.FacesServlet,它就是JSF的核心控制器。 FacesServlet是一个标准的Servlet，因此，它的配置与普通Servlet没有太大区别，同样是先配置Servlet，再配置Servlet映射的URL，配置文件时web.xml。,JSF应用四：解读JSF配置, FacesS

11、ervlet javax.faces.webapp.FacesServlet 1 FacesServlet *.jsf ,配置FacesServlet的代码片段如下：,上面配置片段指定使用FacesServlet来拦截所有已.jsf结尾的请求，值得注意的是 FacesServlet拦截的URL不一定是*.jsf,完全可以有用户随意指定。如：*.faces、*.do等。,JSF应用四：解读JSF配置, javax.faces.CONFIG_FILES /WEB-INF/faces-config-beans.xml,/WEB-INF/faces-config-nav.xml javax.faces

12、.STATE_SAVING_METHOD client , ：为整个web用于配置参数,JSF应用四：解读JSF配置,JSF有效参数名及其作用如下：,javax.faces.STATE_SAVING_METHOD：指示是在客户端（client）还是在服务器端（server）保存UI组件的状态。 JSF有保存页面中组件状态的能力，以便在页面被重新显示时记住用户输入的信息。组件状态可以保存在客户端也可保存在服务器端，这取决于javax.faces.STATE_SAVING_METHOD 参数的设置值。可能的取值是client 和 server（默认值）。,javax.faces.DEFAULT_S

13、UFFIX：该参数指定JSF映射视图资源时的默认后缀名，默认值是.jsp,不需要改变参数的值。,JSF应用四：解读JSF配置,javax.faces.CONFIG_FILES：该参数指定JSF配置文件的存放位置。默认情况下JSF会自动加载位于WEB_INF下的faces-config.xml文件。如果包含多个JSF配置文件，则需要指定该参数，通过逗号分割不同的（相对路径）配置文件；如果只有一个JSF配置文件，且文件为位于WEB_INF下的faces-config.xml， 则可以省略该参数。,javax.faces.LIFECYCLE_ID：该参数指定JSF所管理的生命周期实例的标识符，该参数

14、通常无需修改。,JSF应用四：解读JSF配置,com.sun.faces.verifyObjects：该参数用于指定是否需要验证自定义组件。当JSF应用中定义了自定义组件、转换器、校验器时，可以设置应用启动时验证这些自定义组件。该参数的值只能是true或false。,com.sun.faces.validateXml：该参数指定是否需要验证JSF应用中的xml文件。,com.sun.faces.NUMBER_OF_VIEWS_IN_SESSON：当状态保存方法设置为server时，控制会话中保存的视图数量 ，当设置为-1时表示没有限制。,JSF配置文件结构,JSF配置文件根元素都是元素，JSF

15、应用配置总体分为三种：分别针对日常应用开发，UI扩展开发（编写组件，呈现器，转换器或者验证器）和高级开发。最常见的两个元素是： :JSF应用中所有托管Bean都在该元素下配置、管理。 :该元素用于管理JSF应用的导航规则。,JSF配置文件结构,三、JSF Expression Language,搭配 JSF 标签来使用，是用来存取数据对象的一个简易语言。 以#开始，将变量或运算式放置在 与 之间。 #userBean.name EL的变量名也可以程序执行过程中所声明的名称，或是JSF EL预定义的隐含对象。 #param.name 对于Map类型对象，可以使用 . 运算符指定key值来取出对应

16、的value，也可以使用 与 来指定。 #paramname #someBean.someMapuser.name 如果变量是List类型或阵列的话，则可以在 中指定索引。 #someBean.someList0,也可以指定字面常数，对于true、false、字符串、数字，JSF EL会尝试进行转换。 在声明变量名称时，要留意不可与JSF的保留字或关键字同名。 true false null div mod and or not eq ne lt gt le ge instanceof empty 在EL中可以直接进行一些算术运算、逻辑运算与关系运算。 算术运算符：加法 (+), 减法 (-)

17、, 乘法 (*), 除法 (/ or div) 与余除 (% or mod) 三元运算：( expression ? result1 : result2) 逻辑运算：and(或 ValueBinding binding = context.getApplication(). createValueBinding(#user); UserBean user = (UserBean) binding.getValue(context); 取得Bean的某个属性： FacesContext context = FacesContext.getCurrentInstance(); ValueBindi

18、ng binding = context.getApplication(). createValueBinding(#user.name); String name = (String) binding.getValue(context);,六、JSF标签,标准标签 输出类标签 输入类标签 命令类标签 选择类标签 其他标签 表格处理,JSF标准标签,输出（Outputs） 其名称以output作为开头，作用为输出指定的信息或绑定值。 输入（Inputs） 其名称以input作为开头，其作用为提供使用者输入框。 命令（Commands） 其名称以command作为开头，其作用为提供命令或链接按钮

19、。 选择（Selections） 其名称以select作为开头，其作用为提供使用者选项的选取。 其它 包括了form、message、messages、graphicImage等等未分类 的标签。,标准HTML标签的属性,输出类标签,outputLabel 产生 HTML标签，使用for属性指定组件的client ID，例如： outputLink 产生 HTML标签，搭配可帮链结加上参数，所有的参数都会变成 name=value 的类型附加在链接后，value所指定的内容也可以是JSF EL绑定。例如： outputFormat 产生指定的文字信息，可以搭配来设定信息的参数以格式化文字信息，

20、例如： outputText 简单的显示指定的值或绑定的信息，例如： ,输入类标签,inputText 显示单行输入框，即输出 HTML标签，其type属性设定为text，例如： inputTextarea 显示多行输入文字区域，即输出 HTML标签，例如： inputSecret 显示密码输入框，即输出 HTML标签，其type属性设定为password，例如： inputHidden 隐藏输入框，即输出 HTML标签，其type属性设定为hidden，隐藏输入框的值用于保留一些信息于客户端，以在下一次发送表单时一并提交，例如： ,命令类标签,commandButton 显示一个命令按钮，即

21、输出 HTML标签，其type属性可以设定为button、submit或reset，预设是submit，按下按钮会触发 javax.faces.event. ActionEvent，例如： commandLink 产生超链接，会输出 HTML标签，而href属性会有#，而onclick属性会含有一段JavaScript程序，这个JavaScript的目的是按下链接后自动提交表单，具体来说其作用就像按钮，但外观却是超链接，例如： ,选择类标签,选取框 单选 单选按钮 单选列表 单选菜单 复选 复选框 复选列表 复选菜单,选择类标签的选项, itemLabel itemValue 或者value绑

22、定一个传回javax.faces. model.SelectItem的方法 value绑定至一个提供传回SelectItem的列表（数组）的方法 SelectItem: value, label value绑定至一个提供传回Map对象的方法 Map : label, value,其他标签,或 图片 排版 本体间只能包括JSF组件，如果想要放入非JSF组件，例如简单的样版（template）文字，则要使用 包括住。 包装组件,表格处理,配合实现以表格的方式显示数据 header与footer分别表示表头和表尾 使用DataModel处理复杂的数据,七、事件处理,动作事件（Action Event

23、 ） 即时事件（Immediate Event ） 值变事件（Value Change Event ） 阶段事件（Phase Event）,动作事件（Action Event ）,通过action属性绑定一个事件方法： 通过actionListener属性绑定一个事件方法， action绑定返回结果的方法： 用标签向组件注册事件监听器（实现javax.faces.event. ActionListener接口），action绑定返回结果的方法： ,即时事件（Immediate Event ）,即时事件是指JSF视图组件在取得请求中该取得的值之后，即立即处理指定的事件，而不再进行后续的转换器处理

24、、验证器处理、更新模型值等流程。 ,值变事件（Value Change Event ）,使用者改变了JSF输入组件的值后提交表单，就会发生值变事件，丢出一个javax.faces.event.ValueChangeEvent对象 直接设定JSF输入组件的valueChangeListener属性： 实现javax.faces.event.ValueChangeListener接口，并定义其processValueChange()方法；然后在JSF页面上使用标签，并设定其type属性： ,阶段事件（Phase Event）,重建视图（Restore View） 依客户端传来的session数据或

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

26、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.RENDE

27、R_RESPONSE PhaseId.ANY_PHASE,八、数据转换与验证,转换器（Converter）协助模型与视图之间的数据转换 验证器（Validator）协助进行语意检验（Semantic Validation）,1.标准转换器,HTTP字符串 Java对象 对于基本数据类型（primitive type）或是其Wrapper类，JSF会使用javax.faces.Boolean、javax.faces.Byte等自动进行转换 对于 BigDecimal、BigInteger，则会使用javax. faces.BigDecimal、javax.faces.BigInteger自动进行

28、转换 对于DateTime、Number，可以使用、标签进行转换，它们各自提供有一些简单的属性，可以让我们在转换时指定一些转换的格式细节： ,2.自定义转换器,实现javax.faces.convert.Converter接口，这个接口有两个要实现的 方法： public Object getAsObject(FacesContext context, UIComponent component, String str); public String getAsString(FacesContext context, UIComponent component, Object obj); 在f

29、aces-config.xml中注册: cn.wiztek.converter.User cn.wiztek.converter.UserConverter 在JSF页面中通过converter-id使用转换器: ,3.标准验证器,语法检验（Synatic Validation） 检查使用者输入的数据是否合乎我们所要求的格式，最基本的就是检查使用者是否填入了栏目值，或是栏目值的长度、大小值等等是否符合要求。 三种标准验证器： ,4.自定义验证器,实现javax.faces.validator.Validator接口中的validate()方法，如果验证错误，则丢出一个ValidatorExce

30、ption，它接受一个FacesMessage对象，这个对象接受三个参数，分别表示信息的严重程度（INFO、 WARN、ERROR、FATAL）、信息概述与详细信息内容，这些信息将可以使用或标签显示在页面上。 在faces-config.xml中注册验证器的标识（Validater ID）。 通过标签并设定validatorId属性来使用自定义验证器。,5.错误信息处理,预定义的错误信息可以使用或标签显示出来 通过提供一个信息资源文件可以修改预定义的错误 信息 MyFaces提供了支持中文的错误信息文件Messages_zh_CN.properties 也可以在程序中使用FacesMessag

31、e来提供信息,6.自定义转换/验证标签,使用标签来设定属性： 在自定义验证器中用下面语句获取属性： String pattern = (String) component.getAttributes().get(pattern); 也可以开发自己的一组验证标签，并提供相关属性设定： ,九、传统请求/响应驱动的处理周期,请求/响应驱动的处理周期,传统请求/响应处理模型的不足,控制器缺乏对页面的控制力 控制能力仅限于页面导航 页面缺乏对模型的控制力 原则上页面只应负责从模型中提取数据并显示，若直接设置模型数据，则绕过了控制器中的转换校验逻辑。 页面与控制器之间缺乏有效沟通 基于面向对象的控制器难以

32、适应基于文本流的页面。沟通形式局限于传递简单的请求参数，修改共享数据（例如JavaBean或Session属性等） 页面对控制器的通信需要由客户端发起请求，沟通形式受限于传输协议（例如HTTP的GET方式） 对一个请求/响应循环的逻辑缺乏细致划分，导致校验、转换、展现的代码纠缠在一起。程序员必须自己去关心进行这些动作的时机，次序以及出错后的行为。,JSF提供的解决方案,JSF引擎负责维护视图的组件树模型 类似于浏览器的DOM模型，JSF组件树模型为基于文本流的视图提供了一个面向对象的映射。 控制器可以访问、修改组件树中的元素，从而获取请求发起时的视图状态，或者影响最终的响应结果。 JSF引擎负

33、责发起校验，转换行为，程序员只需提供相关的逻辑，而不需要关心时机 同时，JSF实现提供了常用的校验与转换逻辑。 引入延迟求值EL表达式，令视图可以以受控的方式调用、修改模型。 JSF引擎管理对延迟求值EL表达式的赋值，调用等 明确划分首次请求与postback（对同一个视图的后续请求），JSF引擎管理postback时的组件树与模型更新。统一了视图与控制器，从而消除了沟通问题。,JSF请求处理生命周期,一次请求处理生命周期的范围是一个请求/响应循环 请求处理生命周期由六个阶段组成 恢复视图阶段（Restore View Phase） 应用请求值阶段（Apply Request Value Ph

34、ase） 处理验证阶段（Process Validations Phase） 更新模型值阶段（Update Model Value Phase） 调用应用程序阶段（Invoke Application Phase） 渲染响应阶段（Render Response Phase） 首次请求时只执行恢复视图阶段与渲染响应阶段，postback时原则上顺序执行全部六个阶段。 引擎实现与用户应用程序可以在任一阶段中通知引擎跳过某些阶段 FacesContext.getCurrentInstance().renderResponse() 本阶段执行完毕后直接跳到渲染响应阶段 FacesContext.get

35、CurrentInstance().responseComplete() 本阶段执行完毕后直接终止当前生命周期,JSF请求处理生命周期简图,JSF请求处理生命周期各阶段(一),恢复视图阶段 首次请求时： 根据页面文件创建组件树 通知JSF引擎直接进入渲染响应阶段 Postback时： 根据客户端提交或保存在服务器会话中的ViewState（视图状态）恢复组件树,JSF请求处理生命周期各阶段 （二）,应用请求值阶段 在此阶段，JSF引擎对请求所提交数据进行解码，获得页面组件的状态值（例如textField中填入的值） 处理校验阶段 在此阶段，JSF引擎对组件的原始状态值进行转换和校验。 若出现转

36、换或校验失败，JSF引擎将错误消息加入队列，将组件的valid属性设为false，并通知JSF在本阶段完毕之后直接跳到渲染响应阶段。 应用模型值阶段 若生命周期流程顺利到达这个阶段，说明请求中的信息在语法与业务语义上均正确（由之前的验证过程保证）。JSF引擎将这些值更新到与组件绑定的模型对象中。,JSF请求处理生命周期各阶段 （三）,调用应用程序阶段 若生命周期流程顺利到达这个阶段，说明所有模型对象的状态已经根据请求中的输入进行了更新。JSF负责调用应用程序中定义的各种事件方法，主要是绑定的action方法。 渲染响应阶段 在此阶段，JSF引擎使用配置指定的渲染包（Render Kit）将组件

37、树渲染为输出格式。通过选用不同的Render Kit，这个输出格式可以有很多形式，例如静态Html页面、带ajax支持的Html页面、xml，甚至是flash等等。 目前AOM主要的输出格式是带ajax支持的Html页面。,影响生命周期执行顺序的一些方式,在生命周期中的任何阶段中调用当前请求的FacesContext实例的renderResponse()方法，将通知JSF引擎在本阶段执行完毕后直接跳到渲染响应阶段。 在生命周期中的任何阶段中调用当前请求的FacesContext实例的responseComplete()方法，将通知JSF引擎在本阶段执行完毕后结束本次生命周期。 若组件的imme

38、diate属性为true，则这个组件的转换和校验动作将在应用请求值阶段执行（原来是在处理验证阶段执行），其动作事件将在应用请求值阶段结束后立刻被分发（原来是在调用应用程序阶段被分发）。此属性默认为false。 若这个组件出现验证错误，将跳过其他immediate属性为false的组件的验证。 这个组件有机会在其验证或动作事件中调用renderResponse()方法或responseComplete()方法，跳过所有其他immediate属性为false的组件的验证与动作事件调用。,JSF引擎会在每个生命周期的开始和结束时分别广播生命周期事件。通过向JSF引擎注册生命周期监听器，就可以监听到这

39、些事件并触发处理。 应用程序通过实现javax.faces.event.PhaseListener接口定义一个生命周期监听器。 在public PhaseId getPhaseId()方法中返回这个监听器所监听的生命周期阶段 例如return PhaseId.RESTORE_VIEW; 返回PhaseId.ANY_PHASE将监听所有生命周期阶段事件 在public void beforePhase()方法中加入在生命周期开始时的处理 在public void afterPhase()方法中加入在生命周期结束时的处理 需要在faces-config.xml中注册此监听器,生命周期阶段监听器, my.listener.MyListener ,JSF开发环境,支持JSF的IDE JSF组件库 JSF工具,支持JSF的IDE,Eclipse WTP Java Studio Creator NetBeansVisualWeb JDeveloper IBM WSAD BEA WorkShop for JSF Exadel Studio,JSF组件库,Tomahawk Tobago Trinidad （Oracle ADF-Faces） Apusic JSF,JSF扩展,Facelets JSF-Spring Ajax4JSF,