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

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

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

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

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

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

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

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

独自のウィジェットを作成するには、上記で作成されたプロファイルに、上書きされた関数と新しく追加された関数を含む 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 セレクターです。以下には、さまざまなケースでの識別子の値が記載されています。