JSF入门教程
2009-03-23 23:30
323 查看
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="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" 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="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" 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 event
goodbye方法象 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"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<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"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<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 已经有一个基本认识了。
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="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" 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="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" 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 event
goodbye方法象 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"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<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"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<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 已经有一个基本认识了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSF2.0/Richfaces/MiniOA开发入门视频教程
- JSF 入门教程
- JSF入门教程
- JSF入门教程
- JSF入门教程
- JSF入门教程
- JSF 入门教程
- JSF入门教程
- jsf2.0 入门视频 教程
- JSF入门系列教程(一) jsf简介,jsf是什么？
- JSF2.0/Richfaces/MiniOA开发入门视频教程
- 深度学习入门教程
- mycat入门教程
- Scrapy入门教程
- MyBatis入门初级教程(2) – 框架结构搭建
- PHP cURL 应用（入门详解教程）
- Elasticsearch 5.5.1的安装和入门教程（转）
- HOOPS 3D可视化入门教程三：基本概念和数据结构
- Java Servlet 和 JSP入门教程（1）
- CI框架入门教程