JSF-h：commandButton

h：commandButtonタグは、「submit」タイプのHTML入力要素をレンダリングします。

JSFタグ

<h:commandButton value = "Click Me!" onclick = "alert('Hello World!');"/>

レンダリングされた出力

<input type = "submit" name = "j_idt10:j_idt13" value = "Click Me!"
   onclick = "alert('Hello World!');"/>

タグ属性

S.No	Attribute & Description
1	id コンポーネントの識別子
2	rendered ブール値。 falseはレンダリングを抑制します
3	value コンポーネントの値、通常は値バインディング
4	valueChangeListener 値の変更に応答するメソッドにバインドするメソッド
5	coords 形状が長方形、円、または多角形である要素の座標
6	dir テキストの方向。有効な値は ltr （左から右）および rtl （右から左）です。
7	disabled 入力要素またはボタンの無効状態
8	tabindex タブインデックスを指定する数値
9	target ドキュメントが開かれているフレームの名前
10	title アクセシビリティのために使用される、要素を説明するタイトル。視覚的なブラウザは通常、タイトルの価値に関するツールチップを作成します
11	width 要素の幅
12	onblur 要素がフォーカスを失います
13	onchange 要素の価値の変化
14	onclick マウスボタンが要素上でクリックされた
15	ondblclick マウスボタンが要素上でダブルクリックされます
16	onfocus 要素がフォーカスを受け取る
17	onkeydown キーが押された
18	onkeypress キーが押され、その後解放されます
19	onkeyup キーが解放されます
20	onmousedown マウスボタンが要素上で押されています
21	onmousemove マウスが要素の上を移動する
22	onmouseout マウスは要素の領域を離れます
23	onmouseover マウスが要素の上に移動する
24	onmouseup マウスボタンが離された
25	onreset フォームがリセットされました
26	onselect 入力フィールドでテキストが選択されています

応用例

上記のタグをテストするテストJSFアプリケーションを作成しましょう。

Step	Description
1	Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter.
2	Modify home.xhtml as explained below. Keep rest of the files unchanged.
3	Compile and run the application to make sure business logic is working as per the requirements.
4	Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
5	Launch your web application using appropriate URL as explained below in the last step.

home.xhtml

<!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">
   <head>
      <title>JSF Tutorial!</title>
   </head>

   <body>
      <h2>h:commandButton example</h2>
      <hr/>

      <h:form>
         <h:commandButton value = "Click Me!" onclick = "alert('Hello World!');"/>
      </h:form>
   </body>
</html>

すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。すべてがアプリケーションで問題ない場合、次の結果が生成されます。

JSF h：commandButton

Jsf-commandbutton-tag

JSF-h：commandButton

JSFタグ

レンダリングされた出力

タグ属性

応用例

home.xhtml

目次