JSF イメージ・コンポーネントは、4 種類の可視状態 (normal or up、depressed、moused、および disabled) を提供して、 タイプ・ボタン (例えば、実行、リセット、ボタン、およびイメージ) の 標準 HTML <img> または <input> タグを強化するために使用されます。 さらに、スタイル設定または位置指定が可能なラベル (既にラベルを持つボタンの 場合は 2 番目のラベル) およびアイコン (小さいグラフィック) を イメージ・ボタンに追加するために使用することもできます。
最も単純な (属性が提供されていない) 場合、 事実上、CSS 疑似クラス吹き出しのサポートが提供されます。 CSS で (classname:hover ではなく) classname_moused を (CSS を介して) 指定すると、 ボタン上にマウスオーバー効果が付加されます。同様に、depressed および disabled の場合は、ボタンのスタイルを指定する機能が提供されます。
コンポーネントでは、状態を提供するだけでなく、 (既にボタン内にあるグラフィック/テキストのほかに) アイコンをボタンに追加することができます。 例えば、小さな矢印やヒンキーのグラフィックをボタンに追加することができます。 同様に、(ボタンが既に表示しているラベルのほかに) ラベルをボタンに追加できます。 アイコンとラベルも、状態をサポートしています (例えば、ラベルはマウスオーバーで赤色に、アイコンは黒にすることができます)。
イメージ・ボタンの場合 (<input type="image">)、コンポーネントは、ボタンの状態に基づいて src 属性の値を スワッピングする、JavaScript 提供の共通機能をサポートします (例えば、マウスがボタン上にあるときに、別のイメージに切り替えます)。
<img> の場合、JSF イメージは事実上、タグをボタンに変えます。 イメージをクリックするとアクションが実行されるようにする場合は、 クリック・イベント・ハンドラーを指定する必要があります。キーボードは自動的に img タグに関連付けられるため、 ボタンのクリックに使用できます (クリック・イベント・ハンドラーが呼び出されます)。 taborder に img を配置するように、 tabindex を設定する必要があります (クリックできる場合)。これは、ブラウザーでデフォルトでは行われません。
<hx:commandExButton>
<input type="image" id="id"> <input type="submit" id="id"> <input type="reset" id="id"> <input type="button" id="id"> <img src="src" id="id">
基本タグに設定されるすべての属性がサポートされます。
基本タグに関連付けられているすべてのイベント・ハンドラーがサポートされます。
hX_5.addComponent("id", new hX_5.JSFImage(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
depressed |
ボタンを押したときに表示される イメージの URL (タイプ・イメージのイメージとボタンの場合のみ) 省略すると、ボタンを押したときに標準イメージが使用されます。 |
disabled |
オブジェクトを使用可能にするかどうかを指定します。 |
icon-normal |
通常の状態のときに、 イメージ/ボタンの上部に表示されるアイコン・イメージの URL。 (例: そのボタンがドロップダウンであることを表す、小さな三角形のイメージ。) |
icon-moused |
マウス・カーソルが イメージ/ボタン上に置かれているときに、 アイコンとして表示されるイメージの URL (吹き出しの場合)。 この属性を使用する場合は、標準イメージも提供する必要があります。 省略すると、標準イメージが使用されます (吹き出しの場合)。 |
icon-depressed |
イメージ/ボタンを押したときに、 アイコンとして表示されるイメージの URL。 この属性を使用する場合は、標準イメージも提供する必要があります。 省略すると、ボタンを押したときに標準イメージが使用されます。 |
label |
オブジェクト用に表示するテキスト。 |
moused |
ボタン上に マウス・カーソルが置かれているときに 表示されるイメージ (吹き出し) の URL (タイプ・イメージのイメージとボタンの場合のみ)。 省略すると、標準イメージが使用されます (吹き出しの場合)。 |
normal |
ボタンが通常の状態 (マウスオーバーされていない、
押されていない、使用不可になっていない) であるときに表示される、
イメージの URL (タイプ・イメージのイメージとボタンの場合のみ)。
<input> タグの src 属性を使用して、
ボタンのイメージを指定することもできます。
イメージ・タグの場合、HTML の
制約により、src を使用しない場合でも src を
必ず提供する必要があります。
注: この属性を始め、URL を提供する
すべての属性において、URL は
ファイル・システム上のファイルを参照できます。
URL を URL Prolog にラップさせることも可能です。
イメージは、属性として指定する
代わりに、CSS を使用して指定することもできます。
|
CSS クラス名 |
説明 |
---|---|
user-supplied |
<input> タグ
または <img> タグのクラスとして提供されます。
通常 (稼働) モードでの、
イメージ/ボタンのスタイルの
プロパティーを設定します (例えば、高さ、幅、背景色の設定)。
注: イメージ/ボタンの種類やボタンの状態にかかわらず、
背景イメージのスタイル・プロパティーを使用して、
ボタンとして使用されるイメージを指定することができます。
これを指定する場合、
高さと幅のプロパティーも指定する (背景
イメージのサイズに合わせる) 必要があります。
|
<base>_moused |
マウスオーバーした場合の、 イメージ/ボタン (吹き出しの場合) のスタイルのプロパティーを設定します (例えば、 高さ、幅、背景色の設定)。 省略すると、マウス・カーソルを置いたときに、 通常の状態が使用されます。 |
<base>_depressed |
イメージ/ボタンが押された場合の、 イメージ/ボタンのスタイルのプロパティーを設定します (例えば、 高さ、幅、背景色の設定)。 省略すると、ボタンが押された場合に、 通常の状態が使用されます。 |
<base>_disabled |
使用不可の場合の、 イメージ/ボタンのスタイルのプロパティーを設定します (例えば、 高さ、幅、背景色の設定)。 省略すると、使用不可の場合に通常の状態が使用されます。 |
<base>_Label |
通常 (稼働) 状態のラベルのスタイルを 設定します (ラベルが指定されている場合)。 ラベルのフォント・プロパティー (フォント・ファミリーや フォント・サイズなど) は、 このクラスで指定する必要がありますので注意してください。 これらは、基底クラスからは選出されません。 |
<base>_Label_moused |
ボタンが通常 (稼働) 状態であるときの、 ラベルのスタイルを設定します (ラベルが指定されている場合)。 省略すると、ラベルに通常の状態が使用されます (吹き出しの場合)。 |
<base>_Label_depressed |
ボタンが押された場合の、 ラベルのスタイルを設定します (ラベルが指定されている場合)。 省略すると、ボタンが押された場合に、 通常の状態が使用されます。 |
<base>_Label_disabled |
ボタンが使用不可の場合の、 ラベルのスタイルを設定します (ラベルが指定されている場合)。 省略すると、使用不可の場合に通常の状態が使用されます。 |
<base>_Icon |
通常 (稼働) 状態の場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 |
<base>_Icon_moused |
ボタンが通常 (稼働) 状態の場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 省略すると、アイコンにマウス・カーソルを置いたときに、 通常の状態が使用されます。 |
<base>_Icon_depressed |
ボタンが押された場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 省略すると、ボタンが押された場合に、 通常の状態が使用されます。 |
<base>_Icon_disabled |
ボタンが使用不可の場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 省略すると、使用不可の場合に通常の状態が使用されます。 |
API 呼び出し |
説明 |
---|---|
redraw() |
基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。 |
uirelease() |
コンポーネントに関連付けられたアクティブ UI をリリースします。 |
setValue(string) |
コンポーネントの値を設定し、提供された値が有効であることを確認します。 |
object = getValue(boolean) |
コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript™ の 日付/時刻オブジェクトとして、値が戻されます。 |
object = setAttribute(attribute) |
属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。 |
string = getAttribute(attribute-name) |
属性の現行値を取得します。 |
アイコンまたはラベル付きの レンダリングされたボタンでは、マウス・ポインターがボタン上にあるときにマウス・ポインターを押し、 (ボタンが押し下げられた状態で) ボタンから離れた場合、振る舞いは 標準の Windows® ボタンの振る舞いと一致しません。 Windows では、 カーソルがボタンから離れている間、ボタンは押されている可能性があり、カーソルが離れている時にマウス・ボタンを 離しても何も起こりません。ただし、(マウス・ボタンを押したまま) カーソルを 移動してボタン上に戻すと、ボタンは再度押し下げられて、 mouse-up によってクリックされます。JSF イメージ・ボタンでは、 ボタンから離れたときも、ボタンは正しく押されています。移動して戻る場合、 再度ボタンを押し下げられる場合とできない場合があります。IE では、mouse down で マウスがボタン上にある場合のみクリックすることができ、mouse up でボタン上に戻ります。 Mozilla では、振る舞いの信頼性は低くなります。
マウスオーバー時のイメージ、 押し下げイメージ、およびクリック・ハンドラーを <img> タグに追加します。 イメージはすべて CSS で指定されます。
<style> .green, .green_moused, .green_depressed { border-width: 0px; height: 25px; width: 113px; background-repeat: no-repeat; } .green { background-image: url("img/green-button.gif") } .green_moused { background-image: url("img/green-button-moused.gif") } .green_depressed { background-image: url("img/green-button-depressed.gif") } <img border='0' class="green" id="image1" src="img/1x1.gif" onclick="return doClick(this, event);"> <script> hX.addComponent("image1", new hX.JSFImage()); </script>
CSS を使用してマウスオーバー効果 (強調) を JSF ボタンに追加します。
<style> .button, .button_moused { border-width: 2px; border-style: solid; border-color: black; color: black; font-weight: normal; width: 100px; } .button_moused { border-color: blue; font-weight: bold; } </style> <hx:commandExButton type="submit" styleClass="button" id="button1"></hx:commandExButton> <script> hX.addComponent("form1:button1", new hX.JSFImage()); </script>
マウスオーバー時のイメージ、押し下げイメージ、使用不可のイメージ、 ラベルおよびアイコンを、HTML ボタンに追加します。
<style> <script> .button4a, .button4a_moused, .button4a_depressed { width:100px; height:21px; } .button4a_Label, .button4a_Label_moused, .button4a_Label_depressed { font-family: sans-serif; color: black; font-size: 14px; text-align: left; margin-left: 24px; } .button4a_Label_depressed { margin-left:25px; margin-top:2px; } .button4a_Icon, .button4a_Icon_moused, .button4a_Icon_depressed { text-align: left; margin-left: 4px; height: 17px; width: 17px; background-repeat: no-repeat; } .button4a_Icon_depressed { margin-top:2px; margin-left:5px; } </script> <input type="image" class="button4a" id="button2" name="form1:text21" alt="Search" title="Search" /> <script> hX.addComponent("form1:button2", new hX.JSFImage("icon-normal:img/search-icon.gif", "icon-moused:img/search-icon-moused.gif", "normal:img/search-button.gif", "moused:img/search-button-moused.gif", "depressed:img/search-button-depressed.gif", "label:search")); </script>