您的位置：首页 > 编程语言 > Java开发

JSF框架简介与myeclipse构建简单实例

2014-10-29 00:00 225 查看
摘要: JavaServer Faces (JSF) 是一种用于构建Java Web 应用程序的标准框架，它提供了一种以组件为中心的用户界面（UI）构建方法，从而简化了Java服务器端应用程序的开发

典型的JSF应用程序包含下列部分：

一组JSP页面

一组后台bean（为在一个页面上的UI组件定义的属性和函数的JavaBean组件）

应用程序配置资源文件（定义页面导航规则、配置bean和其它的自定对象，如自定义组件）

部署描述文件（web.xml）

一组由应用程序开发者创建的自定义对象（有可能）

一些可能包含自定义组件、约束、转换器或者监听器的对象

为在页面中表现自定义对象的一组自定义tag

简单实例

1.新建一个web project






2.为项目添加jsf支持

在项目的属性中选择project faces，点选JavaServer Faces选项，如图






添加jsf支持后myeclipse自动在web.xml中添加如下代码：

  <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> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param>

以及在web.xml同级目录创建一个faces-config.xml，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd" version="2.2">

</faces-config>


3.创建一个bean类，代码：
package com.org.domain;
/**
*
* @author Administrator
*
*/
public class User {
private String name;
private String pass;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPass() {
return pass;
}
public void setPass(String pass) {
this.pass = pass;
}

public String login() {
if(name.equals("wck")&&pass.equals("123")) {
return "success";
}else {
return "error";
}
}


4.新建一个login.xhtml



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions" lang="en">
<h:head>
<title>JSF 2.2 Page</title>
<meta name="keywords" content="enter,your,keywords,here"/>
<meta name="description" content="A short description of this page."/>
<meta name="content-type" content="text/html; charset=UTF-8"/>

<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
</h:head>
<h:body>
<f:view>
<h:form>
<h:panelGrid columns="3">

<h:outputLabel for="name" value="用户名：" />

<h:inputText id="name" value="#{user.name}" required="true" />

<h:message for="name" />

<h:outputLabel for="pass" value="密码：" />

<h:inputSecret  id="pass" value="#{user.pass}"  required="true" />

<h:message for="pass" />

</h:panelGrid>

<h:panelGrid>

<h:panelGroup>

<h:commandButton value="登录" action="#{user.login}" />

</h:panelGroup>

</h:panelGrid>
</h:form>
</f:view>
</h:body>
</html>


5.在faces-config.xml中配置导航规则

<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd" version="2.2"> <managed-bean> <managed-bean-name>user</managed-bean-name> <managed-bean-class>com.org.domain.User</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/login.xhtml</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/index.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>error</from-outcome> <to-view-id>/login.xhtml</to-view-id> </navigation-case> </navigation-rule> </faces-config>



6.index.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <body> ${user.name} 欢迎登录~！ </body> </html>



7.页面效果
地址栏输入http://localhost:8080/jsfTest/




直接点击登录



输入正确值：用户名 wck，密码 123

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JSF 实例
相关文章推荐
新的分享
章节导航