建立最適化表單欄位的自訂外觀 create-custom-appearances-for-adaptive-form-fields

建立專案：建立一個Maven專案，此專案會產生內容套件以部署在AEM上。

擴充現有的Widget類別：擴充現有的Widget類別並覆寫必要的類別。

建立使用者端資源庫：建立 clientLib: af.customwidget 程式庫並新增必要的JavaScript和CSS檔案。

建置及安裝專案：建立Maven專案，並在AEM上安裝產生的內容套件。

更新最適化表單：更新最適化表單欄位屬性以使用自訂外觀。

將協力廠商外掛程式相依性納入專案中。

1. 將協力廠商或自訂jQuery外掛程式放入 jqueryplugin/javascript 中的資料夾和相關CSS檔案 jqueryplugin/css 資料夾。 如需詳細資訊，請參閱 jqueryplugin/javascript and jqueryplugin/css 資料夾。

2. 修改 js.txt 和 css.txt 檔案，以包含jQuery外掛程式的任何其他JavaScript和CSS檔案。

將協力廠商外掛程式與框架整合，以啟用自訂外觀框架與jQuery外掛程式之間的互動。 只有在您擴充或覆寫下列功能後，新Widget才能運作。

更新中的JavaScript檔案 integration/javascript 資料夾（視需要）。

• 取代文字 __widgetName__ 與實際介面工具集名稱搭配使用。

• 從適當的現成可用Widget類別延伸Widget。 在大多數情況下，該物件是與要取代的現有Widget相對應的Widget類別。 父類別名稱用於多個位置，因此建議搜尋字串的所有例項 xfaWidget.textField 中，並將它們替換為使用的實際父類別。

• 擴充 render 方法以提供替代的UI。 這是叫用jQuery外掛程式以更新UI或互動行為的位置。 此 render 方法應傳回使用者控制元素。

• 擴充 getOptionsMap 覆寫任何由於Widget變更而受影響的選項設定的方法。 此函式會傳回對應，提供選項變更時執行動作的詳細資訊。 鍵是提供給Widget的選項，值是偵測到選項變更時呼叫的函式。

• 此 getEventMap 方法會將介面工具集觸發的事件與最適化表單模型所需的事件對應。 預設值對應預設Widget的標準HTML事件，如果觸發替代事件，則需要更新。

• 此 showDisplayValue 和 showValue 套用display與edit picture子句，而且可以覆寫為具有替代行為。

• 此 getCommitValue 當以下情況時，調適型表單框架會呼叫方法： commit事件發生。 一般而言，這是退出事件（除了在變更時發生的下拉式清單、選項按鈕和核取方塊元素以外）。 如需詳細資訊，請參閱 最適化Forms運算式.

• 範本檔案提供各種方法的範例實作。 移除不可擴充的方法。

執行以下命令，根據Maven原型建立本機專案：

mvn archetype:generate -DarchetypeRepository=https://repo1.maven.org/maven2/com/adobe/ -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. 按一下 完成.

   

選取要用於自訂外觀的Widget。 此範例使用下列數值步進器Widget：

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

在Eclipse專案中，檢閱中的外掛程式程式碼 plugin.js 檔案以確保其符合外觀要求。 在此範例中，外觀符合下列需求：

• 數值步進器應該從 - $.xfaWidget.numericInput.

• 此 set value widget的方法會在焦點位於欄位之後設定值。 這是最適化表單Widget的強制要求。

• 此 render 方法必須覆寫，才能叫用 bootstrapNumber 方法。

• 外掛程式除了主要原始程式碼外，沒有其他相依性。

• 範例不會在步進器上執行任何樣式，因此不需要額外的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 Package Manager安裝套件。

在您要套用自訂外觀的編輯模式中開啟最適化表單，然後執行下列動作：

1. 以滑鼠右鍵按一下要套用外觀的欄位，然後按一下 編輯 以開啟「編輯元件」對話方塊。

2. 在「樣式」標籤中，更新 CSS類別 要新增的屬性 widget_numericStepper.