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

相關文章
相關標籤/搜索