建立最適化表單欄位的自訂外觀 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資料夾下的JS和CSS檔案。

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

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

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

• 以實際的Widget名稱取代文字__widgetName__。

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

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

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

• getEventMap方法將對應由Widget觸發的事件，以及最適化表單模型所需的事件。 預設值對應預設Widget的標準HTML事件，如果觸發替代事件，則需要更新。

• showDisplayValue與showValue套用顯示與編輯圖片子句，而且可以覆寫為有替代行為。

• commit事件發生時，最適化表單架構會呼叫getCommitValue方法。 一般而言，這是退出事件（除了在變更時發生的下拉式清單、選項按鈕和核取方塊元素以外）。 如需詳細資訊，請參閱最適化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. 選取​ 檔案>匯入>將現有專案匯入Workspace。

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延伸。

• Widget的set value方法會在焦點位於欄位之後設定值。 這是最適化表單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。