JSFでは、

<h:inputText/>

タグを使用して、

type = “text”

、テキストボックスのHTML入力をレンダリングできます。例えば、

JSFタグ…​

<h:inputText/>

このHTMLコードをレンダリングする…​

<input type="text" name="j__idt6:j__idt7"/>


P.S name属性の値は、JSF.

によってランダムに生成されます。

JSFのテキストボックスの例

1.マネージドBean

単純なマネージドBeanで、 “userName”プロパティを持ちます。

package com.mkyong.form;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;

@ManagedBean
@SessionScoped
public class UserBean implements Serializable {

    private String userName;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }
}

2.ページを見る

デモンストレーションのための2ページ。

  • demo.xhtml ** – “h:inputText”でテキストボックスをレンダリングし、 “h:commandButton”でボタンをクリックすると、setUserName()メソッドを介してtextboxの値が “userBean.userName” user.xhtmlに転送します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:body>
        <h1>JSF 2 textbox example</h1>

      <h:form>
            <h:inputText value="#{userBean.userName}"/>
            <h:commandButton value="Submit" action="user"/>
          </h:form>

    </h:body>
</html>

  • user.xhtml ** – “h:outputText”を介して送信されたテキストボックス値を表示する

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:body>
        <h1>JSF 2 textbox example</h1>

    Submitted value : <h:outputText value="#{userBean.userName}"/>

    </h:body>
</html>

デモ


URL:http://localhost:8080/JavaServerFaces/

「demo.xhtml」ページを表示する


jsf2-textbox-example-1、title = "jsf2-textbox-example-1"、width = 640、height = 321

ボタンをクリックすると、 “user.xhtml”ページが表示され、送信されたテキストボックスの値


jsf2-textbox-example-2、title = "jsf2-textbox-example-2"、width = 640、height = 321

ソースコードをダウンロードする

ダウンロード – リンク://wp-content/uploads/2010/09/JSF-2-TextBox-Example.zip[JSF-2-TextBox-Example.zip](9KB)