第一個 JSF 程式

最新推荐文章于 2024-09-05 11:49:54 发布

最新推荐文章于 2024-09-05 11:49:54 发布 · 216 阅读

文章标签：

#JSF #Bean #JSP #HTML #SUN

JSF 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用JavaServer Faces (JSF) 开发一个简单的登录程序。文章详细讲解了从创建JavaBean到定义页面流程的过程，并展示了index.jsp和welcome.jsp的具体实现。

現在可以開發一個簡單的程式了，我們將設計一個簡單的登入程式，使用者送出名稱，之後由程式顯示使用者名稱及歡迎訊息。

程式開發人員

先看看應用程式開發人員要作些什麼事，我們撰寫一個簡單的JavaBean：

UserBean.java

 

package onlyfun.caterpillar;


public class UserBean {

private String name;


public void setName(String name) {

this.name = name;

}


public String getName() {

return name;

}

}

這個Bean將儲存使用者的名稱，編譯好之後放置在/WEB-INF/classes下。

接下來設計頁面流程，我們將先顯示一個登入網頁/pages/index.jsp，使用者填入名稱並送出表單，之後在 /pages/welcome.jsp中顯示Bean中的使用者名稱與歡迎訊息。

為了讓JSF知道我們所設計的Bean以及頁面流程，我們定義一個/WEB-INF/faces-config.xml：

faces-config.xml

 

<?xml version="1.0"?>

<!DOCTYPE faces-config PUBLIC

"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"

"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">


<faces-config>

<navigation-rule>

<from-view-id>/pages/index.jsp</from-view-id>

<navigation-case>

<from-outcome>login</from-outcome>

<to-view-id>/pages/welcome.jsp</to-view-id>

</navigation-case>

</navigation-rule>


<managed-bean>

<managed-bean-name>user</managed-bean-name>

<managed-bean-class>

onlyfun.caterpillar.UserBean

</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

</faces-config>

在<navigation-rule>中，我們定義了頁面流程，當請求來自<from-view- id>中指定的頁面，並且指定了<navigation-case>中的<from-outcome>為login時，則會將請求導向至<to-view-id>所指定的頁面。

在<managed-bean>中我們可以統一管理我們的Bean，我們設定Bean物件的存活範圍是session，也就是使用者開啟瀏覽器與程式互動過程中都存活。

接下來要告訴網頁設計人員的資訊是，他們可以使用的Bean名稱，即<managed-bean-name>中設定的名稱，以及上面所定義的頁面流程。

網頁設計人員

首先網頁設計人員撰寫index.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=Big5"%> 

<html>

<head>

<title>第一個JSF程式</title>

</head>

<body>

<f:view>

<h:form>

<h3>請輸入您的名稱</h3>

名稱: <h:inputText value="#{user.name}"/><p>

<h:commandButton value="送出" action="login"/>

</h:form>

</f:view>

</body>

</html>

我們使用了JSF的core與html標籤庫，core是有關於UI元件的處理，而html則是有關於HTML的進階標籤。

<f:view>與<html>有類似的作用，當您要開始使用JSF元件時，這些元件一定要在<f: view>與</f:view>之間，就如同使用HTML時，所有的標籤一定要在<html>與< /html>之間。

html標籤庫中幾乎都是與HTML標籤相關的進階標籤，<h:form>會產生一個表單，我們使用<h: inputText>來顯示user這個Bean物件的name屬性，而<h:commandButton>會產生一個提交按鈕，我們在action屬性中指定將根據之前定義的login頁面流程中前往welcome.jsp頁面。

網頁設計人員不必理會表單傳送之後要作些什麼，他只要設計好歡迎頁面就好了：

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=Big5"%> 

<html>

<head>

<title>第一個JSF程式</title>

</head>

<body>

<f:view>

<h:outputText value="#{user.name}"/> 您好！

<h3>歡迎使用 JavaServer Faces！</h3>

</f:view>

</body>

</html>