本文共 7393 字,大约阅读时间需要 24 分钟。
1. 什么是 Java Server Faces(jsf)?
JSF为JAVA的 Web应用用户界面的开发人员提供了标准的编程接口、丰富可扩展的UI组件库(一个核心的JSP标记库用来处理事件、执行验证以及其他非UI相关的操作和一个标准的HTML 标记库来表示 UI组件)、事件驱动模型等一套完整的Web应用框架,通过 JSF ,您可以在页面中轻松自如地使用 WEB 组件、捕获用户行为所产生的事件、执行验证、建立页面导航…,当使用支持JSF的开发工具来开发 JSF 应用的时候,一切将会变得异常简单,GUI方式拖放组件、修改组件属性、建立组件间关联以及编写事件侦听器等等
JSF 有三部分:
一套预制的UI组件集 一个事件驱动的编程模型 一个允许第三方开发者提供附加组件的组件模型JSF包含处理事件所需的所有代码和组件组织,开发者可以忽略这些细节而专注于应用逻辑。
2. 第一个JSF程序
JSF只是J2EE的一个标准,是一套接口集和一些基本实现,要使用JSF需要下载jsf的实现,可以到JSF 官方网站的 下载区 下载参考实现,也可以到 apache 下载 myfaces,这里以使用sun的参考实现为例,在下载压缩文件并解压缩之后,将其 lib 目录下的 jar 文件复制至您的Web应用程序的/WEB-INF/lib目录下,另外您还需要 jstl.jar 与 standard.jar 文件,这些文件您可以在 sample 目录下的应用中找到,建好我们的应用目录结构:hellojsf
|-- build.xml |-- src |-- WEB-INF |----|-- web.xml |----|-- faces-config.xml |----|-- classes |----|-- lib |----|----|--jsf-impl.jar |----|----|--jsf-api.jar |----|----|--commons-digester.jar |----|----|--commons-collections.jar |----|----|--commons-beanutils.jar |----|----|--commons-logging.jar |----|----|--standard.jar |----|----|--jstl.jar可能只有faces-config.xml,它是jsf的基本配置文件,后面就可以看到它的作用。
//build.xml
<project name="helloapp" default="compile" basedir="."><!-- ================= Property Definitions ==================== -->
<property name="src.home" value="${basedir}/src" /><property name="classes.home" value="${basedir}/WEB-INF/classes" /><property name="lib.home" value="${basedir}/WEB-INF/lib" /><!-- ================= "compile" Target ==================== -->
<target name="compile"> <javac srcdir="${src.home}" destdir="${classes.home}" debug="on"> <classpath> <fileset dir="${lib.home}"> <include name="*.jar"/> </fileset> </classpath> </javac></target></project>
下面我们就开始写程序了,没有什么复杂逻辑,不用细说他的流程,直接写了。//hello.jsp 保存在根目录下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@ taglib uri="" prefix="f" %><%@ taglib uri="" prefix="h" %><f:view> <html> <head> <title> JSF in Action - Hello, world! </title> </head> <body> <h:form id="welcomeForm"> <h:outputText id="welcomeOutput" value="Welcome to JavaServer Faces!" style="font-family: Arial, sans-serif; font-size: 24; color: green;"/> <p> <h:message id="errors" for="helloInput" style="color: red"/> </p> <p> <h:outputLabel for="helloInput"> <h:outputText id="helloInputLabel" value="Enter number of controls to display:"/> </h:outputLabel> <h:inputText id="helloInput" value="#{helloBean.numControls}" required="true"> <f:validateLongRange minimum="1" maximum="500"/> </h:inputText> </p> <p> <h:panelGrid id="controlPanel" binding="#{helloBean.controlPanel}" columns="20" border="1" cellspacing="0"/> </p> <h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{helloBean.addControls}"/> <h:commandButton id="goodbyeCommand" type="submit" value="Goodbye" action="#{helloBean.goodbye}" immediate="true"/> </h:form> </body> </html></f:view>从这个页面可以看出,jsf 就是用他自己的UI组件代替了html标签,又加了些特有的属性,很容易理解,值得注意的是,所有组件都要定义在<f:view></f:view>之内,熟悉jsp的可能对”#{helloBean.numControls}“感觉很熟悉,不同的是这个是以”#“开头的,”binding“属性的值是个jsf el 表达式,它指定了helloBean类中的controlPanel方法可以直接对此组件进行操作,h:commandButton 是按钮组件,可以产生 action event, 他的 actionListener 属性制定了用helloBean类中的addControls方法来处理这个action event,其他的都比较容易理解,来看下个页面。
//goodbye.jsp 保存在根目录下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@ taglib uri="" prefix="f" %><%@ taglib uri="" prefix="h" %><f:view> <html> <head> <title> JSF in Action - Hello, world! </title> </head> <body> <h:form id="goodbyeForm"> <p> <h:outputText id="welcomeOutput" value="Goodbye!" style="font-family: Arial, sans-serif; font-size: 24; font-style: bold; color: green;"/> </p> <p> <h:outputText id="helloBeanOutputLabel" value="Number of controls displayed:"/> <h:outputText id="helloBeanOutput" value="#{helloBean.numControls}"/> </p> </h:form> </body> </html></f:view>这个页面更简单,只是一些输出。
在 hello.jsp goodbye.jsp 中都通过 jsf el 表达式引用了一个 backing bean, 叫 helloBean, 他包括了我们这个应用所需的一切
//HelloBean.java 保存在 src 下
package org.jia.hello;import javax.faces.application.Application;
import javax.faces.component.html.HtmlOutputText;import javax.faces.component.html.HtmlPanelGrid;import javax.faces.context.FacesContext;import javax.faces.event.ActionEvent;import java.util.List;public class HelloBean
{ private int numControls; private HtmlPanelGrid controlPanel;public int getNumControls()
{ return numControls; } public void setNumControls(int numControls) { this.numControls = numControls; } public HtmlPanelGrid getControlPanel() { return controlPanel; } public void setControlPanel(HtmlPanelGrid controlPanel) { this.controlPanel = controlPanel; } public void addControls(ActionEvent actionEvent) { Application application = FacesContext.getCurrentInstance().getApplication(); List children = controlPanel.getChildren(); children.clear(); for (int count = 0; count < numControls; count++) { HtmlOutputText output = (HtmlOutputText)application.createComponent(HtmlOutputText.COMPONENT_TYPE); output.setValue(" " + count + " "); output.setStyle("color: blue"); children.add(output); } } public String goodbye() { return "success"; }}jsf 的 backing bean 很简单,不需要继承于某个特定类,只是一个包含事件处理方法的javabean
这里面最复杂的就是 addControls 方法了,它是一个 action listener 方法,因为他接收了一个唯一的参数 ActionEvent,在 hello.jsp 中:”<h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{helloBean.addControls}"/>“,这句话告诉 jsf,当用户点击"Redisplay"按钮时jsf会用这个方法来处理 action eventgoodbye方法象 addControls 一样,是 event listener 的一种类型,但他是于 jsf 的导航系统联系起来的,所以他的工作就是返回一个字符串或逻辑输出,这样导航系统就可以决定下一个要加载的页面,这一类的方法叫做 action methods. 在 hello.jsp 中:”<h:commandButton id="goodbyeCommand" type="submit" value="Goodbye" action="#{helloBean.goodbye}" immediate="true"/>“,当用户点击”Goodbye“按钮时,goodbye方法会被执行,他只是返回"success",在配置文件中这个输出与某个页面相联系,下面就来看看配置文件faces-config.xml
//faces-config.xml
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"""><faces-config> <managed-bean> <description>The one and only HelloBean.</description> <managed-bean-name>helloBean</managed-bean-name> <managed-bean-class>org.jia.hello.HelloBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <navigation-rule> <description>Navigation from the hello page.</description> <from-view-id>/hello.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/goodbye.jsp</to-view-id> </navigation-case> </navigation-rule></faces-config>jsf 象大多数框架一样,有一个配置文件,在之中你可以定义 导航规则、初始化javabean、注册你自己的jsf组件、验证器,和一些面向jsf应用其他方面的其他配置
在这个配置文件中定义了一个bean, 指定了他的名字(这个名字就是我们在页面中使用的名字),类全名,和使用范围。还定义了一个导航规则,hello.jsp有一个”Goodbye“按钮转到其他页,所以只有一个单独的navigation-case,当输出为”success"时,就会显示goodbye.jsp。现在我们已经写完了页面,backing bean, 和配置文件,下面写完web.xml后就可以看到效果了
//web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"""><web-app> <display-name>hello world</display-name> <description> Welcome to JavaServer Faces. </description> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>faces/hello.jsp</welcome-file> </welcome-file-list></web-app>FacesServlet 是做jsf 应用是一定要指定的,还设了默认页为 hello.jsp.
运行build, 启动web server, 在地址栏中打入应用地址,看到刚刚写的应用了吧,通过实际效果结合代码,相信我们已经对jsf 已经有一个基本认识了。
转载地址:http://ldbli.baihongyu.com/