アダプティブフォームおよび HTML5 フォームの外観フレームワーク appearance-framework-for-adaptive-and-html-forms

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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

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

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

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

共通オプション common-options

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

プロパティ
説明
name
スクリプト式でこのオブジェクトまたはイベントを指定するために使用される識別子です。例えば、このプロパティはホストアプリケーションの名前を指定します。
value
フィールドの実際の値。
displayValue
フィールドのこの値が表示されます。
screenReaderText
画面Readerは、この値を使用して、フィールドに関する情報を読み上げます。 フォームは値を提供し、その値を上書きできます。
tabIndex
フォームのタブシーケンスにおけるフィールドの位置フォームのデフォルトタブの順序を変更する場合にのみ、tabIndex を上書きします。
役割
要素の役割(見出し、表など)。
高さ
ウィジェットの高さ。 ピクセル単位で指定します。
width
ウィジェットの幅。 ピクセル単位で指定します。
access
サブフォームなど、コンテナオブジェクトのコンテンツにアクセスするために使用されるコントロールです。
paraStyles
ウィジェットへの XFA 要素の para プロパティ。
dir
テキストの方向。 指定できる値は、ltr(左から右)と rtl(右から左)です。

これらのオプション以外にも、フレームワークには、フィールドのタイプに応じて異なる他のオプションがいくつか用意されています。 各フィールド固有のオプションの詳細を以下に示します。

フォームフレームワークとのやり取り interaction-with-forms-framework

フォームフレームワークとやり取りするには、ウィジェットがいくつかのトリガーを設定し、フォームスクリプトの動作を有効にします。 ウィジェットがこれらのイベントをスローしない場合、そのフィールド用にフォームで記述された一部のスクリプトは機能しません。

ウィジェットでトリガーされたイベント events-triggered-by-widget

イベント
説明
XFA_ENTER_EVENT
このイベントは、フィールドがフォーカスされたときにトリガーされます。 これにより、「Enter」スクリプトをフィールドに対して実行できます。 イベントをトリガーする構文は次のとおりです。
(ウィジェット)を使用します。_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 apis-implemented-by-widget

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

Function
説明
フォーカス:function()
フィールドにフォーカスを置きます。
クリック:function()
フォーカスをフィールドに移し、XFA_CLICK_EVENT を呼び出します。

markError:function(errorMessage, errorType)

erorrMessage: string representing the error
errorType: string (“warning”/”error”)

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

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

clearError:function()

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

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

フィールドのタイプに固有のオプション options-specific-to-type-of-field

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

テキスト編集:テキストフィールド textedit-text-field

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

limitLengthToVisibleArea

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

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

選択リスト:DropDownList、ListBox choicelist-dropdownlist-listbox

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

編集可能な状態で

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

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

API api

Function
説明
addItem: function(itemValues)
itemValues:display と save の値が含まれているオブジェクト
{sDisplayVal: <displayValue>, sSaveVal: <save Value>}
アイテムをリストに追加します。
deleteItem : function(nIndex)
nIndex:リストから削除する項目のインデックス
リストからオプションを削除します。
clearItems: function()
リストからすべてのオプションをクリアします。

数値編集:NumericField, DecimalField numericedit-numericfield-decimalfield

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

チェックボタン:ラジオボタン、チェックボックス checkbutton-radiobutton-checkbox

オプション
説明

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

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

状態

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

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

state

要素の現在の状態。

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

DateTimeEdit:(DateField) datetimeedit-datefield

オプション
説明
そのフィールドのローカライズされた日数。
そのフィールドのローカライズされた月の名前。
ゼロ
数値 0 のローカライズされたテキスト。
clearText
クリアボタンのローカライズされたテキスト。
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da