Aanpassen van Touch AEM Dialoogvelden
Gebruikersinterface-aanpassing is een essentieel onderdeel van elk project. Leer hoe u Touch AEM Dialoogvelden aanpast in AEM 6.1. Gebruikersinterface-aanpassing is een essentieel onderdeel van elk project, en AEM 6.1 biedt hiervoor veel uitbreidingsmogelijkheden. Deze blogpost beschrijft hoe u Touch UI-dialoogvelden kunt aanpassen in AEM 6.1. Er zijn meerdere standaard eigenschappen beschikbaar voor het toevoegen van Touch UI-dialogen, maar soms is dat niet voldoende. Er zijn veel artikelen over het aanpassen van Classic UI-dialogen, maar Touch UI vereist een andere aanpassing.
Ik zal u stap voor stap begeleiden bij het aanpassen van het Touch UI-dialoogvenster, met een voorbeeld van een kleurenkiezer-dialoogvenster.
Om dit dialoogvenster te bouwen, maakt u een nieuw aangepast veld (ik noemde het ‘colorpicker’) en erft u het van ‘granite/ui/components/foundation/form/field’. Maak vervolgens een lokale clientlib en overschrijf ‘render.jsp’.
Definieer in het render.jsp-script de benodigde eigenschappen om de dialoogvensters te configureren en te koppelen aan de clientlib.
Maak daarna een nieuwe component en stel het resourceType van het veld ‘color’ in als ‘training/components/colorpicker’.
Maak vervolgens een .html-bestand om de kleurwaarde weer te geven. We kunnen dan eindelijk een kleur kiezen met onze aangepaste kleurenkiezer en het resultaat visualiseren.
Maar wat als u andere veldwaarden moet synchroniseren met het aangepaste veld dat u hebt gemaakt (bijv. het veld ‘kleurwaarde’ dwingen dezelfde waarde te hebben als ‘color’)?
Om dit te bereiken, maakt u een nieuw veld genaamd ‘kleurwaarde’, erft u het van textfield (granite/ui/components/foundation/form/textfield), en configureert u de ‘granite:class’-waarde in zowel de ‘colorvalue’- als de ‘color’-velden.
Configureer in het veld ‘color’ de ‘granite:class’-waarde voor binding.
En koppel ze door een ‘granite:data’-node aan te maken onder het ‘color’-veld.
U kunt waarden in de eigenschappen ‘granite:data’ en ‘granite:class’ vergelijken om te begrijpen welke waarden en eigenschapnamen daar moeten staan.
