複合コンポーネントは <input> タグと同じサイズおよび形状を持ち、入力フィールドは、それに設定されたその他の設定 (例えば入力支援) を保持します。
このコンポーネントは、数値または日付の値をスピンすることができます。つまり、コンポーネントは NumberConverter と同じ数値、または JSFDateConverter によって指定された任意の「時刻」の値を処理します。
JSFSpinner コンポーネントは 1 組のヘルパー・ボタンを <input> フィールドに追加します。このフィールドは、フィールド内の値を増加または減少させるために使用することができます。
これらのヘルパー・ボタンは入力フィールドの右に重なって追加されます。 入力フィールドは、ボタンが取り込まれた後も、元の特性が (正確に) すべて保持されます。 例えば、入力フィールドが幅 120px に定義されている場合、 ヘルパー・ボタンが追加された結合コンポーネントの幅も 120px となります。これらのボタンには、入力フィールドに一致するスタイル・プロパティーが想定されます。 例えば、ボタンの境界線は入力フィールドの境界線と一致します。入力フィールドに適用される 適用可能な属性 (例えば、使用不可) も、このボタンに反映されます。
スピナーは数値フィールドか、または「時刻」コンポーネントを含む日付/時刻フィールド (例えば、hh:mm:ss) のいずれかに適用することができます。数値フィールドに適用した場合、スピン・ボタンは、バリデーター (ある場合) で指定された最大値または最小値に到達するまで、指定した増分で値を増加または減少させます。 時刻の値にスピナーが適用されると、スピン・ボタンは、バリデーター (ある場合) で指定された最大値または最小値に到達するまで、指定した増分で値を増加または減少させます。 また、「時刻スピナー」には、値の各コンポーネント (時間、分、秒) が、フィールド内のカーソルがある位置に応じて、独立して増加または減少できるように、追加の増分を指定することができます。 例えば、複数の増分が指定されている場合、カーソルがフィールドの時間コンポーネントにある場合、値は 1 時間単位で増加または減少することができ、カーソルがフィールドの分の部分にある場合は、1 回に 1 分、増加または減少することができます。
「スピン・ボタン」はクリックまたは押すことができます。 ボタンをクリックすると、値は 1 増分ずつ増加または減少します。 ボタンを押し続けると、ボタンを放すまで値が増加または減少します。
JSFSpinner では、タイプが「数値」である場合に NumberConverter が必要で、タイプが「日付/時刻」である場合は DateTimeConverter が必要です。 コンバーターは、入力フィールドの値 (ストリング) を JavaScript™ の数値オブジェクトまたは日付/時刻オブジェクトに変換する場合、またはその逆を行う場合に使用されます。コンバーターを構成してからスピナーを構成し、 コンバーターの ID をスピナーに渡す必要があります。 入力フィールドには、NumberValidator や NumberAssist コンポーネントが関連付けられる場合があります。バリデーターが入力フィールドに関連付けられている場合、これは (コンストラクターの属性として) JSFSpinner に渡される必要があります。スピナーの最小および最大の境界を構成するには、バリデーターを使用します。このため、バリデーターを指定することを強くお勧めします。 支援が入力フィールドに関連付けられている場合、JSFSpinner と関連付ける必要はありません。
<hx:inputText>
<input type="text">
スピナーの値は、入力フィールドの値として渡されます。 この値は、コンポーネントと関連付けられたコンバーターによって記述されるスタイルでフォーマット設定する必要があります。 最初にページに値が渡されない場合は、スピナーには初期値がありません。
型テキストの入力に関連付けられたすべての属性が サポートされています。
型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。
hX_5.addComponent("id", new hX_5.JSFSpinner(attributes)); 各部の意味は次のとおりです。
id |
コンポーネントが付加される HTML タグの ID。 |
属性 |
コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。 |
属性名 |
説明 |
---|---|
type |
スピナーのタイプ (数値スピナーまたは時刻スピナーのいずれか)。 |
converter |
構成済みのコンバーターの ID。 コンバーターは、入力フィールド内の値のフォーマットを記述します。 |
validator |
構成済みのバリデーターの ID。 バリデーターが提供されている場合、 そのバリデーターで記述された制約は、 ユーザーが選出できる値を制限するために使用されます。 |
increment |
スライダーの「目盛り」間の増加量。 例えば、最小値が 1 で最大値が 10 のスライダーの場合、 増加量を 1 にすると、 その目盛りは 1、2、3、4、5、6、7、8、9、10 となります。 スライダー内では、目盛りが付いた値のみを選択できます。 小数 (例えば .01) を値に取ることができます。 |
increment1 |
時刻の場合にのみ、 値内のカーソルの位置に応じて、 各時刻コンポーネント (時、分、秒) を 別々にスピンすることができます。 increment1 が指定されている場合、カーソルが 時刻コンポーネントの「時」の位置に あれば、increment が増加量になります。 カーソルが時刻コンポーネントの「分」 の位置 (increment2 が 指定されていない場合は、「秒」の位置) にある 場合は、increment1 が増加量になります。 .01 より大きい値にする必要があります。 増加量が複数指定されている場合は、 パターン内に「分」のコンポーネントが なくても increment2 を指定する必要がありますので、 注意してください (同様に increment も指定してください)。 |
increment2 |
時刻の場合にのみ、 値内のカーソルの位置に応じて、 各時刻コンポーネント (時、分、秒) を 別々にスピンすることができます。 increment1 が指定されている場合、 カーソルが時刻コンポーネントの「時」の位置に あれば、increment が増加量になります。 カーソルが時刻コンポーネントの「分」の位置に あれば、increment1 が増加量になります。 カーソルが時刻コンポーネントの「秒」の位置に あれば、increment2 が増加量になります。 例えば、increment=3600、increment1=60、increment2=1 と それぞれ指定し、形式を hh:mm:ss にしたとします。 この場合、カーソルが値の「時」の部分にあれば、 スピンによって値が 1 時間ずつ増加/減少します。 カーソルが値の「分」の部分にあれば、 スピンによって値が 1 分ずつ増加/減少します。 カーソルが値の「秒」の部分にあれば、 スピンによって値が 1 秒ずつ増加/減少します。 .001 より大きい値にする必要があります。 |
button-border |
入力フィールドに対するポップアップ・ボタンの表示方法を制御します。 |
button-color |
ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。 |
入力タグに適用されるクラスは入力フィールドをスタイル設定 (例えば、入力フィールドの境界線を設定) し、 さらに、その隣にあるスピン・ボタンをスタイル設定 (入力フィールドの境界線に一致するように設定) します。独立してスピン・ボタンのスタイルを設定する、別の CSS はありません。
API 呼び出し |
説明 |
---|---|
redraw() |
基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。 |
uirelease() |
コンポーネントに関連付けられたアクティブ UI をリリースします。 |
setValue(string) |
コンポーネントの値を設定し、提供された値が有効であることを確認します。 |
object = getValue(boolean) |
コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript の 日付/時刻オブジェクトとして、値が戻されます。 |
object = setAttribute(attribute) |
属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。 |
string = getAttribute(attribute-name) |
属性の現行値を取得します。 |
スピナーは完全にキーボードによるアクセスが可能です。 入力フィールドとスピン・ボタンはどちらも、タブ順序に組み込まれています。 入力フィールドでは、上下矢印キーを使用して、増分ごとに値を増加/減少させることができます。上下矢印キーを押すと、そのキーが放されるまで、増分ごとに値が「スピン」します。 ボタンにフォーカスがある場合、ボタンをタップすることで値が 1 回増加または減少します。 スペース・バーを押し続けると、スペース・バーを放すまで値が増加または減少します。
スピナーでは現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。これは早急に追加されます。
数値の形式がパーセントであるフィールドにスピナーを追加します。 スピナーが 0 から 100% の値を含むように制限し、増分を 1% に設定します。
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.JSFSpinner("increment:.01","converter:x1","validator:x1"));
フォーマットが時間フィールドを指定しているフィールドに、スピナーを追加します。 スピナーは、値の中のカーソル位置に依存するため、3 つの異なる増分を指定します。
hX.addConverter("x16", new hX.DateTimeConverter("strict:1", "format:h:mm:ss a")); hX.addComponent("form1:textTime3", new hX.JSFSpinner("type:datetime", "increment:3600", "increment1:60", "converter:x16"));