h:inputText 的一般文字輸入

雖然只是一個簡單的文字輸入，它是一般表格填寫最常用的元件。有許多的變化使用情形：
第一部份我們先來看最簡單的使用（僅供教學參考，不適合在實際案例中使用）：
JSF xhtml


結果頁 java bean 內容

/**
 * 表單輸入程式示範
 */
package jason.blogger.jsf;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;

/**
 * @author jason
 * 2013/5/19
 */
@ManagedBean(name = "appForm")
public class ApplyForm implements Serializable
{
 private static final long serialVersionUID = 1L;
    private String userId;   // 使用者代號
    private String userName; // 使用者名稱
    private String password; // 密碼
    private String gender;   // 性別
    private String city;     // 城市
 /**
  * @return the userId
  */
 public String getUserId()
 {
  return userId;
 }
 /**
  * @param userId the userId to set
  */
 public void setUserId(String userId)
 {
  this.userId = userId;
 }
 /**
  * @return the userName
  */
 public String getUserName()
 {
  return userName;
 }
 /**
  * @param userName the userName to set
  */
 public void setUserName(String userName)
 {
  this.userName = userName;
 }
 /**
  * @return the password
  */
 public String getPassword()
 {
  return password;
 }
 /**
  * @param password the password to set
  */
 public void setPassword(String password)
 {
  this.password = password;
 }
 /**
  * @return the gender
  */
 public String getGender()
 {
  return gender;
 }
 /**
  * @param gender the gender to set
  */
 public void setGender(String gender)
 {
  this.gender = gender;
 }
 /**
  * @return the city
  */
 public String getCity()
 {
  return city;
 }
 /**
  * @param city the city to set
  */
 public void setCity(String city)
 {
  this.city = city;
 }
 
}

在這個 h:inputText 案例中，呈現了一個完整而簡單的 JSF 概念。有以下幾點值得說明：
1. outputText 與 outputLabel 的不同：
  outputLabel 轉換成 html 時會變成 <label> 標籤，而 outputText 會直接輸出文字，這在意義上是不同的。

2.ManagedBean的使用：
   JSF 2.0 在 Java Class 中上方加上 @ManagedBean 就可以讓這個 Bean 變成 ManagedBean，並且指定 ManagedBean 的名字。（預設未指定 ManagedBean 名稱，則以 class 名稱第一個字母小寫為名，如上例若未指定 name 則 bean name 為 appForm）
未特別指定 Bean 的 Scope ，它預設為 request scoped。

3.commandButton 的基本頁面導向：
   JSF 2.0 CommandButton 的 action 屬性可以直接用字串指定要前往的頁面。 指定 /xhtml/resultPage 時，按下 commandButton 會被導到 xhtml 目錄下的 resultPage.jsf 頁面。

h:outputText 單純的文字輸出

<h:outputText> 是最常用到的文字輸出標籤之一。雖然在 JSF 2.0 不一定要用它才能輸出文字，但是它還是有一些有用的屬性方便我們做各種變化輸出。
比較常會用到屬性列表如下：
h:outputText 屬性

屬性	說明
value	實際上輸出的文字
rendered	輸出的條件，當整個運算為true 時會輸出；為 false 時不會輸出。
id	元件的 id 。ajax 或 css 操作元件時會使用。
style	css 樣式。直接使用css 樣式
styleClass	css 樣式類別。
escape	是否要避掉 XML 或 HTML  敏感的字元。如（< , > ）等。
title	（滑鼠滑過時）提示用的 title 和 html 的 title 相同。

以下的程式 我們就來示範這些屬性的使用。
示範程式：
Java Managed Bean：

/**
 * 示範 outputText 用
 */
package jason.blogger.jsf;

import javax.faces.bean.ManagedBean;

/**
 * @author jason 2013/5/13
 */
@ManagedBean
public class Person
{
 private String firstName;
 private String lastName;
 private String tag;

 public Person()
 {
  super();
  firstName="三";
  lastName="張";
  tag="
";
 }

 public String getFirstName()
 {
  return firstName;
 }

 public void setFirstName(String firstName)
 {
  this.firstName = firstName;
 }

 public String getLastName()
 {
  return lastName;
 }

 public void setLastName(String lastName)
 {
  this.lastName = lastName;
 }

 public String getTag()
 {
  return tag;
 }

 public void setTag(String tag)
 {
  this.tag = tag;
 }
}

xhtml ：


CSS:

@CHARSET "UTF-8";
.name
{
  background:pink;
}

#first
{
 color:yellow;
}

輸出結果：