JSF HelloWord

JSF(Java Server Faces)是一种用于构建Web应用程序的新标准Java框架。提供了一种以组件为中心来开发Java Web的用户界面的方法,从而简化了开发。
 
JSF是Java Web应用的用户界面框架,其设计目标是简化Web应用的开发和维护。当然,JSF最直接的服务对象还是基于HTTP协议和HTML客户端的Java Web应用。JSF是在Java Web中开发Web UI的框架,像大部分Java Web框架一样,JSF遵循业务逻辑和显示的分离。
 
一个JSF应用就是一个JSP和Servlet应用。它有一个配置描述符,有JSP页面、客户定制标签和静态资源。不同的是,JSF应用是事件驱动的。用户可以通过写一个侦听事件类决定应用程序的行为。JSF应用和Java Web应用一样,它们在Java Servlet容器中运行。通常情况下他们包含:
 
1:JavaBean组件(它们在JSF中被称为Model对象)。
 
2:事件监听器。
 
3:页面(JSP)。
 
4:服务器端帮助类,如数据库访问Bean。
 
在工程的webroot-->web-inf 下面有一个faces-config.xml文件,这个文件是Javabean的管理文件,同时它管理了页面之间的切换关系,起到导航页面的作用。有趣的是这个文件居然有个漂亮的design界面,可以在上面创建新的jsp文件,且可以用拖拽方式定义页面之间的关系,让所有页面的关系看起来很直观。感觉这里是个很酷的设计。页面的导航是根据一个字符串来作为判断依据的,所以在配置导航关系时,只要设定From outcome的值为调用bean方法的返回值即可。值得注意的是,JSF对于导航值只允许string类型。
 
 
调试,运行
 
启动tomcat,输入url就可以运行了。不过文件的后缀不能是.jsp,必须为.faces.
 
 

实例:MyEclipse开发JSF:

1:创建Java Web项目名称为JSFTest。

2:右击项目MyEclipse----Add JSF Capabilites...----出现如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

finish后打开faces-config.xml,在大纲视图出现如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

右击Managed Beans如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

如下填写:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

为Bean添加属性,右击:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

如下配置:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

再来一个属性:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

此时的UserBean如下:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

添加方法hello如下:

public java.lang.String hello(){
if(this.getName().equals("")){
return "fail";
}
else{
this.setWelcome("欢迎,"+this.getName());
return "login";
}
}

 

 

 

右击Managed Beans如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

如下填写:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

为Bean添加属性,右击:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

如下配置:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

再来一个属性:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

此时的UserBean如下:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

添加方法hello如下:

public java.lang.String hello(){
if(this.getName().equals("")){
return "fail";
}
else{
this.setWelcome("欢迎,"+this.getName());
return "login";
}
}

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

点击J图形工具如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

然后再配置文件里面单击出现如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

配置第一个JSP文件index.jsp

将本来的代码删除然后填上如下代码:

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@page contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>第一个JSF程序</title>
</head>
<body>
<f:view>
<h:form>
请输入姓名:<h:inputText value="#{user.name}"/><p>
<h:commandButton value="提交" action="#{user.hello}"/>
</h:form>
</f:view>
</body>
</html>

如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

在重复上面的步骤来一个welcome.jsp填上如下代码:

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@page contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>第一个JSF程序</title>
</head>
<body>
<f:view>
<h:outputText value="#{user.welcome}"/>
</f:view>
</body>
</html>

两个JSP如下图:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

单击如下图工具:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

先点击index.jsp再点击welcome.jsp出现如下,配置login:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

点击两下index.jsp出现如下图配置fail:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客

得到的配置图形:

JSF(Java Server Faces)很简单! - 刘立 - 707903908的博客
然后部署项目(服务器为tomcat6.0.18)。

在浏览器里面输入: http://localhost:8080/JSFTest/index.faces

 
 
 
 
 
 
 
 
posted @ 2013-07-30 14:28  林℃度尒钬  阅读(315)  评论(1编辑  收藏  举报