アダプティブフォームおよび HTML5 フォームの外観フレームワーク

最終更新日: 2023-12-07

フォーム(アダプティブフォームと HTML5 フォーム)は、jQueryBackbone.jsおよびUnderscore.jsライブラリを外観とスクリプト作成のために使用します。このフォームはまた、フォーム内のすべての対話操作要素(例えばフィールドやボタン)に対して jQuery UI Widgets​アーキテクチャを使用します。このアーキテクチャにより、フォーム開発者は、Formsで使用可能な jQuery ウィジェットとプラグインの豊富なセットを使用できます。 また、ユーザーから leadDigits/trailDigits 制限やパターン形式文字列の実装などのデータを取得しながら、フォーム固有のロジックを実装することもできます。 フォーム開発者は、カスタムの外観を作成して使用することで、データ取得の操作性を向上させ、より使いやすくすることができます。

この記事は、jQuery ウィジェットと jQuery ウィジェットに関する十分な知識を持つ開発者向けです。 外観フレームワークに関する洞察を提供し、開発者がフォームフィールドの別の外観を作成できるようにします。

外観フレームワークは、様々なオプション、イベント (トリガー)、および関数に基づいて、フォームとのユーザーのやり取りをキャプチャし、モデルの変更に応じてエンドユーザーに通知します。 さらに、次の点に注意してください。

  • フレームワークは、フィールドの外観に関する一連のオプションを提供します。 これらのオプションはキーと値のペアで、共通のオプションとフィールドタイプ固有のオプションの 2 つに分かれています。
  • 外観は、契約の一部として、enter や exit などの一連のトリガーを設定します。
  • 一連の関数を実装するには、外観が必要です。 一般的な関数と、フィールドタイプの関数に固有の関数があります。

共通オプション

次に、グローバルオプションの設定を示します。 これらのオプションは、すべてのフィールドで使用できます。

プロパティ 説明
name スクリプト式でこのオブジェクトまたはイベントを指定するために使用される識別子です。例えば、このプロパティはホストアプリケーションの名前を指定します。
value フィールドの実際の値。
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)

ウィジェットで実装された API

外観フレームワークは、カスタムウィジェットに実装されているウィジェットの関数を呼び出します。 ウィジェットは次の関数を実装する必要があります。

Function 説明
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 の場合のみ有効です。

フィールドのエラーが修正された場合に呼び出されます。 ウィジェットはエラーを非表示にします。

フィールドのタイプに固有のオプション

すべてのカスタムウィジェットは上記の仕様に準拠する必要があります。異なるフィールドの機能を使用するには、ウィジェットはその特定のフィールドのガイドラインに準拠する必要があります。

テキスト編集:テキストフィールド

オプション 説明
multiline フィールドが改行文字の入力をサポートする場合は true、サポートしない場合は false です。
maxChars フィールドに入力できる最大文字数。

limitLengthToVisibleArea

注意:Applicable forms forms のHTML5

テキストの幅がウィジェットの幅を超えた場合のテキストフィールドの動作を指定します。

ChoiceList: DropDownList, ListBox

オプション 説明
value
選択した値の配列。
item
オプションとして表示するオブジェクトの配列。 各オブジェクトには、次の 2 つのプロパティが含まれます。
save:保存する値、display:表示する値。

編集可能な状態で

注意:Applicable forms はHTML5 の場合のみ有効です。

値が true の場合、ウィジェットでカスタムテキストの入力が有効になります。
displayValue
表示する値の配列。
multiselect
複数の選択が許可される場合は true、許可されない場合は false です。

API

Function 説明

addItem: function(itemValues)
itemValues:display と save の値が含まれているオブジェクト
{sDisplayVal: <displayValue>, sSaveVal: <save Value>}

アイテムをリストに追加します。
deleteItem: function(nIndex)
nIndex:リストから削除する項目のインデックス


リストからオプションを削除します。
clearItems: function() リストからすべてのオプションをクリアします。

NumericEdit: NumericField, DecimalField

オプション 説明
dataType フィールドのデータタイプを表す文字列(整数/小数)。
leadDigits 10 進数で許可される最大先頭桁数。
fracDigits 10 進数で許可される最大分数桁数。
ゼロ フィールドのロケールでの 0 の文字列表現。
decimal フィールドのロケールでの小数の文字列表現。

CheckButton: RadioButton, CheckBox

オプション 説明

値の配列(オン/オフ/中立)。

これは、checkButton のさまざまなステートのための値の配列です。values[0] は状態がオンの場合の値、 values[1] は状態がオフの場合の値です。
values[2] は、状態が NEUTRAL の場合の値です。 値の配列の長さは、状態オプションの値と等しくなります。

states

許可されている状態の数。

アダプティブフォームの場合は 2 つ(オン、オフ)、HTML5 フォームの場合は 3 つ(オン、オフ、中間)です。

state

要素の現在の状態。

アダプティブフォームの場合は 2 つ(オン、オフ)、HTML5 フォームの場合は 3 つ(オン、オフ、中間)です。

DateTimeEdit: (DateField)

オプション 説明
そのフィールドのローカライズされた日数。
そのフィールドのローカライズされた月の名前。
ゼロ 数値 0 のローカライズされたテキスト。
clearText クリアボタンのローカライズされたテキスト。

このページ