JSF 2テキストエリアの例

JSFでは、 <h:inputTextarea/> タグを使用してHTMLテキストエリアをレンダリングできます。例えば、

JSFタグ…​

<h:inputTextarea cols="30" rows="10"/>

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

<textarea name="random value" cols="30" rows="10"></textarea>

JSFのテキストエリアの例

1.マネージドBean

"user"という名前で宣言されたマネージドBean。

package com.mkyong.form;

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

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable {

    private String address;

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

}

2.ページを見る

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

  • demo.xhtml ** - "h:inputTextarea"経由でテキストエリアを描画し、 "h:commandButton"でボタンをクリックすると、textareaの値がsetAddress()メソッドを介して "userBean.address" 「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 textarea example</h1>

      <h:form>
        <table>
            <tr>
              <td valign="top">Address :</td>
              <td><h:inputTextarea value="#{user.address}" cols="30" rows="10"/></td>
            </tr>
            </table>
            <h:commandButton value="Submit" action="user"/>
          </h:form>

    </h:body>
</html>
  • user.xhtml ** - "h:outputText"を介して提出されたtextarea値を表示する

<?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 textarea example</h1>

     Address : <h:outputText value="#{user.address}"/>
    </h:body>
</html>

デモ

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

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

例:jsf2-textarea-example-1、width = 640、height = 390]

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

jsf2-textarea-example-2、title = "jsf2-textarea-example-2"、width = 640、height = 375

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

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