アダプティブフォームフィールドのカスタム外観の作成 create-custom-appearances-for-adaptive-form-fields

プロジェクトを作成する：AEM でデプロイするコンテンツパッケージを生成する Maven プロジェクトを作成します。

既存の Widget クラスを拡張する：既存の Widget クラスを拡張して必要なクラスをオーバーライドします。

クライアントライブラリを作成する：clientLib: af.customwidget ライブラリを作成して、必要な JavaScript と CSS ファイルを追加します。

プロジェクトを構築してインストールする：Maven プロジェクトを構築して、生成したコンテンツパッケージをAEM にインストールします。

アダプティブフォームを更新する：アダプティブフォームフィールドのプロパティを更新して、カスタムアピアランスを使用します。

サードパーティのプラグインの依存関係をプロジェクトに含めます。

1. サードパーティまたはカスタムの jQuery プラグインを jqueryplugin/javascript フォルダーに入れ、関連する CSS ファイルを jqueryplugin/css フォルダーに入れます。詳しくは、jqueryplugin/javascript and jqueryplugin/css フォルダーの JS ファイルと CSS ファイルを参照してください。
2. js.txt および css.txt ファイルを変更して、jQuery プラグインの追加の JavaScript ファイルと CSS ファイルが含まれるようにします。

フレームワーク内でサードパーティのプラグインを統合して、カスタム外観のフレームワークと jQuery プラグインとのインタラクションを有効にします。新しいウィジェットは、次の関数を拡張またはオーバーライドした後にのみ機能するようになります。

必要に応じて integration/javascript フォルダーの JavaScript ファイルを更新します。

• テキスト __widgetName__ を実際のウィジェットの名前に置き換えます。
• 適切な標準のウィジェットクラスからウィジェットを拡張します。 ほとんどの場合、置き換えられる既存のウィジェットに対応するウィジェットクラスです。 親クラス名は複数の場所で使用されるため、ファイル内すべての文字列 xfaWidget.textField のインスタンスを検索して、実際使用する親クラスで置き換えることを推奨します。
• render メソッドを拡張して代替の UI を設定します。その場所から jQuery プラグインが起動し、UI またはインタラクション動作を更新します。render メソッドは、ユーザーコントロール要素を返します。
• getOptionsMap メソッドを拡張して、ウィジェット内の変更により影響を受けるオプション設定をオーバーライドします。この機能は、オプションの変更時に実行すべきアクションの詳細を提供するマッピングを返します。キーはウィジェットに提供されるオプションです。値はそのオプションの変更が検出されたときに毎回呼び出される関数です。
• getEventMap メソッドは、そのウィジェットによりトリガーされるイベントを、アダプティブフォームモデルが必要とするイベントとあわせてマッピングします。デフォルト値ではデフォルトのウィジェットの標準 HTML イベントがマッピングされ、代替のイベントがトリガーされる場合は更新の必要があります。
• showDisplayValue および showValue は、表示値を適用し、パターン形式文字列を編集します。また、別の動作にオーバーライドすることができます。
• getCommitValue メソッドは commit イベント発生時にアダプティブフォームのフレームワークにより呼び出されます。一般に、これは exit イベントです（変更時に発生するドロップダウン、ラジオボタンおよびチェックボックス要素を除く）。 詳しくは、 アダプティブForms式.
• テンプレートファイルは、様々なメソッドの実装例を提供します。 拡張しないメソッドを削除します。

次のコマンドを実行して、Maven アーキタイプに基づくローカルプロジェクトを作成します。

mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4

ここでは、次のパラメーターの値の指定が求められます。

このサンプルで使用される値は、太字でハイライト表示されています。

Define value for property 'groupId': com.adobe.afwidgets

Define value for property 'artifactId': customWidgets

Define value for property 'version': 1.0.1-SNAPSHOT

Define value for property 'package': com.adobe.afwidgets

Define value for property 'artifactName': customWidgets

Define value for property 'packageGroup': adobe/customWidgets

Define value for property 'widgetName': numericStepper

customWidgets （artifactID プロパティで指定された値）ディレクトリに移動して、次のコマンドを実行し Eclipse プロジェクトを生成します。

mvn eclipse:eclipse

Eclipse ツールを開き、以下の手順を実行して Eclipse プロジェクトをインポートします。

1. ファイル／取り込み／既存プロジェクトをワークスペースへ ​を選択します。

2. 参照して、archetype:generate コマンドを実行したフォルダを選択します。

3. 「Finish」をクリックします。

   

カスタム外観に使用するウィジェットを選択します。 この例では、次の数値ステッパーウィジェットを使用しています。

https://www.jqueryscript.net/form/User-Friendly-Number-Input-Spinner-with-jQuery-Bootstrap.html

Eclipse プロジェクトでは、plugin.js ファイルのプラグインコードを見直して、外観の要件を満たすようにします。このサンプルでは、外観は以下の要件を満たしています。

• 数値ステッパーが - $.xfaWidget.numericInput から拡張します。
• フィールドにフォーカスすると、ウィジェットの set value メソッドが値を設定します。これは、アダプティブフォームウィジェットでは必須要件です。
• bootstrapNumber メソッドを起動するには、render メソッドをオーバーライドする必要があります。
• プラグインのメインソースコード以外のプラグインに対する追加の依存関係はありません。
• このサンプルはステッパーでスタイルを実行しないので、追加の CSS は必要ありません。
• $userControl オブジェクトは、render メソッドで使用可能です。これは、text タイプのフィールドであり、プラグインコードで複製されます。
• フィールドが無効の場合に「+」および「-」ボタンが無効になります。

bootstrap-number-input.js（jQuery プラグイン）のコンテンツを numericStepper-plugin.js ファイルのコンテンツに置き換えます。

numericStepper-widget.js ファイルで、以下のコードを追加して、プラグインを起動するレンダリングメソッドをオーバーライドし、$userControl オブジェクトを返します。

render : function() {
     var control = $.xfaWidget.numericInput.prototype.render.apply(this, arguments);
     var $control = $(control);
     var controlObject;
     try{
         if($control){
         $control.bootstrapNumber();
         var id = $control.attr("id");
         controlObject = $("#"+id);
         }
     }catch (exc){
          console.log(exc);
     }
     return controlObject;
}

numericStepper-widget.js ファイルで、getOptionsMap プロパティをオーバーライドしてアクセスオプションを上書きし、無効モードで「+」および 「-」ボタンを非表示にします。

getOptionsMap: function(){
    var parentOptionsMap = $.xfaWidget.numericInput.prototype.getOptionsMap.apply(this,arguments),

    newMap = $.extend({},parentOptionsMap,

     {

           "access": function(val) {
           switch(val) {
              case "open" :
                this.$userControl.removeAttr("readOnly");
                this.$userControl.removeAttr("aria-readonly");
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
              case "nonInteractive" :
              case "protected" :
                this.$userControl.attr("disabled", "disabled");
                this.$userControl.attr("aria-disabled", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
             case "readOnly" :
                this.$userControl.attr("readOnly", "readOnly");
                this.$userControl.attr("aria-readonly", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
            default :
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
          }
       },
   });
   return newMap;
 }

変更を保存し、pom.xml ファイルを含むフォルダーに移動したら、次の Maven コマンドを実行してプロジェクトを構築します。

mvn clean install

AEM パッケージマネージャーを使ってパッケージをインストールします。

カスタム外観を適用するアダプティブフォームを編集モードで開き、次の手順を実行します。

1. カスタム外観を適用するフィールドを右クリックしてから、「編集」をクリックしてコンポーネントを編集ダイアログを開きます。

2. 「スタイル設定」タブで、CSS クラス プロパティを更新して widget_numericStepper を追加します。