ツイスティー

<input type='image'> タグ、<input type='button-type'> タグ、または <button> タグに、適切な大きさと色で定義済みの「ツイスティー」グラフィックを描画します。

JSF ツイスティーは、見かけは単純ですが、ツイスティーがページのスタイルに合わせて大きさや色を指定することができる点で、定義済みグラフィックを使用するより利点があります。例えば、22 ピクセルのショッキング・ピンクのツイスティーを指定することができます。

このコンポーネントは内部的に (他の JSF コンポーネントによって) 使用されることに気を付けてください。これが汎用コンポーネントになる予定はありません。

JSFTwistie コンポーネントは、ボタンに「ツイスティー・ヒンキー」(三角形) を描画するために使用します。 <input> タグに適用すると、タグ内の中央にヒンキーを描画し、背景色をクリアします。 <button> タグに適用すると、背景色はクリアせずに、タグの内容の一部としてヒンキーを描画します (text-align により位置指定されます)。 つまり、<input> タグで使用する場合はより複雑なコンポーネント (データ・テーブルのページャーなど) の一部であると想定され、<button> タグで使用する場合は、タグの内容の一部であると想定されます。

イメージに対するツイスティー・コンポーネントの優位点は、ツイスティーにはスタイル設定ができる (特にサイズと色) のに対して、イメージにはスタイル設定ができないことです。 例えば、ツイスティーは任意のサイズ (最大 999 ピクセル幅まで) と任意の色で描画できます。方向を除き、ツイスティーのすべての側面は、ツイスティーを作成する際に指定する属性か、ツイスティーに適用する CSS によってスタイル設定することができます。

コンポーネントを発行する JSF タグ

<hx:pagerDeluxe>

基本 HTML

<input type="image" id="id">

または

<input type="submit" id="id">

または

<input type="reset" id="id">

または

<input type="button" id="id">

または

<button id="id" />

入力タグに適用した場合、JSFTwistie はタグの背景色を透明にします (これによって、Windows® XP の境界線スタイルが変更されることがあります)。 ボタン・タグに適用する場合は、このようなことはありません。

基本タグに関連付けられているすべての属性がサポートされます。

基本タグに関連付けられているすべてのイベント・ハンドラーがサポートされます。

JavaScript コンストラクター

hX_5.addComponent("id", new X_5.JSFTwistie(attributes)); 各部の意味は次のとおりです。

id

コンポーネントが付加される HTML タグの ID。

属性

コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。

属性

表 1. ツイスティーの属性

属性名

説明

bar-style

リスト・スタイルの位置。 値に「inside」を指定すると、棒線が 1 本追加されます。 その他の値の場合は、棒線が描かれません。

color-edge

枠の色。 この属性を省略した場合は、 関連するタグを基準に決定されます。

color-fill

スタイル内に色が存在しない場合は、黒が使用されます。 基本タグが使用不可の場合、 ツイスティーは常に「使用不可」の色で描かれてしまうので、 注意してください。

direction

ツイスティーの方向。 0 は上方向を、1 は下方向を、 2 は左方向を、3 は右方向を、それぞれ表します。

size

ツイスティーの三角形部分の幅 (ピクセル単位)。 省略した場合、ツイスティーは関連するタグのサイズに合わされます (つまり、 関連する入力タグまたはボタン・タグに「フィット」します)。

style

ツイスティーのスタイル。 0 は塗りつぶしの縦長の三角形、1 は塗りつぶしの幅広の三角形、 2 は逆三角形、3 は塗りつぶしの普通の三角形を、それぞれ表します。

CSS クラス

オプションのすべての属性については、その属性が指定されていない場合、属性の値は、基本タグに割り当てられている CSS クラス名に接尾語 _twistie を付加した名前のクラスから派生します。例えば、color-fill が指定されず、基本タグのクラス名が「foo」の場合は、foo_twistie というクラスの色プロパティーで色が定義されます。

表 2. ツイスティーの CSS クラス

CSS クラス名

説明

style

リスト・スタイルのタイプ。 「正方形 (square)」のスタイル・タイプはツイスティー・スタイル 3、 「円形 (circle)」はツイスティー・スタイル 1、 「10 進数 (decimal)」はツイスティー・スタイル 0 として、 それぞれ処理されます。 その他の値は (値なしも含めて)、 ツイスティー・スタイル 2 として処理されます。

bar-style

リスト・スタイルの位置。 値に「inside」を指定すると、棒線が 1 本追加されます。 その他の値の場合は、棒線が描かれません。

size

高さ。 ツイスティーのサイズは、 関連するタグを基準に計算された (実際の) 高さになります。 この属性は、base_twistie クラスから派生せず、 基本タグのスタイルから直接派生しますので、注意してください。

color-fill

スタイル内に色が存在しない場合は、黒が使用されます。 基本タグが使用不可の場合、 ツイスティーは常に「使用不可」の色で描かれてしまうので、 注意してください。

color-edge

枠の色。 この属性を省略した場合は、 関連するタグを基準に決定されます。

API 呼び出し

表 3. ツイスティー API 呼び出し

API 呼び出し

説明

redraw()

基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。

uirelease()

コンポーネントに関連付けられたアクティブ UI をリリースします。

setValue(string)

コンポーネントの値を設定し、提供された値が有効であることを確認します。

object = getValue(boolean)

コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript™ の 日付/時刻オブジェクトとして、値が戻されます。

object = setAttribute(attribute)

属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。

string = getAttribute(attribute-name)

属性の現行値を取得します。

制限

サンプル・コード

青色、右向き、幅広の三角形ツイスティーを、コンストラクターによってスタイル設定し、幅 19 ピクセルで入力タグ内に描画します。

<input style="width:32px;height:32px" type="submit" id="form1:button1" value="">
<script>
hX.addComponent("form1:button1", new hX.JSFTwistie("direction:3", "color-fill:blue", style:0", 
                  "bar-style:0", "size:19"));
</script>

明るい青色、右向き、辺が灰色の、バー付き三角形ツイスティーを、CSS によってスタイル設定し、ボタン・タグに合うようにサイズ調整して描画します。

<style>
.twistie3B_twistie {
	color:#8080ff;
	border-left-color:silver;
	list-style-type: square; 
	list-style-position:inside;
}

</style>
<button  class="twistie3B" style="width:32px;height:32px" type="submit" id="form1:button23B"></button>
<script>
hX.addComponent("form1:button23B", new hX.JSFTwistie("direction:1"));
</script>

フィードバック