JSF基础讲座 界面专业化小组 2012.5.12 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 事件监听 • 导航，servlet， JSF架构 • JavaServer Faces 的一个优势就是使用模型、视图、控制器架构（MVC） 来清晰地分离应用逻辑和表现。 • M（模型） - backing bean定义了与页面中使用的UI组件相关联的属性 和处理逻辑。特定于表示层中的一个view对象，它包含必须显示在view层的数据以 及验证用户输入、处理事件和与业务逻辑层交互的处理逻辑等。 • V（视图） - 包含JSF标签的JSP页面是作为View层。 • C（控制器） - faces-config.xml文件，这就是MVC中的C层。它对该应 用程序的多个方面进行配置，包括bean管理、页面导航、定制UI（用户界面）组 件、定制验证程序和消息资源等。 JSF架构 • 层次逻辑清晰，MVC分层明确 • 简单易用： 由于JavaServer Faces 技术创建的用户 界面处理了所有的错综复杂的界面管 理，包括输入校验、组件状态管理、 页面导航和事件处理，使开发人员从 JavaScript中解放出来，而这一切都只 需要引入一个标签就搞定。数据传递 变得简单。 JSF中MVC的应用（1） • Model-View-Controller (MVC) 开发模式 可以分离数据访问和数据表现，让开 发人员可以开发一个可伸缩性强、便 于扩展的控制器，来维护整个流程 JSF中MVC的应用（2） JSF中MVC的应用－ M层 模式(Model) 这是数据与业务逻辑元件，封装的是数 据源和所有基于对这些数据的操作。在我们这里 表现为backbeaning package demo; public class NameBean { String userName; public String getUserName() { return userName; } public void setUserName(String name) { userName = name; }} JSF中MVC的应用－ V层 视图(View) 这是表示元件，也称为用户接口元件，封 装的是对数据源Model的一种显示，一个模式可以 用于多个视图。 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> JSF中MVC的应用－ C层 控制器(Controller) :将用户接口转化为模式的变化，并定义用户接口对这些事件的响应方法。 • • Input Value Holder • nameBean • demo.NameBean • session • • userName • java.lang.String • • • • /pages/inputname.jsp • • greeting • /pages/greeting.jsp • • JSF开发 • 基于组件的架构 JSF 为标准 HTML 中可用的每个输入字段提供了组件标签。您也可以为 应用程序的特定目的，或者为了将多个 HTML 组件组合在一起形成一 个复合体 —— 例如一个包含三个下拉菜单的 Data Picker 组件，而编 写自己的自定义组件。JSF 组件是有状态的。组件的无状态是通过 JSF 框架提供的。JSF 使用组件来生成 HTML 响应。 • JSF 的组件集包含一个事件发布模型、一个轻量级的 IOC 容器和很多 用于几乎所有其他公共 GUI 特性的组件，这些特性包括可插入呈现、 服务器端验证、数据转换、页面导航管理，等等。作为基于组件的架 构，JSF 是相当可配置和可扩展的。大多数 JSF 功能，比如导航和托管 bean 查看，都可以用可插入的组件替换。这种程度的可插入性给予您 在构建 Web 应用程序 GUI 方面相当大的灵活性，并允许您容易地将其 他基于组件的技术融入到 JSF 开发中。例如，对于托管 bean 查看，您 可以用更加全功能的 IOC/AOP Spring 框架来取代 JSF 的内置 IOC 框架。 下面是一个从 MVC 角度来看的示例应用程序 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 事件监听 • 导航，servlet JSF页面 • JSF页面起开始于下列标签库声明： <%@ taglib prefix="f" uri=" http://java.sun.com/jsf/core"; %> <%@ taglib prefix="h" uri=" http://java.sun.com/jsf/html"; %> • 多数页面都类似于HTML表单．注意下列区别： 所有JSF标签都包含在f:view标签中 不使用html form标签，而是在h:form标签中包含所有 JSF组件 不使用熟悉的input HTML标签，而是使用h:inputText h;inputSecret和h:commandButton JSF页面 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 导航，servlet JSF标签库 • JSF包含两类标记库分别叫JSF核心库与HTML基础库。 • 前者提供普通的标记和一些用于在用户界面组件中注册验 证器以及事件监听器的标记。 • 后者包含用于描述用户界面组件的JSP标记，如：按钮、 文本域、复选按钮、列表等。文件edit.jsp用这些标记建立 了表单。 • 两种标记库的标准前缀是f和h，并且定义在edit.jsp文件的 最前面： <%@ taglib prefix="f" uri=" http://java.sun.com/jsf/core"; %> <%@ taglib prefix="h" uri=" http://java.sun.com/jsf/html"; %> JSF常用标签 • 开发良好的jsf应用程序需要熟 练掌握jsf标签库－－核心标签 和html标签－－一共有43个标 签； JSF常用标签 JSF常用标签 • JSF常用标签 举例1： BackingBean: Public class temp(){ private String name; public String getName() { return name; } public void setName(String name) { this.name = name; …… } JSF常用标签 如果要在BackingBean里封装选项，jsp如下： 举例2： JSF常用标签 举例2； BackingBean： Public class Temp（）{ private static SelectItem[] selname=new SelectItem[]{ new SelectItem(―china‖), new SelectItem(―english‖)} ; Public SelectItem[] getSelname(){ return selname; } } 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 事件监听 • 导航，servlet， Tiles在项目中的应用 Tiles的作用在于达到页面的复用；同时 使JSP页面层次简洁，便于阅读；提高开发 效率。(通过实例讲解) Tiles在项目中的应用 一、JSP模板页面的使用方法 二、配置文件： 模版规范 头部header 树 内容content 脚部footer • template.jsp样式如下： 模版规范 • Template1.jsp样式如下： 头部header 内容body 脚部footer • Template2.jsp样式如下： 头部header 说明top 内容content 脚部footer • Template3.jsp样式如下： 头部header 说明top 树tree 内容content 脚部footer Template1.jsp <%@ page contentType="text/html; charset=GBK" %> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%> <%@ taglib uri="http://www.ccb.cn/xmdc" prefix="xmdc"%> <%@ taglib prefix="tiles" uri="http://struts.apache.org/tags-tiles"%> <h:outputText value="#{msgs.title}"/> Template1.jsp Tiles配置 – 配置tiles后，导航配置 Tiles配置 • 增加了tilse后，配置导航应写tiles的页 面路径； 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 事件监听 • 导航，servlet， Bean • Java bean是一种类，它可以被读取或写入。 定义一个属性的最简单方法是get/set方法。 • JSF使用bean来实现表现与业务逻辑的分 离．JSF页面指向bean属性，业务逻辑包含 在bean实现代码中．这些bean是用户界面 与应用程序后端之间的导管。 Bean • UserBean类具有两个属性：name和password。 public class UserBean { public String getName() { . . . } public void setName(String newValue) {. . . } public String getPassword() { . . . } public void setPassword(String newValue) { . . . } . . . } Bean 很多JSF组件具有属性:value(它来定义一个值)或一 个到bean属性值的绑定例如: 当显示该页面时，调用getName方法来获取(读)当 前属性值。当提交该页面时，调用setName方法来 设置(写)用户输入的值。 弹出窗口 – 弹出窗口 • 弹出窗口统一使用BaseBackingBean里面的 方法来实现，统一管理，方便调试。 • 准备工作： 弹出窗口 • 准备工作： • 1、主要两个文件：footer.jsp和BaseBackingBean.java • footer.jsp主要是添加一个隐藏域，如果该页面没有用tiles 组装footer.jsp，需要在页面里面添加： • 传递参数 BackingBean的代码： Public String canshu(){ String str = FacesUtils.getRequestParameter("idKey").toString(); showDialog(true, true, "WriteRequirementQuestionary.jsf?surveyId=" + str + "&", "800", "700");} 传递参数 子页面的BackingBean： fujianbizid = (String)FacesUtils.getRequestParameter("surveyId"); FacesUtils. getRequestParameter封装的方法： //FacesContext.getCurrentInstance().getExternalContex t().getRequestParameterMap().get("surveyId"); 清除session /** * 把自己从session中删除 * */ public void removeBB() { HttpSession session = (HttpSession) FacesContext.getCurrentInstance().getExternalContext().getSession(true); String backingBeanName=this.getClass().getName(); backingBeanName=backingBeanName.substring(this.getClass().getPackage().getName ().length()+1); backingBeanName=backingBeanName.substring(0,1).toLowerCase()+backingBeanNa me.substring(1); session.removeAttribute(backingBeanName); } 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 事件监听 • 导航，servlet， 事件监听 jsp • Myjsp.jsf • 调用应用程序阶段jsf实现将调用bean的listerner方法，接 着是action方法 事件监听 jsp • • • • • • 事件监听 bean • HtmlInputText test1; • HtmlCommandButton anniu; • HtmlSelectOneMenu mnue; 事件监听 bean public HtmlInputText getTest1() { return test1; } public void setTest1(HtmlInputText test1) { this.test1 = test1; } public HtmlCommandButton getAnniu() { return anniu; } public void setAnniu(HtmlCommandButton anniu) { this.anniu = anniu; } 事件监听 bean 在监听方法里改变其他组件的属性值 public void jianting(ValueChangeEvent event){ test1.setReadonly(true); test1.setSubmittedValue(―监听到命令了) ; test1.setReadonly(true); anniu.setDisabled(true); } 事件监听 bean public class Temp extends BaseBean{ String country; HtmlInputText test1; HtmlCommandButton anniu; public void jianting(ValueChangeEvent event){ test1.setReadonly(true); test1.setSubmittedValue(―监听到命令了”); test1.setReadonly(true); anniu.setDisabled(true); } 事件监听 bean public void jianting(ValueChangeEvent event){ test1.setReadonly(true); test1.setSubmittedValue("监听到命令了 "+event.getNewValue()); test1.setReadonly(true); anniu.setDisabled(true); } 事件监听 bean • public class Temp extends BaseBean{ • String country; • HtmlInputText test1; • HtmlCommandButton anniu; • public void jianting(ValueChangeEvent event){ • test1.setReadonly(true); • test1.setSubmittedValue("监听到命令了 "+event.getNewValue()); • test1.setReadonly(true); • anniu.setDisabled(true); • } 主要内容 • JSF架构 • JSF组成及常用标签介绍 －－页面 －－标签 • Tiles • BackingBean • 事件监听 • 导航，servlet 导航 • 导航规则就是告诉JSF实现在提交表单之后， 哪个页面将被发送回浏览器 导航 h:commandButton标签中具有一个acction属性，它的 值:‖login‖用于制定导航规则。 导航配置 * draftPlanNotice /pxgl/jhsp/xfpxjhtbtz/draftPlanNotice.jsf Servlet配置 • 当在应用服务器上部署JSF应用程序时，需 要提供一个配置文件，其名称为Web.xml.所 有JSF页面都是由特定的servlet处理，JSF URL要使用特殊的格式。 • web.xml 位于 WEB-INF 目录的最顶层，用于 配置整个 Web 应用程序。 资源： • UIcomponent类 http://java.sun.com/javaee/javaserverfaces/1.1 _01/docs/api/javax/faces/component/html/p ackage-tree.html