Jsf-graphicimage-tag
JSF-h：graphicImage
h：graphicImageタグは、「img」タイプのHTML要素をレンダリングします。
JSFタグ
<h:graphicImage
value = "http://www.finddevguides.com/images/jsf-mini-logo.png"/>レンダリングされた出力
<img src = "http://www.finddevguides.com/images/jsf-mini-logo.png"/>タグ属性
| S.No | Attribute & Description |
|---|---|
| 1 |
id コンポーネントの識別子 |
| 2 |
binding バッキングBeanで使用できるコンポーネントへの参照 |
| 3 |
rendered ブール値。 falseはレンダリングを抑制します |
| 4 |
styleClass カスケードスタイルシート（CSS）クラス名 |
| 5 |
value コンポーネントの値、通常は値バインディング |
| 6 |
alt 画像やアプレットなどの非テキスト要素の代替テキスト |
| 7 |
dir テキストの方向。 有効な値は ltr （左から右）および rtl （右から左）です。 |
| 8 |
lang 要素の属性とテキストの基本言語 |
| 9 |
style インラインスタイル情報 |
| 10 |
tabindex タブインデックスを指定する数値 |
| 11 |
target ドキュメントが開かれているフレームの名前 |
| 12 |
title アクセシビリティのために使用される、要素を説明するタイトル。 視覚的なブラウザは通常、タイトルの価値に関するツールチップを作成します |
| 13 |
usemap 要素の使用マップ |
| 14 |
url 画像のURL |
| 15 |
width 要素の幅 |
| 16 |
onblur 要素がフォーカスを失います |
| 17 |
onchange 要素の価値の変化 |
| 18 |
onclick マウスボタンが要素上でクリックされた |
| 19 |
ondblclick マウスボタンが要素上でダブルクリックされます |
| 20 |
onfocus 要素がフォーカスを受け取る |
| 21 |
onkeydown キーが押された |
| 22 |
onkeypress キーが押され、その後解放されます |
| 23 |
onkeyup キーが解放されます |
| 24 |
onmousedown マウスボタンが要素上で押されています |
| 25 |
onmousemove マウスが要素の上を移動する |
| 26 |
onmouseout マウスは要素の領域を離れます |
| 27 |
onmouseover マウスが要素の上に移動する |
| 28 |
onmouseup マウスボタンが離された |
応用例
上記のタグをテストするテスト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:graphicImage example</h2>
<hr/>
<h:form>
<h3>Image</h3>
<h:graphicImage value = "/images/jsf-mini-logo.png"/>
</h:form>
</body>
</html>すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。 すべてがアプリケーションで問題ない場合、次の結果が生成されます。
