JSF入门系列：Hello World！（已完成）

wool王 · 发表于 2006-7-13 22:00

过来公司上班一段时间，发现自己所在项目组使用的框架是基于Hibernate+EJB(Session Bean,实体BEAN用hibernate代替)+JSF的。自己之前只懂用Struts和Spring，没办法，只有硬着头皮学JSF和EJB。

这段时间看了网上不少文章（因为市面上没有写得好的JSF中文书），发现自己有Struts的基础，吸收JSF的东西很快。我想把自己学习过程中的一些小实例贴出来，希望能帮到同样在学JSF的同学较快的入门。

下面开始我JSF一系列入门实例的第一个：helloworld！

[ 本帖最后由 wool王于 2006-7-14 22:52 编辑 ]

大鱼 · 发表于 2006-7-14 15:13

鄙视,鄙视,鄙视!

wool王 · 发表于 2006-7-14 20:34

楼上BS什么？

hjack · 发表于 2006-7-14 20:47

看你这么有空，就写多几篇吧。支持。。。

wool王 · 发表于 2006-7-14 20:49

楼上的，我公司的网络慢到要死写不了。回家又不想装IDE。

现在家里电话只有game and film and music。。。没有跟工作有关的东西。

wool王 · 发表于 2006-7-14 21:52

一、工具介绍

本文的开发工具是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

<%@ 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

<%@ 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>

复制代码

结构如下图:

4. 创建和配置受控Bean(这里是这个简单例子最重要的)
在src源文件夹里创建HelloBean,我这里包路径是com.woden.demo.jsf,大家可以随便创建包路径.
HelloBean代码如下(超级简单):

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:

按下finish后,在faces-config.xml会生成一段配置代码(大家自己看吧,这里别把faces-config.xml关掉,等下有用)

5. 配置页面转发
在faces-config.xml的源码里,配置以下代码:(其实可以利用myeclipse的向导功能,就是类似上一步配置受控bean一样按下ctrl+N...但这里讲述太麻烦,就直接写配置代码吧)
完整的faces-config.xml配置源码如下:

<?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方法,这里是个转向关系...呵呵,,,说道这里读者估计明白配置文件的意思了...

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).

[ 本帖最后由 wool王于 2006-7-14 22:50 编辑 ]

wool王 · 发表于 2006-7-14 22:44

图片贴...

sasadong · 发表于 2006-7-15 06:50

不错。支持一下，突然发觉自己刚才写的文章太抽象了，看你的帖子我发觉自己白忙了一晚上。学php的人本来就少，加上我选择的是前沿，更没人捧场了。

iptton · 发表于 2006-7-15 09:29

语言都是共通的(好像这句话很多人说)
师兄说的MVC在哪种语言都会有需要嘛

怎么会没人捧场

powerwind · 发表于 2006-7-15 10:00

当然要捧场啦!
struts不熟练,所以还没开始学JSF

wool王 · 发表于 2006-7-15 10:56

原帖由 sasadong 于 2006/7/15 06:50 发表
不错。支持一下，突然发觉自己刚才写的文章太抽象了，看你的帖子我发觉自己白忙了一晚上。学php的人本来就少，加上我选择的是前沿，更没人捧场了。

确实.我拜读了师兄文章的部分内容,觉得是从架构的高度思考问题.在学生里面,许多人还没具备这种思想高度.具体的内容更容易在大学的论坛上受欢迎.

写文章大多出于两种动机,一个是觉得看客需要,一个是自己的兴趣和爱好...我写东西两种动机都出于...师兄你完全可以按自己兴趣和喜好写,,,尽管现在可能比较少师弟会看得明白你的文章,,,但毕竟人会成长,迟早有人会成为你的知音的.

同时,做为bbs这个板块的斑竹,我也很感谢和希望师兄为提高板块内容质量作出的贡献.做为曾经的工大一份子,我们都尽自己一份力吧.

wool王 · 发表于 2006-7-15 11:30

这个帖子被powerwind加为二级精华,跟师兄的帖子一样.

我自己利用"职权"改回一级.因为感觉像helloworld这类小实例不必给予太高评价.

希望powerwind别介意.

powerwind · 发表于 2006-7-15 12:04

呵呵~
是我把握得不够好!

sasadong · 发表于 2006-7-15 12:46

两位师弟斑竹带着书生气味

hjack · 发表于 2006-7-15 15:16

你们两个搞什么呀，

把师兄的搞上三级精华不就行了？！

wool王 · 发表于 2006-7-15 15:30

楼上的...我只是觉得一个helloworld没必要二级啦.

powerwind · 发表于 2006-7-15 15:30

楼上你又搞什么啊？
你动手就可以啦！

powerwind · 发表于 2006-7-15 15:32

又有人插楼了

wool王 · 发表于 2006-7-15 15:33

我动手了

powerwind · 发表于 2006-7-15 17:50

希望楼主有空的时候写写EJB的HelloWorld.
我看了<<精通EJB>>的前三章,却没写出第一个程序.
因为初学EJB,对JBOSS又不懂!

		自动登录	找回密码
密码			加入后院

JSF入门系列：Hello World！（已完成）

相关帖子