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

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

この記事は jQuery と jQuery ウィジェットの知識が十分ある開発者向けです。外観フレームワークについての理解を深めたり、開発者がフォームフィールドに別の外観を作成するのに役立ちます。

外観フレームワークは、ユーザーのフォームとのやり取りを取得したり、モデル変更に対応してエンドユーザーに通知したりするため、さまざまなオプション、イベント(トリガー)、機能に依存しています。さらに、次の点に注意してください。

  • フレームワークは、フィールドの外観のための一連のオプションを提供します。これらのオプションはキーと値のペアであり、一般的なオプションとフィールドタイプ固有のオプションの 2 つのカテゴリに分かれます。
  • 外観はコントラクトの一部として、enter や exit などの一連の インベントのセットをトリガーします。
  • 一連の関数を実装するには、外観が必要となります。その関数には一般的なものから、フィールドタイプ固有のものも含まれています。

一般的なオプション

次にあるのはグローバルオプションのセットです。これらのオプションはすべてのフィールドで使用できます。

プロパティ 説明
name スクリプト式でこのオブジェクトまたはイベントを指定するために使用される識別子です。例えば、このプロパティはホストアプリケーションの名前を指定します。
value フィールドの実際の値。
displayValue フィールドのこの値が表示されます。
screenReaderText スクリーンリーダーはこの値を使用して、フィールドについての情報を読み上げます。フォームには値が提供され、値を上書きできます。
tabIndex フォームのタブシーケンスにおけるフィールドの位置フォームのデフォルトのタブ順序を変更する場合にのみ、tabIndexを上書きします。
role 要素のロール、たとえば、見出しやテーブル。
height ウィジェットの高さ。高さはピクセルで指定されます。
ウィジェットの幅。高さはピクセルで指定されます。
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)

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

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

Function 説明
focus : function() フォーカスをフィールドに移します。
click : function() フォーカスをフィールドに移し、XFA_CLICK_イベントを呼び出します。

markError:function(errorMessage, errorType)

errorMessage:エラー
errorType:を表す文字列文字列("warning"/"error")

注意:HTML5 フォームにのみ適用可能です。

エラーメッセージとエラータイプをウィジェットに送信します。ウィジェットはエラーを表示します。

clearError: function()

注意:HTML5 フォームにのみ適用可能です。

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

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

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

TextEdit: Text Field

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

limitLengthToVisibleArea

注意:HTML5 フォームにのみ適用可能です

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

ChoiceList: DropDownList, ListBox

オプション 説明

選択された値の配列。
アイテム
オプションとして表示されるオブジェクトの配列。各オブジェクトには 2 つのプロパティがあります。
save:保存する値、display:表示される値。

編集可能な状態で

注意:HTML5 フォームにのみ適用可能です。

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

API

関数 説明

addItem: function(itemValues)
itemValues:displayとsaveの値を含むオブジェクト
{sDisplayVal:<displayValue>, sSaveVal:<値を保存>}

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


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

NumericEdit: NumericField, DecimalField

オプション 説明
dataType フィールドのデータタイプ(整数/十進数)を示す文字列。
leadDigits 十進数で許可される小数点以上の最大桁数。
fracDigits 十進数で許可される小数点以下の最大桁数。
zero フィールドのロケールでのゼロの文字列表現。
decimal フィールドのロケールでの小数点の文字列表現。

CheckButton: RadioButton, CheckBox

オプション 説明
values

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

これは、checkButton のさまざまなステートのための値の配列です。 values[0] はステートがオンのときの値です。values[1] はステートがオフのときの値です。
values[2] はステートが中間のときの値です。 値配列の長さは、state オプションの値と同じです。

states

許可される状態の数。

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

state

要素の現在の状態です。

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

DateTimeEdit: (DateField)

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

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now