Erstellen von benutzerdefinierten Erscheinungsbildern für adaptive Formularfelder create-custom-appearances-for-adaptive-form-fields

Projekt erstellen: Erstellen Sie ein Maven-Projekt, das ein Inhaltspaket generiert, das in AEM bereitgestellt wird.

Vorhandene Widget-Klasse erweitern: Erweitern Sie eine vorhandene Widget-Klasse und überschreiben Sie die erforderlichen Klassen.

Client-Bibliothek erstellen: Erstellen Sie eine clientLib: af.customwidget-Bibliothek und fügen Sie die erforderlichen JavaScript- und CSS-Dateien hinzu.

Projekt erstellen und installieren: Erstellen Sie das Maven-Projekt und installieren Sie den generierten Inhalt in AEM.

Adaptives Formular aktualisieren: Aktualisieren Sie die Eigenschaften adaptiver Formularfelder zur Nutzung des benutzerdefinierten Erscheinungsbilds.

Schließen Sie die Abhängigkeit vom Plug-in des Drittanbieters in das Projekt ein.

1. Platzieren Sie die Fremdanbieter- oder benutzerdefinierten jQuery-Plug-ins im Ordner jqueryplugin/javascript und zugehörige CSS-Dateien im Ordner jqueryplugin/css. Weitere Informationen finden Sie in den JS- und CSS-Dateien im Ordner jqueryplugin/javascript and jqueryplugin/css.

2. Ändern Sie die Dateien js.txt und css.txt, um jede zusätzliche JavaScript- und CSS-Datei des jQuery-Plugins einzuschließen.

Integrieren Sie das Drittanbieter-Plug-In mit dem Framework, um die Interaktion zwischen dem benutzerdefinierten Framework des Erscheinungsbilds und dem jQuery-Plugin zu aktivieren. Das neue Widget funktioniert erst, wenn Sie die folgenden Funktionen erweitern oder überschreiben.

Aktualisieren Sie bei Bedarf die JavaScript-Datei im Ordner integration/javascript.

• Ersetzen Sie den Text __widgetName__ durch den tatsächlichen Widget-Namen.

• Erweitern Sie das Widget aus einer geeigneten vorkonfigurierten Widget-Klasse.  In den meisten Fällen handelt es sich dabei um die Widget-Klasse, die mit dem vorhandenen Widget übereinstimmt, das ersetzt wird.  Der Name der übergeordneten Klasse wird an mehreren Standorten verwendet, daher wird empfohlen, nach allen Instanzen der Zeichenfolge xfaWidget.textField in der Datei zu suchen und sie durch die eigentliche übergeordnete Klasse zu ersetzen, die verwendet wird.

• Erweitern Sie die Methode render, um eine alternative UI bereitzustellen. Das ist der Standort, von dem aus das jQuery-Plugin aufgerufen wird, um die UI oder das Interaktionsverhalten zu aktualisieren. Die Methode render sollte ein Benutzersteuerelement zurückgeben.

• Erweitern Sie die Methode getOptionsMap, um alle Optionseinstellungen zu überschreiben, die durch Änderungen am Widget beeinflusst wurden. Die Funktion gibt eine Zuordnung zurück, die Informationen bereitstellt, damit die Aktion nach Änderung einer Option durchgeführt werden kann. Die Schlüssel sind die Optionen des Widgets und die Werte sind die Funktionen, die aufgerufen werden, sobald eine Änderung in dieser Option erkannt wird.

• Die Methode getEventMap ordnet durch das Widget ausgelöste Ereignisse den Ereignissen zu, die durch das adaptive Formularmodell benötigt werden. Der Standardwert ordnet Standard-HTML-Ereignisse für das Standard-Widget zu. Es muss aktualisiert werden, falls ein alternatives Widget ausgelöst wird.

• showDisplayValue und showValue wenden die Display- und Edit-Picture-Klausel an und können überschrieben werden, um ein alternatives Verhalten zu erzielen.

• Die Methode getCommitValue wird durch das Framework für adaptive Formulare aufgerufen, wenn das Ereignis commit auftritt. (Im Allgemeinen handelt es sich um das exit-Ereignis, mit Ausnahme der Elemente Dropdown-Liste, Optionsfeld und Kontrollkästchen, wenn es bei einer Änderung auftritt.)  Weitere Informationen finden Sie unter Adaptive Formularausdrücke.

• Die Vorlagendatei bietet eine Beispielimplementierung für verschiedene Methoden.  Entfernen Sie Methoden, die nicht erweitert werden sollen.

Führen Sie den folgenden Befehl aus, um ein lokales Projekt basierend auf dem Maven-Archetyp zu erstellen:

mvn archetype:generate -DarchetypeRepository=https://repo1.maven.org/maven2/com/adobe/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4

Es fordert Sie auf, Werte für die folgenden Parameter anzugeben.
Die in diesem Beispiel verwendeten Werte werden fett markiert.

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

Navigieren Sie zum Verzeichnis customWidgets (angegebener Wert für die Eigenschaft artifactID) und führen Sie den folgenden Befehl durch, um ein Eclipse-Projekt zu generieren:

mvn eclipse:eclipse

Öffnen Sie das Eclipse-Tool und führen Sie zum Importieren des Eclipse-Projekts die folgenden Schritte durch:

1. Wählen Sie Datei > Importieren > Vorhandene Projekte in den Arbeitsbereich.

2. Suchen Sie den Ordner aus, in dem Sie den Befehl archetype:generate durchgeführt haben.

3. Klicken Sie auf Beenden.

   

Wählen Sie das Widget aus, das für das benutzerdefinierte Erscheinungsbild verwendet werden soll.  In diesem Beispiel wird das Widget für numerische Schritte verwendet:

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

Überprüfen Sie im Eclipse-Projekt die Datei plugin.js, um sicherzustellen, dass sie mit den Anforderungen für das Erscheinungsbild übereinstimmt. In diesem Beispiel erfüllt das Erscheinungsbild die folgenden Anforderungen:

• Die numerischen Schritte sollten über - $.xfaWidget.numericInput erweitert werden.

• Die Methode set value des Widgets legt den Wert fest, nachdem der Fokus auf das Feld festgelegt wurde. Es ist eine obligatorische Anforderung für das Widget eines adaptiven Formulars.

• Die Methode render muss überschrieben werden, um die Methode bootstrapNumber aufzurufen.

• Mit Ausnahme des Haupt-Quell-Codes gibt es für das Plug-in keine zusätzliche Abhängigkeit.

• In dem Beispiel werden keine Stile auf die Schritte angewendet, daher ist kein zusätzliches CSS erforderlich.

• Das $userControl-Objekt sollte in der render-Methode verfügbar sein. Es ist ein Feld vom Typ text, das mit dem Plugin-Typ geklont wird.

• Die Schaltflächen + und - sollten deaktiviert werden, wenn das Feld deaktiviert wird.

Ersetzen Sie den Inhalt des bootstrap-number-input.js (jQuery-Plugin) mit dem Inhalt der numericStepper-plugin.js-Datei.

Fügen Sie in der Datei numericStepper-widget.js den folgenden Code hinzu, um die Render-Methode zum Aufrufen des Plug-ins und Zurückgeben des $userControl-Objekts zu überschreiben:

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;
}

Überschreiben Sie in der Datei numericStepper-widget.js die Eigenschaft getOptionsMap, um die Zugriffsoption zu überschreiben, und blenden Sie die Schaltflächen „+“ und „-“ im deaktivierten Modus aus.

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;
 }

Speichern Sie die Änderungen, navigieren Sie zum Ordner mit der Datei pom.xml und führen Sie folgenden Maven-Befehl aus, um das Projekt zu erstellen:

mvn clean install

Installieren Sie das Paket mit dem AEM Package Manager.

Öffnen Sie das adaptive Formular im Bearbeitungsmodus, auf das Sie das benutzerdefinierte Erscheinungsbild anwenden möchten, und führen Sie die folgenden Schritte durch:

1. Klicken Sie mit der rechten Maustaste auf das Feld, auf das Sie das Erscheinungsbild anwenden möchten, und klicken Sie auf Bearbeiten, um das Dialogfeld „Komponente bearbeiten“ zu öffnen.

2. Aktualisieren Sie in der Registerkarte „Stile“ die Eigenschaft CSS-Klasse, um widget_numericStepper hinzuzufügen.