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:html

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

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

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

finish后打开faces-config.xml,在大纲视图出现以下图:数据库

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

右击Managed Beans以下图:浏览器

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

以下图:tomcat

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

以下填写:服务器

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

为Bean添加属性,右击:app

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

以下配置:框架

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

再来一个属性:jsp

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

相关文章
相关标签/搜索