JSF基础讲座


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 HoldernameBeandemo.NameBeansessionuserNamejava.lang.String/pages/inputname.jspgreeting/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:jsp页面 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,需要在页面里面添加: • • 子页面需要加 • • • 弹出窗口 • 2、父页面的动作action对应一个方法,这个方法 用于调用BaseBackingBean.java里面的方法来实现 不同场景窗口的弹出。 • 弹出窗口 1 父窗口不刷新或父窗口只是自己刷新自己, 而且子窗口没有返回值 父窗口提交动作调用: public void showDialog(boolean showModal,boolean refreshParent, String url, String Width,String Height) 关闭窗口,没有定义父窗口跳转 public void closeWindow(); 弹出窗口 @param showModal 是否弹出模式窗口。如果为 true则弹出模式窗口;否则弹出非模式窗口。 @param refreshParent 当关闭弹出的模式窗口时,是 否刷新父窗口。如果为true则刷新父窗口;否则 不刷新父窗口。该参数只对弹出模式窗口有效。 @param url 弹出窗口的URL @param feature 弹出窗口的特征。特征值间用分号 分隔,可设置的特征值有: 弹出窗口 2 把父页面提交到其他一个固定页面的实现 public void showDialogAndTurnOnePage(String dialogUrl,String destinationUrl, String Width,String Height) @param dialogUrl 弹出窗口地址 @param destinationUrl 子窗口关闭后,父窗口跳转 到的地址 @param Width 弹出窗口宽度 @param Height 弹出窗口高度 传递参数 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 • 事件监听 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
还剩63页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

net_wood

贡献于2012-05-31

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf