テキスト領域ウィジェット
テキスト領域ウィジェットを使用することで、マッシュアップユーザーがマッシュアップに複数行のテキストを入力できるようになります。
 |
テキスト領域ウィジェットは、ThingWorx Platform 内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
デフォルトのウィジェットのサイズ
テキスト領域ウィジェットのサイズは、ThingWorx のバージョンによって異なります。
• ThingWorx 9.3.2 以降では、ウィジェットはデフォルトでレスポンシブです。これは、空のコンテナに追加すると、コンテナ内で使用可能なスペース全体に展開されます。
• 以前のバージョンの ThingWorx では、ウィジェットにはデフォルトの幅と高さがあり、これらはプロパティを使用して手動で調整できます。
ThingWorx 9.3.2 以降に移行すると、コンテナ内の 1 つのウィジェットとして表示されるテキスト領域ウィジェットがコンテナ内の使用可能なスペース全体に拡張されます。この変更は、マッシュアップのレイアウトに影響を与える可能性があります。レイアウトを更新するには、マッシュアップのレイアウトを調整してください。詳細については、以下のセクションを参照してください。
ThingWorx 9.3.1 以前でのウィジェットのサイズ
デフォルトでは、テキスト領域はデフォルトの幅と高さの寸法を使用して表示されます。幅は固定値に設定されています。高さは Autosize に設定されており、ウィジェットは縦方向に拡張されます。入力時、テキストが使用可能なスペースを超えると、ウィジェットは拡張され、MaxNumberOfCharacters プロパティで定義されている値に達するまで追加の文字を表示します。「レイアウト」パネルの整列オプションと配分オプションを使用して、追加のウィジェットを追加し、レイアウトを制御できます。次の図は、マッシュアップレイアウトのウィジェットを示しています。
レイアウトは次のように分割されています。
1. 4 つのウィジェット (1 つのラベル、2 つのテキストフィールド、1 つのテキスト領域) があるレスポンシブコンテナ。
2. 2 つのボタンがある固定されているコンテナ。
ウィジェットの幅は固定値に設定されています。高さは Autosize に設定されており、文字数が使用可能なスペースより多い場合、ウィジェットは縦方向に展開されます。Width および Height プロパティを使用して、ウィジェットのサイズを調整できます。省略記号が表示されます。
ThingWorx 9.3.2 以降でのウィジェットのサイズ
新規または既存のマッシュアップにウィジェットを追加するとき、そのコンテナのサイズに従ってそのデフォルトの寸法が設定されます。ウィジェットは、コンテナ内の使用可能なスペース全体に自動的に拡張されます。レイアウトを基準にしてウィジェットの寸法を調整するには、Layout パネルを使用してコンテナレイアウトを設定しなければなりません。コンテナでウィジェットが展開されているとき、Width および Height プロパティは「プロパティ」パネルにリストされません。テキスト領域コンテナにウィジェットを追加すると、以前のサイズが復元されます。次の図は、バージョン9.3.2 以降の ThingWorx プラットフォームのレスポンシブコンテナ内のウィジェットを示しています。
レイアウトは次のように分割されています。
1. 3 つのウィジェット (1 つのラベルウィジェットと 2 つのテキストフィールドウィジェット) がある高さの固定された静的コンテナ。アイテムの方向は「垂直」に設定されています。
2. 1 つのテキスト領域ウィジェットがあるレスポンシブコンテナ。
3. 2 つのボタンが表示される静的コンテナ。
別のコンテナを使用してウィジェットを表示することで、よりレスポンシブなレイアウトを作成できます。次のイメージは、マッシュアップに使用できるスペースが多い場合の前のフォームを示しています。テキスト領域はそのコンテナとともに拡張され、テキストフィールドは同じサイズのままです。
テキスト領域ウィジェットのサイズ変更
AllowResize プロパティを有効にすると、ユーザーがランタイムでテキスト領域ウィジェットのサイズを変更できるようになります。このプロパティが true に設定されている場合、ウィジェットのサイズが変更可能になり、ユーザーは入力領域をより詳細に制御できるようになります。
ウィジェットのサイズの変更方法を定義するには、ResizeDirection プロパティを使用します。水平方向、垂直方向、または両方向でのサイズ変更が可能です。デフォルト設定は「両方」で、テキスト領域の幅と高さを調整できます。これにより、特に長いテキストを入力または編集する必要がある場合に、ユーザビリティが向上します。
ウィジェットのプロパティ
テキスト領域ウィジェットのプロパティを以下に示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か(Y/N)
|
ローカライズ可能か(Y/N)
|
|---|---|---|---|---|---|
|
Text
|
テキスト領域に表示されるテキスト。
|
STRING
|
該当なし
|
Y
|
Y
|
|
Label
|
テキスト領域のラベルとして表示されるテキスト。
|
STRING
|
該当なし
|
Y
|
Y
|
|
Counter
|
テキスト領域に入力された文字数をカウントして表示します。
|
BOOLEAN
|
False
|
N
|
N
|
|
MaxNumberOfCharacters
|
テキスト領域内に入力可能な最大文字数を設定できます。
|
NUMBER
|
100
|
Y
|
N
|
|
HintText
|
このフィールドに何を入力すべきかを示すプレースホルダーテキストが表示されます。
|
STRING
|
該当なし
|
N
|
Y
|
|
Disabled
|
このプロパティを使用して、マッシュアップ内のウィジェットを無効にします。ウィジェットはマッシュアップ内に表示されますが、クリックできません。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ReadOnly
|
テキスト領域を読み取り専用として設定でき、その領域内のテキストをユーザーが編集できなくなります。
|
BOOLEAN
|
False
|
N
|
N
|
|
TextAlignment
|
テキストを左または右に整列できます。
|
STRING
|
Left
|
N
|
N
|
|
LabelAlignment
|
ラベルを左、右、または中央に整列できます。
|
STRING
|
Left
|
N
|
N
|
|
TabSequence
|
ユーザーが Tab キーを押したときにウィジェットがハイライトされる順序。
|
NUMBER
|
該当なし
|
N
|
N
|
|
CustomClass
|
ウィジェットの最上位の div に CSS を定義できます。スペースで区切って、複数のクラスを入力できます。
|
STRING
|
該当なし
|
Y
|
N
|
|
AllowResize
|
ユーザーがランタイムにテキスト領域のサイズを変更できるようにします。
|
BOOLEAN
|
False
|
N
|
N
|
|
ResizeDirection
|
テキスト領域のサイズ変更方向を制御します。水平方向、垂直方向、または両方向にサイズ変更できます。
|
STRING
|
「両方」
|
N
|
N
|
|
Changed
|
データが修正されたときにトリガーされるイベント。
|
該当なし
|
該当なし
|
Y
|
N
|
|
ResetToDefaultValue
|
このウィジェットの入力をそれぞれのデフォルト値にリセットします。
|
該当なし
|
該当なし
|
Y
|
N
|
|
Width
|
ウィジェットの幅。
ThingWorx 9.3.2 以降では、1 つ以上のウィジェットがあるコンテナにウィジェットを追加しないかぎり、このプロパティは非表示になっています。
|
NUMBER
|
273
|
N
|
N
|
|
Height
|
ウィジェットの高さ。デフォルトではこれは自動的に計算されます。高さを固定にするには、プロパティパネルで値を入力するか、キャンバスでウィジェットのサイズを変更します。ThingWorx 9.3.2 以降では、1 つ以上のウィジェットがあるコンテナにウィジェットを追加しないかぎり、このプロパティは非表示になっています。
|
NUMBER
|
自動サイズ調整
|
N
|
N
|
|
MinWidth
|
ThingWorx 9.3.2 以降でウィジェットがレスポンシブコンテナに追加されるときにウィジェットの最小幅を設定します。
|
NUMBER
|
該当なし
|
N
|
N
|
|
TextChanged
|
ウィジェットの値を更新した後でウィジェットの外側の領域をクリックしたときにトリガーされる、バインド可能なイベント。
|
該当なし
|
該当なし
|
Y
|
N
|
|
TooltipField
|
ウィジェットにカーソルを合わせたときに表示されるツールヒントテキストを設定します。
|
STRING
|
該当なし
|
Y
|
Y
|
|
TooltipIcon
|
ウィジェットのツールヒントのアイコンイメージを設定します。
イメージを追加したり、イメージの URL パスを指定したりできます。
|
メディアエンティティ
|
該当なし
|
N
|
N
|
ウィジェットのデータの検証
共通の検証プロパティに加えて、プロパティ MaxLength および MinLength を使用して、テキスト領域ウィジェット内の文字数を検証できます。
プロパティ MaxLengthFailureMessage および MinLengthFailureMessage を使用して、デフォルトの失敗メッセージをカスタマイズできます。パラメータ ${value} を使用して最大値と最小値がメッセージ内に表示されます。
共通の検証プロパティの使用の詳細については、ウィジェットへの検証の適用を参照してください。
次の表に、「検証」パネルで使用可能な検証プロパティを示します。
|
プロパティ
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か (Y/N)
|
ローカライズ可能か (Y/N)
|
|---|---|---|---|---|---|
|
CriteriaMessage
|
検証に失敗したとき、および検証基準で表示されるメッセージ。
|
STRING
|
該当なし
|
Y
|
Y
|
|
CriteriaMessageDetails
|
検証基準および失敗のメッセージで表示される詳細。
|
STRING
|
該当なし
|
Y
|
Y
|
|
MaxLength
|
テキスト領域値の最大長さ。
|
STRING
|
該当なし
|
Y
|
N
|
|
MaxLengthFailureMessage
|
現在の値が最大文字数を超えたときに表示されるメッセージ。
|
STRING
|
${value} characters is the maximum
|
Y
|
Y
|
|
MinLength
|
テキスト領域値の最小長さ。
|
STRING
|
該当なし
|
Y
|
N
|
|
MinLengthFailureMessage
|
現在の値が最小文字数より小さい場合に表示されるメッセージ。
|
STRING
|
${value} characters is the minimum
|
Y
|
Y
|
|
RequiredMessage
|
ValueRequired が true に設定されているときにアイテムが選択されていない場合に表示されるメッセージ。
|
STRING
|
値は必須です
|
Y
|
Y
|
|
ShowValidationCriteria
|
テキスト領域を編集しているときに、必須の入力に関するヒントメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationFailure
|
入力した値が検証に失敗したときに、失敗のメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowValidationState
|
ユーザーがランタイムでウィジェットを操作する前に検証状態を表示するために使用できるバインド可能なサービス。デフォルトでは、検証状態はユーザー操作の後にのみ表示されます。
|
サービス
|
該当なし
|
入力
|
N
|
|
ShowValidationSuccess
|
入力した値が正しく検証されたときに、成功のメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
SuccessMessage
|
検証に成功したときに表示されるメッセージ。
|
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
|
検証状態を設定するバインド可能なプロパティ。このプロパティは Unvalidated、Valid、Invalid、Undefined に設定できます。
|
STRING
|
Undefined
|
Y
|
N
|
|
ValidationSuccessIcon
|
検証に成功した場合にステータスメッセージ内に表示する SVG アイコンを選択します。
|
IMAGELINK
|
success
|
N
|
N
|
|
ValueRequired
|
リスト内のアイテムの選択は必須です。
|
BOOLEAN
|
False
|
Y
|
N
|