スライダーウィジェット (テーマ指定可能)
スライダーウィジェットにはスライダーエレメントが表示され、ユーザーはこれを使用してマッシュアップで数値を入力できます。範囲選択を有効にすると、ユーザーが最小値と最大値を指定できるようになります。
ウィジェットの構造
次の図は、スライダーウィジェットのさまざまな部分を示しています。
1. ウィジェットラベル
2. 値ラベル
3. ドラッグハンドル
4. スライダートラック
5. 最小値と最大値のラベル
 |
スライダーウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
範囲選択モードの有効化
ウィジェットの RangeSelection プロパティを有効にすることで、ユーザーがランタイムで値を範囲選択できるようになります。範囲選択が有効になっている場合、2 つのハンドルを使用して、スライダー上の値の範囲の開始と終了を示します。これらの値はウィジェットのプロパティ Value および EndValue を使用して指定できます。スライダーの値に対する変更に基づいてサービスを実行するには、ValueChanged および EndValueChanged イベントを、マッシュアップ内のほかのウィジェット、関数、またはデータサービスにバインドします。たとえば、ある工場の生産現場で利用可能なリソースに関する情報を取得するサービスのデータをフィルタする値の範囲を定義できます。
ステップモードの有効化
ウィジェットの Stepping Mode プロパティを true に設定することで、スライダートラックで増分ステップモードを有効にできます。スライダーに増分ステップを定義すると、トラックの値のスケールを把握しやすくなり、ハンドルを特定の値に簡単に配置できるようになります。次のいずれかの方法で、スライダーに増分を定義できます。
• トラックをいくつかの増分に分割するには、NumberOfSteps プロパティを使用します。
• ステップサイズを設定するには、StepSize プロパティを使用します。
たとえば、マッシュアップでデータの更新にかかる時間を設定するスライダーウィジェットに、5 分の増分を定義できます。ランタイムで、ハンドルはスライダートラックに定義されているステップに自動的にスナップします。
垂直モードの有効化
ウィジェットの VerticalSlider プロパティを true に設定することで、垂直モードを有効にできます。
編集可能な値の有効化
ウィジェットの EditableValue プロパティを true に設定することで、値編集モードを有効にできます。このコンフィギュレーションでは、ハンドルを動かすことなく値ラベルに値を入力できます。スライダーの値を変更するには、値ラベルをダブルクリックしてから、値を入力します。新しい値に基づいてハンドルの位置が自動的に変わります。
ウィジェットのスタイル設定
「スタイルプロパティ」パネルではスタイルプロパティを編集できます。さまざまな状態でのウィジェットの複数の部分の色、フォント、形状、サイズをカスタマイズできます。
• Slider カテゴリでは、背景、前景、バーの色を編集できます。
• Thumb カテゴリでは、スライダーのつまみ (ドラッグハンドル) のスタイルと色を編集できます。
• Min-Max Label カテゴリでは、最小/最大ラベルのフォントスタイルと色を編集できます。
• Track カテゴリでは、トラックの背景色を編集できます。
ウィジェットのプロパティ
スライダーウィジェットのプロパティを次の表に示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か(Y/N)
|
ローカライズ可能か(Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
label
|
スライダーのラベルに表示されるテキスト。
|
STRING
|
該当なし
|
Y
|
Y
|
||
|
labelAlignment
|
ウィジェットラベルを、「左」、「右」、または「中央」に整列します。
|
STRING
|
左
|
Y
|
N
|
||
|
LabelType
|
ラベルのタイプを、「ヘッダー」、「サブヘッダー」、「ラベル」、または「本文」に設定します。
|
STRING
|
ラベル
|
Y
|
N
|
||
|
Value
|
スライダーの値を設定またはバインドします。
|
NUMBER
|
該当なし
|
Y
|
N
|
||
|
CustomClass
|
ウィジェットの最上位の div に CSS を定義します。複数のクラスを入力する場合、各クラスをスペースで区切ります。
|
STRING
|
該当なし
|
Y
|
N
|
||
|
TabSequence
|
Tab キーを押したときにウィジェットがハイライトされるシーケンスを設定します。
|
NUMBER
|
該当なし
|
N
|
N
|
||
|
EndValue
|
範囲選択モードでの 2 つ目のハンドルのスライダーの値。
|
NUMBER
|
該当なし
|
Y
|
N
|
||
|
EndValueChanged
|
スライダーの終了値が変更されるとイベントがトリガーされます。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
Minimum
|
スライダーの最小値を設定します。
|
NUMBER
|
0
|
Y
|
N
|
||
|
Maximum
|
スライダーの最大値を設定します。
|
NUMBER
|
100
|
Y
|
N
|
||
|
SteppingMode
|
クリックごとに特定のステップ数でスライダーを移動します。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
StepSize
|
スライダーが移動する各ステップの値の変化を設定します。
|
NUMBER
|
該当なし
|
Y
|
N
|
||
|
NumberOfSteps
|
各クリックでスライダーが移動するステップ数を設定します。
|
NUMBER
|
該当なし
|
Y
|
N
|
||
|
ValuePrecision
|
スライダー値の小数点以下の桁数を設定します。
|
NUMBER
|
該当なし
|
N
|
N
|
||
|
DisplayValueLabel
|
スライダーの値ラベルの表示オプションを「はい」、「いいえ」、または「ドラッグ」に設定します。
|
STRING
|
はい
|
N
|
N
|
||
|
EditableValue
|
マッシュアップ内の値ラベルを編集することでハンドルを移動できます。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
DisplayMinMaxLabels
|
最小値および最大値のラベルを表示します。
|
BOOLEAN
|
True
|
N
|
N
|
||
|
HandleSize
|
ハンドルサイズをピクセルで設定します。
|
NUMBER
|
該当なし
|
N
|
N
|
||
|
TrackSize
|
トラックサイズをピクセルで設定します。
|
NUMBER
|
該当なし
|
N
|
N
|
||
|
TrackAlignment
|
スライダーの「中央」、「開始」、または「終了」に、トラックを整列します。
|
STRING
|
Center
|
N
|
N
|
||
|
FullTrack
|
ハンドルアイコンが完全に含まれるように、スライダートラックを伸ばします。
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
MinValueLabel
|
最小値のラベルを指定します。
|
STRING
|
MIN
|
Y
|
Y
|
||
|
MaxValueLabel
|
最大値のラベルを指定します。
|
STRING
|
MAX
|
Y
|
Y
|
||
|
HandleIcon
|
ハンドルアイコンの形状を「なし」、「円」、または「分割」として制御します。
|
STRING
|
円
|
N
|
N
|
||
|
SecondHandleIcon
|
2 つ目のハンドルアイコンのメディアエンティティとして「なし」、「円」、または「分割」を選択します。
|
STRING
|
円
|
N
|
N
|
||
|
MinSideIcon
|
最小側のアイコンを指定します。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
||
|
MinIconSize
|
最小値アイコンのサイズを制御します。オプション: 「小」、「中」、「大」、「特大」。
|
STRING
|
中
|
Y
|
N
|
||
|
MaxSideIcon
|
最大側のアイコンを選択します。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
||
|
MaxIconSize
|
最大値アイコンのサイズを制御します。オプション: 「小」、「中」、「大」、「特大」
|
STRING
|
該当なし
|
Y
|
N
|
||
|
RangeSelection
|
2 つ目のハンドルを追加してスライダーでの範囲選択を有効にします。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
VerticalSlider
|
スライダーの向きを垂直に変更します。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ReverseMinMaxValues
|
最小値および最大値の位置を反対にします。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ReverseLabelPosition
|
最小値および最大値のラベルの位置を反対にします。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
OverlapHandle
|
範囲選択が有効になっている場合に、2 つのスライダーハンドルの重なりを有効にします。
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ValueChanged
|
スライダーの値が変更されるとイベントがトリガーされます。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
Increment
|
スライダー値を増分するバインド可能なサービス。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
Decrement
|
スライダー値を減分するバインド可能なサービス。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
IncrementSecondHandle
|
範囲の選択モードが有効になっている場合に、2 つ目のハンドルの値を増分するバインド可能なサービス。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
DecrementSecondHandle
|
範囲の選択モードが有効になっている場合に、2 つ目のハンドルの値を減分するバインド可能なサービス。
|
該当なし
|
該当なし
|
Y
|
N
|
||
|
Disabled
|
マッシュアップ内のウィジェットを無効にします。ウィジェットは表示されたままになりますが、対話型ではありません。
|
BOOLEAN
|
False
|
Y
|
N
|
||
|
HandleTooltipField
|
スライダーハンドルにマウスポインタを合わせたときに、ツールヒントのテキストを表示します。
|
STRING
|
該当なし
|
Y
|
Y
|
||
|
HandleTooltipIcon
|
スライダーハンドルのツールヒントのアイコンイメージを設定します。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
||
|
SecondHandleTooltipField
|
スライダーの 2 つ目のハンドルにマウスポインタを合わせたときに、ツールヒントのテキストを表示します。
|
STRING
|
該当なし
|
Y
|
Y
|
||
|
SecondHandleTooltipIcon
|
スライダーの 2 つ目のハンドルのツールヒントのアイコンイメージを設定します。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
スライダーウィジェットのデータの検証
単一選択または範囲選択を使用している場合、検証プロパティを使用して最小値と最大値を設定できます。
デフォルトの失敗メッセージを設定するには、プロパティ MinValueFailureMessgae および MaxValueFailureMessgae を使用します。
共通の検証プロパティの詳細については、ウィジェットへの検証の適用を参照してください。
次の表に、「検証」パネルで使用可能な検証プロパティを示します。
|
プロパティ
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か (Y/N)
|
ローカライズ可能か (Y/N)
|
|---|---|---|---|---|---|
|
CriteriaMessage
|
検証に失敗したとき、および検証基準で表示されるメッセージ。
|
STRING
|
該当なし
|
Y
|
Y
|
|
CriteriaMessageDetails
|
検証基準および失敗のメッセージで表示される詳細。
|
STRING
|
該当なし
|
Y
|
Y
|
|
MaxValidValue
|
ユーザーが検証を設定可能なスライダーの最大値。
|
STRING
|
該当なし
|
Y
|
N
|
|
MaxValueFailureMessage
|
スライダーの値が有効な最大値より大きい場合に表示されるメッセージ。
|
NUMBER
|
${value} is the maximum value
|
Y
|
Y
|
|
MinValidValue
|
ユーザーが検証を設定可能なスライダーの最小値。
|
STRING
|
該当なし
|
Y
|
N
|
|
MinValueFailureMessgae
|
スライダーの値が有効な最小値より小さい場合に表示されるメッセージ。
|
NUMBER
|
${value} is the minimum value
|
Y
|
Y
|
|
ShowValidationCriteria
|
スライダーを編集しているときに、必須の入力に関するヒントメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationFailure
|
入力した値が検証に失敗したときに、失敗のメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationState
|
ユーザーがランタイムでウィジェットを操作する前に検証状態を表示するために使用できるバインド可能なサービス。デフォルトでは、検証状態はユーザー操作の後にのみ表示されます。
|
Service
|
該当なし
|
入力
|
N
|
|
ShowValidationSuccess
|
入力した値が正しく検証されたときに、成功のメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
SucessMessgae
|
値が有効である場合に表示されるメッセージ。
|
STRING
|
該当なし
|
Y
|
Y
|
|
SuccessMessageDetails
|
検証成功のメッセージに関する詳細情報を表示するセカンダリメッセージ。
|
STRING
|
該当なし
|
Y
|
Y
|
|
Validate
|
ウィジェットの値が変更されたときにトリガーされるバインド可能なイベント。このイベントをサービスまたは関数にバインドして、検証のパターンまたは定義式を適用します。
|
イベント
|
該当なし
|
Y
|
N
|
|
ValidationCriteriaIcon
|
検証基準のヒントメッセージ内に表示する SVG アイコンを選択します。
|
IMAGELINK
|
info
|
N
|
N
|
|
ValidationFailureIcon
|
検証に失敗した場合にステータスメッセージ内に表示する SVG アイコンを設定します。
|
IMAGELINK
|
error
|
N
|
N
|
|
ValidationOutput
|
ウィジェット検証の出力を取得します。戻り値は Undefined、Unvalidated、Valid、または Invalid です。
|
STRING
|
該当なし
|
Y
|
N
|
|
ValidationState
|
検証状態を設定するバインド可能なプロパティ。このプロパティは Undefined 、Unvalidated、Valid、Invalid に設定できます。
|
STRING
|
Undefined
|
Y
|
N
|
|
ValidationSuccessIcon
|
検証に成功した場合にステータスメッセージ内に表示する SVG アイコンを選択します。
|
IMAGELINK
|
success
|
N
|
N
|