Aangepaste weergaven maken voor adaptieve formuliervelden
Gemaakt voor:
- User
Inleiding
Adaptieve formulieren maken gebruik van de weergaveframework om u te helpen aangepaste weergaven te maken voor adaptieve formuliervelden en een andere gebruikerservaring te bieden. Vervang bijvoorbeeld keuzerondjes en selectievakjes door schakelknoppen of gebruik aangepaste jQuery-plug-ins om gebruikersinvoer in velden zoals telefoonnummers of e-mailadressen te beperken.
In dit document wordt uitgelegd hoe u met een jQuery-insteekmodule deze alternatieve ervaringen voor adaptieve formuliervelden kunt maken. Daarnaast wordt een voorbeeld weergegeven voor het maken van een aangepaste weergave voor numerieke veldcomponenten die worden weergegeven als een numerieke stapfunctie of schuifregelaar.
Laten we eerst kijken naar de belangrijkste termen en concepten die in dit artikel worden gebruikt.
Weergave Verwijst naar de stijl, het uiterlijk en de organisatie van verschillende elementen van een adaptief formulierveld. Het omvat gewoonlijk een etiket, een interactief gebied om input, een hulppictogram, en korte en lange beschrijvingen van het gebied te verstrekken. De aanpassing van de weergave die in dit artikel wordt besproken, is van toepassing op de weergave van het invoergebied van het veld.
jQuery-insteekmodule Verstrekt een standaardmechanisme, dat op het kader van jQuery widget wordt gebaseerd, om een afwisselende verschijning uit te voeren.
ClientLib Een bibliotheeksysteem aan de clientzijde in AEM verwerking door complexe JavaScript- en CSS-code. Zie Client-Side Libraries gebruiken voor meer informatie.
Archetype Een Maven toolkit van de projectmalplaatje die als origineel patroon of model voor Geweven projecten wordt bepaald. Voor meer informatie, zie Inleiding aan Archetypes.
Gebruikerscontrole Verwijst naar het hoofdelement in een widget die de waarde van het veld bevat en door het weergaveframework wordt gebruikt om de aangepaste widget-interface te binden aan het aangepaste formuliermodel.
Stappen om een aangepaste weergave te maken
Op hoog niveau zijn de volgende stappen nodig om een aangepaste weergave te maken:
-
Een project maken: Creeer een Geweven project dat een inhoudspakket om op AEM produceert op te stellen.
-
Een bestaande widgetklasse uitbreiden: Een bestaande widgetklasse uitbreiden en de vereiste klassen overschrijven.
-
Een clientbibliotheek maken: Een
clientLib: af.customwidget
en voeg de vereiste JavaScript- en CSS-bestanden toe. -
Het project bouwen en installeren: Bouw het Maven project en installeer het geproduceerde inhoudspakket op AEM.
-
Het aangepaste formulier bijwerken: Pas de eigenschappen van formuliervelden aan om de aangepaste weergave te gebruiken.
Een project maken
Een bepaald archetype is een uitgangspunt voor het creëren van een douaneverschijning. De details van het te gebruiken archetype zijn als volgt:
- Bewaarplaats: https://repo.adobe.com/nexus/content/groups/public/
- Artefact-id: custom-appearance-archetype
- Groep-id: com.adobe.aemforms
- Versie: 1.0.4.
Voer het volgende bevel uit om een lokaal project tot stand te brengen dat op archetype wordt gebaseerd:
mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4
De opdracht downloadt de Maven-plug-ins en archetype-informatie van de opslagplaats en genereert een project op basis van de volgende informatie:
- groupId: Groep-id gebruikt door het gegenereerde Maven-project
- artifactId: Artefact-id die wordt gebruikt door het gegenereerde Maven-project.
- versie: Versie voor het gegenereerde Maven-project.
- package: Pakket gebruikt voor de bestandsstructuur.
- artifactName: Artefactnaam van het gegenereerde AEM.
- packageGroup: Pakketgroep van het gegenereerde AEM.
- widgetName: Weergavenaam die ter referentie wordt gebruikt.
Het gegenereerde project heeft de volgende structuur:
─<artifactId>
└───src
└───main
└───content
└───jcr_root
└───etc
└───clientlibs
└───custom
└───<widgetName>
├───common [client library - af.customwidgets which encapsulates below clientLibs]
├───integration [client library - af.customwidgets.<widgetName>_widget which contains template files for integrating a third-party plugin with Adaptive Forms]
│ ├───css
│ └───javascript
└───jqueryplugin [client library - af.customwidgets.<widgetName>_plugin which holds the third-party plugins and related dependencies]
├───css
└───javascript
Een bestaande widgetklasse uitbreiden
Zodra het projectmalplaatje wordt gecreeerd, doe de volgende veranderingen, zoals vereist:
-
Neem de afhankelijkheid van de externe plug-in van het project op.
- Plaats de externe of aangepaste jQuery-plug-ins in het dialoogvenster
jqueryplugin/javascript
map en verwante CSS-bestanden in dejqueryplugin/css
map. Zie de JS- en CSS-bestanden onder dejqueryplugin/javascript and jqueryplugin/css
map. - De
js.txt
encss.txt
bestanden die extra JavaScript- en CSS-bestanden van de jQuery-insteekmodule bevatten.
- Plaats de externe of aangepaste jQuery-plug-ins in het dialoogvenster
-
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.
render
<a>
, <input>
, en <li>
. Het geretourneerde element wordt gebruikt zoals $userControl
. Als de $userControl
geeft de bovenstaande beperking, de functies van de AbstractWidget
-klasse werkt zoals verwacht, anders moeten sommige gemeenschappelijke API's (focus, klikken) worden gewijzigd.getEventMap
{ blur: XFA_EXIT_EVENT, }
In dit voorbeeld wordt getoond dat
blur
is een HTML-gebeurtenis en XFA_EXIT_EVENT
is de overeenkomstige XFA-gebeurtenis.getOptionsMap
value
en displayValue
).getCommitValue
showValue
rawValue
van het veld wordt weergegeven. Deze functie wordt aangeroepen om de functie rawValue
aan de gebruiker.showDisplayValue
formattedValue
van het veld wordt weergegeven. Deze functie wordt aangeroepen om de functie formattedValue
aan de gebruiker.-
Het JavaScript-bestand in het dialoogvenster
integration/javascript
map, naar wens.- De tekst vervangen
__widgetName__
met de eigenlijke widgetnaam. - 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 te zoeken
xfaWidget.textField
in het bestand en deze vervangen door de werkelijk gebruikte bovenliggende klasse. - Breid uit
render
methode om een alternatieve UI te verstrekken. Dit is de locatie vanwaar de jQuery-insteekmodule wordt aangeroepen om de gebruikersinterface of het interactiegedrag bij te werken. Derender
de methode zou een user-control element moeten terugkeren. - Breid uit
getOptionsMap
methode 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
getEventMap
De methode wijst gebeurtenissen toe die door widget worden teweeggebracht, met de gebeurtenissen die door het adaptieve vormmodel worden vereist. De standaardwaarde wijst standaard HTML-gebeurtenissen voor de standaardwidget toe en moet worden bijgewerkt als een alternatieve gebeurtenis wordt geactiveerd. - De
showDisplayValue
enshowValue
pas de weergave- en bewerkingsafbeeldingsvoorwaarde toe en kan worden overschreven voor een ander gedrag. - De
getCommitValue
methode wordt aangeroepen door het raamwerk voor adaptieve formulieren wanneer decommit
gebeurtenis plaatsvindt. Over het algemeen is dit de afsluitgebeurtenis, behalve voor de vervolgkeuzelijst, het keuzerondje en de selectievakjes (waar deze voorkomt bij wijziging). Zie voor meer informatie Adaptieve Forms-expressies. - Het sjabloonbestand biedt voorbeeldimplementatie voor verschillende methoden. Verwijder methoden die niet moeten worden uitgebreid.
- De tekst vervangen
Een clientbibliotheek maken
Het voorbeeldproject dat door het Maven archetype wordt geproduceerd leidt automatisch tot vereiste cliëntbibliotheken, en verpakt hen in een cliëntbibliotheek met een categorie af.customwidgets
. De JavaScript- en CSS-bestanden die beschikbaar zijn in het dialoogvenster af.customwidgets
worden automatisch bij uitvoering opgenomen.
Samenstellen en installeren
Om het project te bouwen, voer het volgende bevel op shell uit om een pakket te produceren CRX dat op de AEM server moet worden geïnstalleerd.
mvn clean install
settings.xml
bestand.Het aangepaste formulier bijwerken
De aangepaste weergave toepassen op een adaptief formulierveld:
- Open het adaptieve formulier in de bewerkingsmodus.
- Open de Eigenschap voor het veld waarop u de aangepaste weergave wilt toepassen.
- In de Stijlen tabblad, werkt u de
CSS class
eigenschap om de weergavenaam toe te voegen in het dialoogvensterwidget_<widgetName>
gebruiken. Bijvoorbeeld: widget_numericstepper
Voorbeeld: Een aangepaste weergave maken
Bekijk nu een voorbeeld om een douaneverschijning voor een numeriek gebied tot stand te brengen om als numerieke stapper of schuif te verschijnen. Voer de volgende stappen uit:
-
Voer het volgende bevel uit om een lokaal project tot stand te brengen dat op Maven archetype wordt gebaseerd:
mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4
U wordt gevraagd waarden op te geven voor de volgende parameters.
De in dit voorbeeld gebruikte waarden worden vet gemarkeerd.
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
-
Ga naar de
customWidgets
(opgegeven waarde voor deartifactID
eigenschap) 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:
-
Selecteer File > Import > Existing Projects into Workspace.
-
Blader naar de map waarin u het dialoogvenster
archetype:generate
gebruiken. -
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 insteekmodulecode in het dialoogvenster
plugin.js
om ervoor te zorgen dat deze voldoet aan de vereisten voor de weergave. In dit voorbeeld voldoet de weergave aan de volgende vereisten:- De numerieke stapfunctie moet worden uitgebreid van
- $.xfaWidget.numericInput
. - De
set value
De methode van widget plaatst de waarde nadat de nadruk op het gebied is. Dit is een verplichte vereiste voor een adaptieve formulierwidget. - De
render
moet worden overschreven om debootstrapNumber
methode. - 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.
- De
$userControl
-object beschikbaar moet zijn voorrender
methode. Het is een gebied vantext
type dat is gekloond met de plug-incode. - De + en - De knoppen moeten worden uitgeschakeld wanneer het veld wordt uitgeschakeld.
- De numerieke stapfunctie moet worden uitgebreid van
-
De inhoud van het dialoogvenster vervangen
bootstrap-number-input.js
(jQuery-insteekmodule) met de inhoud van denumericStepper-plugin.js
bestand. -
In de
numericStepper-widget.js
Voeg de volgende code toe om de rendermethode te overschrijven om de insteekmodule aan te roepen en de$userControl
object: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; }
-
In de
numericStepper-widget.js
bestand, overschrijf degetOptionsMap
eigenschap om de toegangsoptie te overschrijven en de knoppen + en - in de uitgeschakelde modus te verbergen.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 en navigeer naar de map met de
pom.xml
en voer het volgende Maven bevel uit om het project te bouwen: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:
-
Klik met de rechtermuisknop op het veld waarop u de weergave wilt toepassen en klik op Edit om het dialoogvenster Component bewerken te openen.
-
Werk op het tabblad Stijl de CSS class toe te voegen eigenschap
widget_numericStepper
.
-
De nieuwe weergave die u zojuist hebt gemaakt, is nu beschikbaar voor gebruik.