一、工具介绍
本文的开发工具是Eclipse 3.2 + Myeclipse 5.0M2,JDK版本是5.0,Tomcat版本是5.5。请各位尽量配合本文的工具版本（些少差别其实也不怕）。
二、Hello World Step by Step
1. 打开Eclipse,新建一个WEB项目:
2. 右键点击视图上helloJSF项目,选择MYECLIPSE -> ADD JSF CAPABILITIES:
由于是helloworld,所以什么都不用改啦,直接点finish就可以了.
3. 在WEBROOT目录下建立JSP文件(这个就不用贴图了吧,呵呵)
index.jsp
4. 创建和配置受控Bean(这里是这个简单例子最重要的)
在src源文件夹里创建HelloBean,我这里包路径是com.woden.demo.jsf,大家可以随便创建包路径.
HelloBean代码如下(超级简单):
按下finish后,在faces-config.xml会生成一段配置代码(大家自己看吧,这里别把faces-config.xml关掉,等下有用)
5. 配置页面转发
在faces-config.xml的源码里,配置以下代码:(其实可以利用myeclipse的向导功能,就是类似上一步配置受控bean一样按下ctrl+N...但这里讲述太麻烦,就直接写配置代码吧)
完整的faces-config.xml配置源码如下:
6. 运行实例
这里跟我以前文章介绍的实例一样,用myeclipse管理web容器十分方便,具体方法:项目点右键 -> MYECLIPSE -> ADD AND REMOVE PROJECT DEPLOYMENTS -> ADD ->选择tomcat就可以了.关于tomcat如何在列表出现,请自行去网上搜索有关myeclipse安装配置的文章,这里不详细说明.
接着在Eclipse打开tomcat,在浏览器输入http://localhost:8080/hello/index.faces 看到效果了.
三 、写在最后
这个例子很简单,甚至有点傻,但个人认为对于有一定J2EE WEB开发基础,但对JSF没有了解的人来说,还是有一定价值的,至少能够帮这些人了解JSF的页面转发流程,包括JSF的事件.同时,这个例子几乎没讲述什么原理,其实也不需要理解原理,个人建议是完成这个实例后,再看JSF原理的书籍,这样会有助于学习,也更能体现这么傻的一个例子的价值.
例子参考了IBM开发社区和台湾javaworld网站的一些文章,还有也参考了自己公司一位前辈写的JSF指南.严格来说不算抄袭,也算原创吧,所以转贴请注明工大后院(http://www.gdutbbs.com).
本文的开发工具是Eclipse 3.2 + Myeclipse 5.0M2,JDK版本是5.0,Tomcat版本是5.5。请各位尽量配合本文的工具版本（些少差别其实也不怕）。
二、Hello World Step by Step
1. 打开Eclipse,新建一个WEB项目:
2. 右键点击视图上helloJSF项目,选择MYECLIPSE -> ADD JSF CAPABILITIES:
由于是helloworld,所以什么都不用改啦,直接点finish就可以了.
3. 在WEBROOT目录下建立JSP文件(这个就不用贴图了吧,呵呵)
index.jsp
CODE:
<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<f:view>
<h:form>
<h:outputLabel value="输入你要打招呼的人的姓名:" />
<h:inputText value="#{hello.name}" />
<h:commandButton action="#{hello.action}" value="确定" />
</h:form>
</f:view>
</body>
</html>
welcome.jsp<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<f:view>
<h:form>
<h:outputLabel value="输入你要打招呼的人的姓名:" />
<h:inputText value="#{hello.name}" />
<h:commandButton action="#{hello.action}" value="确定" />
</h:form>
</f:view>
</body>
</html>
CODE:
<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>welcome</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<f:view>
Hello!<h:outputLabel value="#{hello.name}"/>!
</f:view>
</body>
</html>
结构如下图:<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>welcome</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<f:view>
Hello!<h:outputLabel value="#{hello.name}"/>!
</f:view>
</body>
</html>
4. 创建和配置受控Bean(这里是这个简单例子最重要的)
在src源文件夹里创建HelloBean,我这里包路径是com.woden.demo.jsf,大家可以随便创建包路径.
HelloBean代码如下(超级简单):
CODE:
package com.woden.demo.jsf;
public class HelloBean {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String action(){
return "ok";
}
}
接下来配置受控bean.按快捷键ctrl+N -> Myeclipse ->web-jsf -> managed bean:public class HelloBean {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String action(){
return "ok";
}
}
按下finish后,在faces-config.xml会生成一段配置代码(大家自己看吧,这里别把faces-config.xml关掉,等下有用)
5. 配置页面转发
在faces-config.xml的源码里,配置以下代码:(其实可以利用myeclipse的向导功能,就是类似上一步配置受控bean一样按下ctrl+N...但这里讲述太麻烦,就直接写配置代码吧)
完整的faces-config.xml配置源码如下:
CODE:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>hello</managed-bean-name>
<managed-bean-class>
com.woden.demo.jsf.HelloBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<to-view-id>/welcome.jspw</to-view-id>
<from-outcome>ok</from-outcome>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/welcome.jsp</from-view-id>
</navigation-rule>
</faces-config>
这里讲述下原理:以上代码大家会发现一个OK,这里对应于hellobean里面action方法返回的字符串OK.而在index.jsp里面,"确定"按钮的action调用的就是hellobean里面的action方法,这里是个转向关系...呵呵,,,说道这里读者估计明白配置文件的意思了...<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>hello</managed-bean-name>
<managed-bean-class>
com.woden.demo.jsf.HelloBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<to-view-id>/welcome.jspw</to-view-id>
<from-outcome>ok</from-outcome>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/welcome.jsp</from-view-id>
</navigation-rule>
</faces-config>
6. 运行实例
这里跟我以前文章介绍的实例一样,用myeclipse管理web容器十分方便,具体方法:项目点右键 -> MYECLIPSE -> ADD AND REMOVE PROJECT DEPLOYMENTS -> ADD ->选择tomcat就可以了.关于tomcat如何在列表出现,请自行去网上搜索有关myeclipse安装配置的文章,这里不详细说明.
接着在Eclipse打开tomcat,在浏览器输入http://localhost:8080/hello/index.faces 看到效果了.
三 、写在最后
这个例子很简单,甚至有点傻,但个人认为对于有一定J2EE WEB开发基础,但对JSF没有了解的人来说,还是有一定价值的,至少能够帮这些人了解JSF的页面转发流程,包括JSF的事件.同时,这个例子几乎没讲述什么原理,其实也不需要理解原理,个人建议是完成这个实例后,再看JSF原理的书籍,这样会有助于学习,也更能体现这么傻的一个例子的价值.
例子参考了IBM开发社区和台湾javaworld网站的一些文章,还有也参考了自己公司一位前辈写的JSF指南.严格来说不算抄袭,也算原创吧,所以转贴请注明工大后院(http://www.gdutbbs.com).
扫一扫
4577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
