ドキュメントAEM 6.4Forms ガイド

HTML5 フォームのカスタム外観の作成 create-custom-appearances-in-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

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

カスタムウィジェットを Mobile Formsにプラグインできます。 既存の jQuery ウィジェットを拡張したり、外観フレームワークを使用して独自のカスタムウィジェットを開発したりできます。 XFA エンジンは様々なウィジェットを使用します。詳しくは、アダプティブフォームおよび HTML5 フォームの外観フレームワークを参照してください。

デフォルトおよびカスタムウェジェットの例
図： デフォルトとカスタムウィジェットの例

カスタムウィジェットとHTML5 フォームの統合 integrating-custom-widgets-with-html-forms

プロファイルの作成  create-a-profile-nbsp

プロファイルを作成するか、既存のプロファイルを選択してカスタムウィジェットを追加することができます。 プロファイルの作成について詳しくは、 カスタムプロファイルの作成.

ウィジェットの作成 create-a-widget

HTML5 Forms には、新しいウィジェットを作成するために拡張可能なウィジェットフレームワークの実装が提供されています。実装は jQuery ウィジェットです。 abstractWidget 新しいウィジェットを書くために拡張できます。 新しいウィジェットは、以下に示す関数を拡張または上書きすることによってのみ、機能させることができます。

関数/クラス
説明
render
レンダリング関数は、ウィジェットのデフォルトのHTML要素の jQuery オブジェクトを返します。 デフォルトのHTML要素は、フォーカス可能なタイプである必要があります。 例： <a>, <input>、および <li>. 返された要素は、 $userControl として使用されます。 $userControl は上記の制約を指定し、次に AbstractWidget クラスの関数が期待通りに機能します。そうでない場合、一部の一般的な API（フォーカス、クリック）は変更を必要とします。
getEventMap
HTML イベントを XFA イベントに変換するマップを返します。
{
blur: XFA_EXIT_EVENT,
}
この例は、blur が HTML イベントであり、XFA_EXIT_EVENT が対応する XFA イベントであることを示しています。
getOptionsMap
オプションの変更時に実行するアクションの詳細を示すマップを返します。 キーはウィジェットに提供されるオプションです。値はそのオプションの変更が検出されたときに毎回呼び出される関数です。ウィジェットは、すべての一般的なオプション（value と displayValue を除く）のハンドラーを提供します
getCommitValue
ウィジェットフレームワークは、ウィジェットの値が XFAModel に保存されるたびに（例えば、textField の exit イベント時に）関数を読み込みます。 実装は、ウィジェットに保存された値を返す必要があります。ハンドラーには、オプションの新しい値が与えられます。
showValue
デフォルトでは、XFA では enter イベント時に、フィールドの rawValue が表示されます。 この関数は、rawValue をユーザーに表示するために呼び出されます。
showDisplayValue
デフォルトでは、XFA の exit イベントでは、フィールドの formattedValue が表示されます。 この関数は、formattedValue をユーザーに表示するために呼び出されます。

独自のウィジェットを作成するには、上記で作成されたプロファイルに、上書きされた関数と新しく追加された関数を含む JavaScript ファイルの参照を含めます。例えば、sliderNumericFieldWidget は数値フィールドのためのウィジェットです。ヘッダーセクションのプロファイルでウィジェットを使用するには、次の行を含めます。

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

カスタムウィジェットを XFA スクリプティングエンジンに登録  register-custom-widget-with-xfa-scripting-engine-nbsp

カスタムウィジェットのコードが準備されたら、Form Bridge の registerConfig API を使用して、スクリプトエンジンにウィジェットを登録します。widgetConfigObject を入力として受け取ります。

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject widgetconfigobject

ウィジェットの設定は JSON オブジェクト（キーと値のペアのコレクション）として提供されます。キーはフィールドを識別し、値はこれらのフィールドで使用するウィジェットを表します。 設定例を次に示します。

*{*

*“identifier1” : “customwidgetname”,
“identifier2” : “customwidgetname2”,
..
}*

ここで「identifier」は、特定のフィールド、特定のタイプの一連のフィールド、またはすべてのフィールドを現す jQuery CSS セレクターです。以下には、さまざまなケースでの識別子の値が記載されています。

識別子のタイプ
識別子
説明
fieldname という名前の特定のフィールド
識別子："div.fieldname"
「fieldname」という名前のフィールドはすべて、ウィジェットを使用してレンダリングされます。
「type」タイプのすべてのフィールド（ここで type は NumericField、DateField などです。）：
識別子："div.type"
Timefield と DateTimeField の場合、これらのフィールドはまだサポートされていないため、タイプは textfield です。
すべてのフィールド
識別子：「div.field」
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da