Last update: Thu Dec 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
フォーム（アダプティブフォームと HTML5 フォーム）は、jQuery、Backbone.jsおよびUnderscore.jsライブラリを外観とスクリプト作成のために使用します。このフォームはまた、フォーム内のすべての対話操作要素（例えばフィールドやボタン）に対して jQuery UI Widgets アーキテクチャを使用します。このアーキテクチャにより、フォーム開発者は、Formsで使用可能な jQuery ウィジェットとプラグインの豊富なセットを使用できます。 また、ユーザーから leadDigits/trailDigits 制限やパターン形式文字列の実装などのデータを取得しながら、フォーム固有のロジックを実装することもできます。 フォーム開発者は、カスタムの外観を作成して使用することで、データ取得の操作性を向上させ、より使いやすくすることができます。
この記事は、jQuery ウィジェットと jQuery ウィジェットに関する十分な知識を持つ開発者向けです。 外観フレームワークに関する洞察を提供し、開発者がフォームフィールドの別の外観を作成できるようにします。
外観フレームワークは、様々なオプション、イベント (トリガー)、および関数に基づいて、フォームとのユーザーのやり取りをキャプチャし、モデルの変更に応じてエンドユーザーに通知します。 さらに、次の点に注意してください。
- フレームワークは、フィールドの外観に関する一連のオプションを提供します。 これらのオプションはキーと値のペアで、共通のオプションとフィールドタイプ固有のオプションの 2 つに分かれています。
- 外観は、契約の一部として、enter や exit などの一連のトリガーを設定します。
- 一連の関数を実装するには、外観が必要です。 一般的な関数と、フィールドタイプの関数に固有の関数があります。
共通オプション common-options
次に、グローバルオプションの設定を示します。 これらのオプションは、すべてのフィールドで使用できます。
name
スクリプト式でこのオブジェクトまたはイベントを指定するために使用される識別子です。例えば、このプロパティはホストアプリケーションの名前を指定します。
displayValue
フィールドのこの値が表示されます。
screenReaderText
画面Readerは、この値を使用して、フィールドに関する情報を読み上げます。 フォームは値を提供し、その値を上書きできます。
tabIndex
フォームのタブシーケンスにおけるフィールドの位置フォームのデフォルトタブの順序を変更する場合にのみ、tabIndex を上書きします。
height
ウィジェットの高さ。 ピクセル単位で指定します。
width
ウィジェットの幅。 ピクセル単位で指定します。
access
サブフォームなど、コンテナオブジェクトのコンテンツにアクセスするために使用されるコントロールです。
paraStyles
ウィジェットへの XFA 要素の para プロパティ。
dir
テキストの方向。 指定できる値は、ltr（左から右）と rtl（右から左）です。
これらのオプション以外にも、フレームワークには、フィールドのタイプに応じて異なる他のオプションがいくつか用意されています。 各フィールド固有のオプションの詳細を以下に示します。
フォームフレームワークとやり取りするには、ウィジェットがいくつかのトリガーを設定し、フォームスクリプトの動作を有効にします。 ウィジェットがこれらのイベントをスローしない場合、そのフィールド用にフォームで記述された一部のスクリプトは機能しません。
XFA_ENTER_EVENT
このイベントは、フィールドがフォーカスされたときにトリガーされます。 フィールドで「入力」スクリプトの実行を可能にします。イベントをトリガーする構文は次のとおりです。
（ウィジェット）を使用します。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT
このイベントは、ユーザーがフィールドを離れるたびにトリガーされます。 エンジンがフィールドの値を設定し、その「終了」スクリプトを実行することを可能にします。イベントをトリガーする構文は次のとおりです。
（ウィジェット）を使用します。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT
このイベントがトリガーされ、エンジンがフィールドに書かれた「変更」スクリプトを実行することが可能になります。イベントをトリガーする構文は次のとおりです。
（ウィジェット）を使用します。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT
このイベントは、フィールドがクリックされるたびにトリガーされます。 エンジンがフィールドに書かれた「クリック」スクリプトを実行することが可能になります。イベントをトリガーする構文は次のとおりです。
（ウィジェット）を使用します。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)
外観フレームワークは、カスタムウィジェットに実装されているウィジェットの関数を呼び出します。 ウィジェットは次の関数を実装する必要があります。
focus: function()
フィールドにフォーカスを置きます。
click: function()
フォーカスをフィールドに移し、XFA_CLICK_EVENT を呼び出します。
markError:function(errorMessage, errorType)
errorMessage: string representing the error
errorType: string ("warning"/"error")
注意:Applicable forms はHTML5 の場合のみ有効です。
エラーメッセージとエラータイプをウィジェットに送信します。 ウィジェットにエラーが表示されます。
clearError: function()
注意:Applicable forms はHTML5 の場合のみ有効です。
フィールドのエラーが修正された場合に呼び出されます。 ウィジェットはエラーを非表示にします。
フィールドのタイプに固有のオプション options-specific-to-type-of-field
すべてのカスタムウィジェットは上記の仕様に準拠する必要があります。異なるフィールドの機能を使用するには、ウィジェットはその特定のフィールドのガイドラインに準拠する必要があります。
テキスト編集：テキストフィールド textedit-text-field
multiline
フィールドが改行文字の入力をサポートする場合は true、サポートしない場合は false です。
maxChars
フィールドに入力できる最大文字数。
limitLengthToVisibleArea
注意:Applicable forms forms のHTML5
テキストの幅がウィジェットの幅を超えた場合のテキストフィールドの動作を指定します。
ChoiceList: DropDownList, ListBox choicelist-dropdownlist-listbox
item
オプションとして表示するオブジェクトの配列。 各オブジェクトには、次の 2 つのプロパティが含まれます。
save：保存する値、display：表示する値。
編集可能な状態で
注意:Applicable forms はHTML5 の場合のみ有効です。
値が true の場合、ウィジェットでカスタムテキストの入力が有効になります。
multiselect
複数の選択が許可される場合は true、許可されない場合は false です。
API api
addItem: function(itemValues)
itemValues：display と save の値が含まれているオブジェクト
{sDisplayVal: <displayValue>, sSaveVal: <save Value>}
アイテムをリストに追加します。
deleteItem : function(nIndex)
nIndex：リストから削除する項目のインデックス
リストからオプションを削除します。
clearItems: function()
リストからすべてのオプションをクリアします。
NumericEdit: NumericField, DecimalField numericedit-numericfield-decimalfield
dataType
フィールドのデータタイプを表す文字列（整数/小数）。
leadDigits
10 進数で許可される最大先頭桁数。
fracDigits
10 進数で許可される最大分数桁数。
ゼロ
フィールドのロケールでの 0 の文字列表現。
decimal
フィールドのロケールでの小数の文字列表現。
値
値の配列（オン/オフ/中立）。
これは、checkButton のさまざまなステートのための値の配列です。values[0] は状態がオンの場合の値、 values[1] は状態がオフの場合の値です。
values[2] は、状態が NEUTRAL の場合の値です。 値の配列の長さは、状態オプションの値と等しくなります。
states
許可されている状態の数。
アダプティブフォームの場合は 2 つ（オン、オフ）、HTML5 フォームの場合は 3 つ（オン、オフ、中間）です。
state
要素の現在の状態。
アダプティブフォームの場合は 2 つ（オン、オフ）、HTML5 フォームの場合は 3 つ（オン、オフ、中間）です。
DateTimeEdit: (DateField) datetimeedit-datefield
clearText
クリアボタンのローカライズされたテキスト。