フォーム(アダプティブフォームと HTML5 フォーム)は、jQuery、Backbone.jsおよびUnderscore.jsライブラリを外観とスクリプト作成のために使用します。このフォームはまた、フォーム内のすべての対話操作要素(例えばフィールドやボタン)に対して jQuery UI Widgetsアーキテクチャを使用します。このアーキテクチャはフォーム開発者が、フォームで豊富な使用可能な jQuery ウィジェットとプラグインのセットを利用できるようにします。また、ユーザーから leadDigits/trailDigits の制限やパターン形式文字列の実装などのデータを取得しながら、フォーム固有のロジックを実装することもできます。フォーム開発者はカスタム外観を作成して使用し、データ取得の体験を改善し、よりユーザーフレンドリーにすることができます。
この記事は jQuery と jQuery ウィジェットの知識が十分ある開発者向けです。外観フレームワークについての理解を深めたり、開発者がフォームフィールドに別の外観を作成するのに役立ちます。
外観フレームワークは、ユーザーのフォームとのやり取りを取得したり、モデル変更に対応してエンドユーザーに通知したりするため、さまざまなオプション、イベント(トリガー)、機能に依存しています。さらに、次の点に注意してください。
次にあるのはグローバルオプションのセットです。これらのオプションはすべてのフィールドで使用できます。
プロパティ | 説明 |
---|---|
name | スクリプト式でこのオブジェクトまたはイベントを指定するために使用される識別子です。例えば、このプロパティはホストアプリケーションの名前を指定します。 |
value | フィールドの実際の値。 |
displayValue | フィールドのこの値が表示されます。 |
screenReaderText | スクリーンリーダーはこの値を使用して、フィールドについての情報を読み上げます。フォームは値を提供し、その値を上書きできます。 |
tabIndex | フォームのタブシーケンスにおけるフィールドの位置フォームのデフォルトタブの順序を変更する場合にのみ、tabIndex を上書きします。 |
role | 要素のロール、たとえば、見出しやテーブル。 |
height | ウィジェットの高さ。高さはピクセルで指定されます。 |
width | ウィジェットの幅。高さはピクセルで指定されます。 |
access | サブフォームなど、コンテナオブジェクトのコンテンツにアクセスするために使用されるコントロール。 |
paraStyles | ウィジェットへの XFA 要素のパラプロパティ。 |
dir | テキストの方向。可能な値は ltr (左から右)と rtl (右から左)です。 |
これらのオプションとは別に、フィールドのタイプによって異なるいくつかの他のオプションがフレームワークによって提供されます。フィールド固有のオプションの詳細は、以下に記載されています。
Forms のフレームワークとやりとりするために、ウィジェットはいくつかのイベントをトリガーし、フォームスクリプトが機能するように有効化します。ウィジェットがこれらのイベントをスローしない場合、そのフィールドのためにフォーム内に書かれたスクリプトの一部が機能していません。
イベント | 説明 |
---|---|
XFA_ENTER_EVENT | このイベントはフィールドがフォーカスされるたびにトリガーされます。フィールドで「入力」スクリプトの実行を可能にします。イベントをトリガーするための構文は (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT) |
XFA_EXIT_EVENT | このイベントはフィールドを離れるたびにトリガーされます。エンジンがフィールドの値を設定し、その「終了」スクリプトを実行することを可能にします。イベントをトリガーするための構文は (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT) |
XFA_CHANGE_EVENT | このイベントがトリガーされ、エンジンがフィールドに書かれた「変更」スクリプトを実行することが可能になります。イベントをトリガーするための構文は (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT) |
XFA_CLICK_EVENT | このイベントはフィールドがクリックされるたびにトリガーされます。エンジンがフィールドに書かれた「クリック」スクリプトを実行することが可能になります。イベントをトリガーするための構文は (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT) |
外観フレームワークはカスタムウィジェットで実装されたウィジェットの関数をいくつか呼び出します。ウィジェットは次の関数を実装する必要があります。
Function | 説明 |
---|---|
focus : function() | フォーカスをフィールドに移します。 |
click : function() | フォーカスをフィールドに移し、XFA_CLICK_EVENT を呼び出します。 |
markError:function(errorMessage, errorType) 注意:HTML5 フォームにのみ適用可能です。 |
エラーメッセージとエラータイプをウィジェットに送信します。ウィジェットはエラーを表示します。 |
clearError: function() 注意:HTML5 フォームにのみ適用可能です。 |
フィールドのエラーが修正された場合に呼び出されます。ウィジェットはエラーを非表示にします。 |
すべてのカスタムウィジェットは上記の仕様に準拠する必要があります。異なるフィールドの機能を使用するには、ウィジェットはその特定のフィールドのガイドラインに準拠する必要があります。
オプション | 説明 |
---|---|
multiline | フィールドが改行文字の入力をサポートする場合 true。 |
maxChars | フィールドに入力できる最大文字数。 |
limitLengthToVisibleArea 注意:HTML5 フォームにのみ適用可能です |
テキストのウィジェットがウィジェットの幅を超えたときの、テキストフィールドの動作を指定します。 |
オプション | 説明 |
---|---|
value |
選択された値の配列。 |
item |
オプションとして表示されるオブジェクトの配列。各オブジェクトには 2 つのプロパティがあります。 save:保存する値、display:表示される値。 |
編集可能な状態で 注意:HTML5 フォームにのみ適用可能です。 |
値が true の場合、ウィジェットでカスタムテキスト入力が有効。 |
displayValue |
表示される値の配列。 |
multiselect |
複数の選択が許可される場合は true。許可されない場合は false。 |
Function | 説明 |
---|---|
addItem: function(itemValues) |
アイテムをリストに追加します。 |
deleteItem: function(nIndex) nIndex:リストから削除する項目のインデックス |
リストからオプションを削除します。 |
clearItems: function() |
リストからすべてのオプションを消去します。 |
オプション | 説明 |
---|---|
dataType | フィールドのデータタイプ(整数/十進数)を示す文字列。 |
leadDigits | 十進数で許可される小数点以上の最大桁数。 |
fracDigits | 十進数で許可される小数点以下の最大桁数。 |
zero | フィールドのロケールでのゼロの文字列表現。 |
decimal | フィールドのロケールでの小数点の文字列表現。 |
オプション | 説明 |
---|---|
values | 値の配列(オン/オフ/中間)。 これは、checkButton のさまざまなステートのための値の配列です。 values[0] はステートがオンのときの値です。values[1] はステートがオフのときの値です。 |
states | 許可される状態の数。 アダプティブフォームの場合は 2 つ(オン、オフ)、HTML5 フォームの場合は 3 つ(オン、オフ、中間)です。 |
state | 要素の現在の状態です。 アダプティブフォームの場合は 2 つ(オン、オフ)、HTML5 フォームの場合は 3 つ(オン、オフ、中間)です。 |
オプション | 説明 |
---|---|
日 | そのフィールドのローカライズされた曜日の名前。 |
months | そのフィールドのローカライズされた月の名前。 |
zero | 数字の 0 のローカライズされたテキスト。 |
clearText | 「クリア」ボタンのローカライズされたテキスト。 |