スライダー

<input type='text'> タグを、横にボタンが付いたフィールドに変えます。このボタンは、数値を選ぶために使用されるスライダーを「ポップアップ」するのに使用されます。 基本的に、JSFSlider は「編集可能なコンボ・ボックス」と同じような役割を果たします。ユーザーは入力領域に数値を入力するか、ピッカー・ボタンをクリックして、ドロップダウン内に「ポップアップされた」スライダーから日付を選択することができます (つまり、選択リストの代わりにスライダーがポップアップされます)。

複合コンポーネントは <input> タグと同じサイズおよび形状を持ち、入力フィールドは、それに設定されたその他の設定 (例えば入力支援) を保持します。

コンポーネントは、NumberConverter と同じ数値を処理します。

JSFSlider コンポーネントは <input> フィールドにヘルパー・ボタンを追加します。このフィールドは、スライダーの表示をポップアップするために使用され、それからスライダーを使用して数値を選択することができます。

ヘルパー・ボタンは、入力フィールドの右側に追加されます。入力フィールドは、ボタンが取り込まれた後も、元の特性が (正確に) すべて保持されます。 例えば、入力フィールドが幅 120px に定義されている場合、 ヘルパー・ボタンが追加された結合コンポーネントの幅も 120px となります。このボタンには、入力フィールドに一致するスタイル・プロパティーが想定されます。 例えば、ボタンの境界線は入力フィールドの境界線と一致します。入力フィールドに適用される 適用可能な属性 (例えば、使用不可) も、このボタンに反映されます。

スライダーを含むポップアップの振る舞いは、「通常の」Windows® ポップアップと同じです。すなわち、ポップアップ以外の場所をクリックすると、ポップアップが非表示になり、値は変更されません。 ポップアップ内でマウスを押すと、「スタイラス」が一番近い目盛りに移動し、マウスを動かすことによってスタイラスが別の値に移動します。 マウス・ボタンを放すと、値が選択されます。スライダーでの選択は常に「目盛りの印に対して」行われます。つまり、スライダーは連続していません (2 つの目盛り間の値を選択することはできません)。

ポップアップは通常、入力フィールドの下に、左端を揃えて表示されます。 ポップアップが入力フィールドの下に「合わない」場合 (つまり、入力フィールドがウィンドウの下部近くにある場合) は、入力フィールドの上に表示されます。

ポップアップおよびスライダーのすべての部分は (CSS によって) スタイル設定できますが、スライダーのサイズはスタイル設定できません。スライダーの幅は、スライダーを作成する際に指定する属性によって明示的に設定できます。 スライダーの高さは内容に基づき計算されます。

JSFSlider には NumberConverter が必要です。コンバーターは、入力フィールドの値 (ストリング) を JavaScript™ 数値オブジェクトに変換する場合、またはその逆を行う場合に使用されます。また、コンバーターはスライダーに表示される数値ラベルのフォーマット設定にも使用されます。 コンバーターを構成してからスライダーを構成し、 コンバーターの ID をスライダーに渡す必要があります。 入力フィールドには、NumberValidator や NumberAssist コンポーネントが関連付けられる場合があります。バリデーターが入力フィールドに関連付けられている場合、これは (コンストラクターの属性として) JSFSlider に渡される必要があります。スライダーの最小および最大の境界を構成するには、バリデーターを使用します。このため、バリデーターを指定することを強くお勧めします。 支援が入力フィールドに関連付けられている場合、JSFSlider と関連付ける必要はありません。

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

<hx:inputText>

基本 HTML

<input type="text">

スライダーの値は、入力フィールドの値として渡されます。 この値は、コンポーネントと関連付けられたコンバーターによって記述されるスタイルでフォーマット設定する必要があります。 最初にページに値が渡されない場合は、スライダーには初期値がありません。

型テキストの入力に関連付けられたすべての属性が サポートされています。

型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。

JavaScript コンストラクター

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

id

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

属性

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

属性

表 1. スライダーの属性

属性名

説明

converter

構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。

validator

構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。

css-prefix

カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。

increment

スライダーの「目盛り」間の増加量。 例えば、最小値が 1 で最大値が 10 のスライダーの場合、 増加量を 1 にすると、 その目盛りは 1、2、3、4、5、6、7、8、9、10 となります。 スライダー内では、目盛りが付いた値のみを選択できます。 小数 (例えば .01) を値に取ることができます。

label-increment

目盛りの下にラベルを描く間隔。 値 1 の場合は、目盛りごとにラベルが描かれます。 値 2 の場合は、1 つおきに目盛りにラベルが描かれます。

show-labels

これが指定された場合、 現在選択されている色の名前が、 カラー・スウォッチの上部にある入力フィールドに表示されます。 省略された場合は、名前は表示されません。 入力フィールドには、 現在選択されている色を示すカラー・スウォッチのみが表示されます。 アクセシビリティの関係上、 すべての場合において、色の名前は入力フィールドに存在します。 このオプションは、その名前を可視状態にするだけですので、 注意してください。

scale-width

スケールの幅 (ピクセル単位)。

button-border

入力フィールドに対するポップアップ・ボタンの表示方法を制御します。

button-color

ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。

CSS クラス

スライダーに対する CSS はほとんどありません。入力タグに適用されるクラスは入力フィールドをスタイル設定 (例えば、入力フィールドの境界線を設定) し、 さらに、その隣にあるポップアップ・ボタンをスタイル設定 (入力フィールドの境界線に一致するように設定) します。2 番目のクラス・セットはポップアップ・スライダーをスタイル設定します。ポップアップのスタイル設定に使用されるクラスのセットは、 通常の hxclient 命名規則に従います。この命名規則では、単一の「基底クラス名」があり、 スライダーのスタイル設定に使用される他のすべてのクラスは、その基底名を接尾部付きで使用します。デフォルトでは、スライダーは、基底クラス inputText_Slider を使用してスタイル設定されます。css-prefix 属性は、異なる基底クラスを指定する場合に使用できます。

表 2. スライダーの CSS クラス

CSS クラス名

説明

base_Slider

スライダーを含む div のスタイルを設定します。 div のサイズ (幅/高さ) を設定しても、 スライダーのサイズは変更されない (スケールやポップアップも同様) ので、 注意してください。 幅を変更するには、scale-width 属性を使用してください。 ここでは、常に高さが計算対象となります。 クラスのフォント・プロパティーを使用すると、 スライダー内のテキストのスタイルを設定できます。

<base>_Slider-Body

スライダーのスケールとスタイラス (コンテンツ) の スタイルを設定します。 色のプロパティーを使って、スケールに色を付けます。 スタイラスのスタイル設定は、 背景の色と境界線の設定によって行います。

注: ポップアップをスタイル設定する基底クラスは、一部のブラウザーでポップアップ div に適用することができる 3 種類の「効果」をサポートしています。これらの効果はすべてのブラウザーでサポートされているわけではありません (サポートされていない場合は、それらの効果が単に描画されなくなります)。詳しくは、日付ピッカーを参照してください。

API 呼び出し

表 3. スライダーの API 呼び出し

API 呼び出し

説明

redraw()

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

uirelease()

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

setValue(string)

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

object = getValue(boolean)

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

object = setAttribute(attribute)

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

string = getAttribute(attribute-name)

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

アクセシビリティ

スライダーは完全にキーボードによるアクセスが可能です。 入力フィールドとピッカー・ボタンはどちらも、タブ順序に組み込まれています。 入力フィールドでは、上下矢印キーを使用して、増分ごとに値を増加/減少させることができます。上下矢印キーを押すと、そのキーが放されるまで、増分ごとに値が「スピン」します。 ボタンにフォーカスがある場合、スペース・バーを押すとスライダーが表示され、フォーカスは「スタイラス」に移動します。 スライダーにフォーカスがある場合、スペース・バーを押すと現行値が選択されます (ポップアップが閉じ、フォーカスはボタンに戻ります)。ESC を押すとポップアップが閉じ、フォーカスがボタンに戻って値は変更されないままになります。 左右矢印キーを押すと値が変更されます。

スライダーでは現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。これは早急に追加されます。

制限

サンプル・コード

数値の形式がパーセントであるフィールドにスライダーを追加します。 スライダーが 0 から 100% の値を含むように制限します。目盛りが 1 パーセントごとに描画され、ラベルが 10 パーセントごとに描画されるように指定します。 指定した CSS クラスを使用して、立体の影が付いたモノクロのスライダーを描画します。

<style>
.inputText1_Slider {
	background-color:white;
	border:1px;
	border-style:solid;
	border-color:windowframe;
	font-family: sans-serif;
	font-decoration: none;
	color: black;
	outline-color: gray;
	outline-width: 4px;
	-moz-outlineColor: #E4E4E5;
	-moz-outline-width: 4px;
}

.inputText1_Slider_Body {
	background-color:silver;
	color: threedshadow;
	border-style:solid;
	border-color:threedhighlight;
	border-right-color:threedShadow;
}
</style>

<script>
hX.addConverter("x1", new hX.NumberConverter("strict:1", "pattern:##0%", "locale:,.%‰-$"));
hX.addValidator("x1", new hX.NumberValidator( "min-bound:0.0",  "max-bound:1.0",  "required:true"));
hX.addComponent("form1:text1", new hX.JSFSlider("css-prefix:inputText1", "increment:.01",
                  "label-increment:10","converter:x1","validator:x1"));
</script>

フィードバック