Aangepaste weergaven maken voor adaptieve formuliervelden create-custom-appearances-for-adaptive-form-fields

creeer een project: Creeer een Gemaakt project dat een inhoudspakket produceert om op AEM op te stellen.

breid een bestaande widgetklasse uit: breid een bestaande widgetklasse uit en treedt de vereiste klassen met voeten.

creeer een cliëntbibliotheek: Creeer a clientLib: af.customwidget bibliotheek en voeg de vereiste JavaScript en CSS dossiers toe.

bouwt en installeert het project: Bouw het Gemaakt project en installeer het geproduceerde inhoudspakket op AEM.

werk de adaptieve vorm bij: Werk de adaptieve eigenschappen van het vormgebied bij om de douaneverschijning te gebruiken.

Neem de afhankelijkheid van de externe plug-in van het project op.

1. Plaats de externe of aangepaste jQuery-plug-ins in de map jqueryplugin/javascript en de bijbehorende CSS-bestanden in de map jqueryplugin/css . Zie de JS- en CSS-bestanden in de map jqueryplugin/javascript and jqueryplugin/css voor meer informatie.

2. Wijzig de js.txt - en css.txt -bestanden om eventuele extra JavaScript- en CSS-bestanden van de jQuery-insteekmodule op te nemen.

Integreer de externe insteekmodule met het framework om interactie mogelijk te maken tussen het aangepaste weergaveframework en de jQuery-insteekmodule. De nieuwe widget werkt alleen nadat u de volgende functies hebt uitgebreid of genegeerd.

Werk het JavaScript-bestand naar wens bij in de map integration/javascript .

• Vervang de tekst __widgetName__ door de werkelijke naam van de widget.

• Breid de widget uit van een geschikte buitenste widgetklasse. In de meeste gevallen is dit de klasse widget die overeenkomt met de bestaande widget die wordt vervangen. De naam van de bovenliggende klasse wordt op meerdere locaties gebruikt. Het wordt daarom aanbevolen naar alle instanties van de tekenreeks xfaWidget.textField in het bestand te zoeken en deze te vervangen door de werkelijk gebruikte bovenliggende klasse.

• Breid de render methode uit om een afwisselende UI te verstrekken. Dit is de locatie vanwaar de jQuery-insteekmodule wordt aangeroepen om de gebruikersinterface of het interactiegedrag bij te werken. De methode render moet een element met gebruikersbesturing retourneren.

• Breid de methode getOptionsMap uit om opties te overschrijven die worden beïnvloed door een wijziging in de widget. De functie retourneert een toewijzing die details bevat voor de actie die moet worden uitgevoerd bij wijziging van een optie. De sleutels zijn de opties die aan widget worden verstrekt en de waarden zijn de functies die worden geroepen wanneer een verandering in de optie wordt ontdekt.

• De methode getEventMap wijst gebeurtenissen toe die door de widget worden geactiveerd, met de gebeurtenissen die door het adaptieve formuliermodel worden vereist. De standaardwaarde wijst standaard HTML-gebeurtenissen voor de standaardwidget toe en moet worden bijgewerkt als een alternatieve gebeurtenis wordt geactiveerd.

• De showDisplayValue en showValue passen de weergave- en bewerkingsafbeeldingsvoorwaarde toe en kunnen worden overschreven voor een ander gedrag.

• De getCommitValue methode wordt geroepen door het adaptieve vormenkader wanneer de commit gebeurtenis voorkomt. Over het algemeen is dit de afsluitgebeurtenis, behalve voor de vervolgkeuzelijst, het keuzerondje en de selectievakjes (waar deze voorkomt bij wijziging). Voor meer informatie, zie ​ Aangepaste Uitdrukkingen van Forms ​.

• Het sjabloonbestand biedt voorbeeldimplementatie voor verschillende methoden. Verwijder methoden die niet moeten worden uitgebreid.

Voer het volgende bevel uit om een lokaal project tot stand te brengen dat op Maven archetype wordt gebaseerd:

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

U wordt gevraagd waarden op te geven voor de volgende parameters.
de waarden die in deze steekproef worden gebruikt worden benadrukt in vette letters.

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

Navigeer naar de map customWidgets (opgegeven waarde voor de eigenschap artifactID ) en voer de volgende opdracht uit om een Eclipse-project te genereren:

mvn eclipse:eclipse

Open het gereedschap Eclipse en voer de volgende handelingen uit om het Eclipse-project te importeren:

1. Selecteer File > Import > Existing Projects into Workspace .

2. Blader naar de map waarin u de opdracht archetype:generate hebt uitgevoerd en selecteer deze.

3. Klik op Finish.

   

Selecteer de widget die voor de aangepaste weergave moet worden gebruikt. In dit voorbeeld wordt de volgende numerieke stepper-widget gebruikt:

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

Controleer in het Eclipse-project de insteekcode in het plugin.js -bestand om te controleren of deze voldoet aan de vereisten voor de weergave. In dit voorbeeld voldoet de weergave aan de volgende vereisten:

• De numerieke stapfunctie moet worden uitgebreid vanaf - $.xfaWidget.numericInput .

• De methode set value van de widget stelt de waarde in nadat de focus zich op het veld bevindt. Dit is een verplichte vereiste voor een adaptieve formulierwidget.

• De methode render moet worden overschreven om de methode bootstrapNumber aan te roepen.

• Er is geen andere afhankelijkheid van de plug-in dan de hoofdbroncode van de plug-in.

• In het voorbeeld wordt geen stijl toegepast op de stapfunctie. Er is dus geen extra CSS vereist.

• Het object $userControl moet beschikbaar zijn voor de methode render . Dit is een veld van het type text dat is gekloond met de insteekmodulecode.

• De knoppen + en - moeten worden uitgeschakeld wanneer het veld wordt uitgeschakeld.

Vervang de inhoud van de plug-in bootstrap-number-input.js (jQuery) door de inhoud van het bestand numericStepper-plugin.js .

Voeg in het numericStepper-widget.js -bestand de volgende code toe om de rendermethode te overschrijven om de insteekmodule aan te roepen en het $userControl -object te retourneren:

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

Overschrijf in het bestand numericStepper-widget.js de eigenschap getOptionsMap om de toegangsoptie te overschrijven en verberg de knoppen + en - in de uitgeschakelde modus.

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

Sla de wijzigingen op, navigeer naar de map met het pom.xml -bestand en voer de volgende Maven-opdracht uit om het project te maken:

mvn clean install

Installeer het pakket met AEM Package Manager.

Open het adaptieve formulier in de bewerkingsmodus waarop u de aangepaste weergave wilt toepassen en voer de volgende handelingen uit:

1. Klik met de rechtermuisknop op het veld waarop u de weergave wilt toepassen en klik op Edit om het dialoogvenster Component bewerken te openen.

2. Werk op het tabblad Stijl de eigenschap CSS class bij om widget_numericStepper toe te voegen.