DataV:テキストボックス

チャートスタイル

入力ボックスは、入力ボックスの背景色、テキストスタイル、枠線スタイル、キースタイルをさまざまな状態でカスタマイズできるウィジェットです。 ビジュアルアプリケーションの入力フォームとして使用して、処理のためにユーザー入力をバックエンドに送信できます。

設定パネル

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• 入力ボックススタイル

  • プレースホルダー: テキストボックスに表示するテキスト。 このパラメーターは [データ] タブでも設定できます。

    説明

    • [データ] タブから取得したプレースホルダーが優先されます。

    • このパラメーターの値は、[データ] タブのvalueフィールドがクリアされた後にのみ表示されます。

  • インデント: テキストボックス内のテキストのインデント。

  • 背景色: テキストボックスの背景色。 背景色を変更する方法の詳細については、「アイテムの説明の設定」のカラーピッカーの説明をご参照ください。

  • テキストスタイル: テキストボックス内のテキストのスタイル。

    パラメーター	説明
    カラー	テキストボックス内のテキストのフォント色。
    フォントスタイル	テキストボックス内のテキストのフォントスタイル。Normal、Italic、Obliqueに設定できます。 normalは、テキスト表示を通常のスタイルに設定します。 斜体は、テキストを斜めのスタイルで表示するように設定します。 斜体を斜めに表示できないテキストは、斜めスタイルに設定します。
    フォントの重み	テキストボックス内のテキストのフォントの太さ。
    フォント	テキストボックス内のテキストのフォントファミリ。 説明 オペレーティングシステムに既にインストールされているフォントを選択します。 フォントがインストールされていない場合、デフォルトのフォントが表示されます。
    フォントサイズ	テキストボックス内のテキストのフォントサイズ。

  • ボーダースタイル

    パラメーター	説明
    ボーダー幅	ピクセル単位の境界線の幅。
    ボーダーカラー	ボーダーの色。
    ボーダーフィレット	ボーダー半径。 値の範囲は0〜360です。 値が0の場合、正方形のテキストボックスが表示されます。 値が360の場合、丸いテキストボックスが表示されます。
    ラインタイプ	境界線タイプ。実線、破線、点線、二重実線、彫刻効果、エンボス効果、沈没効果、突出効果などです。

• キースタイル: 入力ボックスの右側にあるキーのスタイル。

  • Button Text: ボタンのテキスト。

  • ボタンの幅: ボタンの幅。

    重要

    ボタンの幅が小さすぎると、テキストを完全に表示できません。

  • 通常のスタイル

    • 背景色: ボタンの背景色。

    • ボーダースタイル

      パラメーター	説明
      ボーダー幅	ボタンの境界線の幅。
      ボーダーカラー	ボタンの境界線の色。
      ボーダーフィレット	ボタンの境界半径。 値の範囲は0〜360です。 値が0の場合、正方形のボタン枠が表示されます。 値が360の場合、丸いボタン枠が表示されます。
      ラインタイプ	ラインタイプ。Solid line、Dashed Line、Dotted Line、Double Solid Line、Carved Effect、Embossed Effect、Sunken Effect、Protrude Effectなどです。

    • テキストスタイル

      パラメーター	説明
      カラー	ボタン内のテキストのフォント色。
      フォントスタイル	ボタン内のテキストのフォントスタイル。
      フォントの重み	ボタン内のテキストのフォントの太さ。
      フォント	テキストボックス内のテキストのフォントファミリ。 説明 オペレーティングシステムに既にインストールされているフォントを選択します。 フォントがインストールされていない場合、デフォルトのフォントが表示されます。
      フォントサイズ	テキストボックス内のテキストのフォントサイズ。

  • クリック時のスタイル: ボタンをクリックしたときのテキストボックスの右側のボタンの表示スタイル。 詳細については、「通常のスタイル」をご参照ください。

  • マウスカーソルのスタイル: ボタンの上にポインターを移動したときのテキストボックスの右側にあるボタンの表示スタイル。 詳細については、「通常のスタイル」をご参照ください。

データパネル

value: テキストボックスに表示される内容。 このフィールドを設定すると、構成データはテキストボックススタイルのプレースホルダーを上書きします。 このフィールドは空にすることができます。 空の場合、プレースホルダーの値が表示されます。

相互作用パネル

on current value changeの右側にある [Enable] チェックボックスを選択し、On button clickedをクリックすると、ウィジェット操作が有効になります。 テキストボックスウィジェットは、テキストボックス内のコンテンツの変更、データ要求のトリガー、コールバック値の返却を可能にするインタラクション設定をサポートしています。 他のウィジェットのインタラクション設定を使用することもできます。 デフォルトでは、[データ] タブで設定されたvalue値が返されます。 詳細については、「ティッカーボードウィジェットのコールバックIDの設定」をご参照ください。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. ページの左上隅にあるアイコンをクリックします。

3. Blueprint Editorで、[追加ノード] ペインの [テキストボックス] ウィジェットをクリックします。 次の図に示すように、キャンバスの入力ボックスにパラメーターを表示できます。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     データインターフェイス要求が失敗した場合	データインターフェイス要求が失敗したときに返され (要求はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     現在の値が変化したとき	イベントは、現在の値が変化したときにデータ項目でトリガーされます。 データ項目は、変更された値に対応する。
     ボタンがクリックされたとき	イベントは、ボタンがクリックされるとデータ項目でトリガーされます。 データ項目は、クリックされたボタンに対応する。

   • ポリシーアクション

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     現在の入力ボックスの値を取得	現在のテキストボックスの値が取得されます。
     コンポーネントをデフォルト値にクリア	デフォルト値が復元されます。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットを表示します。 参照データの例を次に示します。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     非表示	次の例は、ウィジェットを非表示にする方法を示しています。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     暗黙の状態への切り替え	ウィジェットを表示するか非表示にするかを指定します。 参照データの例を次に示します。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     移動	ウィジェットを指定した場所に移動します。 参照データの例を次に示します。 return { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } };