HTML5 フォームのカスタム外観の作成

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

defaultとcustomのwidgetFigureの例:
defaultとcustomのウィジェットの例

HTML5 Forms でのカスタムウィジェットの統合

プロファイルの作成 

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

ウィジェットを作成します

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

関数 / クラス 説明
render レンダリング関数は、ウィジェットのデフォルト HTML 要素のための jQuery オブジェクトを返します。デフォルトの HTML 要素は、フォーカス可能タイプとします。例えば、<a>、<input>、<li> などです。返された要素は $userControl として使用されます。$userControlが上記の制約を指定する場合、AbstractWidgetクラスの関数は期待どおりに動作します。それ以外の場合は、一部の一般的なAPI(フォーカス、クリック)に変更が必要です。
getEventMap HTML イベントを XFA イベントに変換するマップを返します。
{
blur:XFA_EXIT_EVENT,
}
この例は、ぼかしが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 スクリプティングエンジンでのカスタムウィジェットの登録

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

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

widgetConfigObject

ウィジェット設定は JSON オブジェクトとして提供(キーと値のペアのコレクション)されます。キーはフィールドを識別し、値はそれらのフィールドとともに使用するフィールドを示します。サンプル設定には次のようなものがあります。

*{*

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

ここで、「identifier」は、特定のフィールド、特定のタイプの一連のフィールド、またはすべてのフィールドを表すjQuery CSSセレクターです。 次に、様々なケースでの識別子の値を示します。

識別子のタイプ 識別子 説明
fieldname の名前を持つ特定のフィールド 識別子:"div.fieldname" 「fieldname」の名前を持つすべてのフィールドはウィジェットの使用によりレンダリングされます。
型'type'のすべてのフィールド(typeはNumericField、DateFieldなど): 識別子:"div.type" TimefieldとDateTimeFieldの場合、タイプはtextfieldです。これらのフィールドはサポートされていません。
すべてのフィールド 識別子:"div.field"

このページ