Aanpassen van Touch AEM Dialoogvelden
Het aanpassen van de gebruikersinterface is een essentieel onderdeel van elk project. Leer hoe u Touch AEM Dialoogvelden kunt aanpassen in AEM 6.1. Het aanpassen van de gebruikersinterface is een essentieel onderdeel van elk project, en AEM 6.1 biedt hiervoor vele uitbreidingspunten. Dit blogbericht beschrijft hoe u Touch UI Dialoogvelden kunt aanpassen in AEM 6.1. Meerdere standaard (out-of-the-box) eigenschappen zijn beschikbaar voor het toevoegen van Touch UI dialoogvensters, maar soms is dit niet voldoende. Er zijn veel artikelen over het aanpassen van Klassieke UI dialoogvensters, maar Touch UI vereist een andere aanpak voor aanpassing.
Ik zal u door het proces leiden van het aanpassen van het Touch UI dialoogvenster, aan de hand van een voorbeeld van een kleurenpicker-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 nieuw component en stel resourceType van het veld ‘color’ in als ‘training/components/colorpicker’.
Maak vervolgens .html om de kleurwaarde weer te geven. We kunnen nu eindelijk een kleur kiezen met onze aangepaste kleurenpicker en het resultaat visualiseren.
Maar wat als u andere veldwaarden moet synchroniseren met het aangepaste veld dat u heeft gemaakt (bijv. het veld ‘color value’ dwingen om dezelfde waarde te hebben als ‘color’)?
Om dit te bereiken, maakt u een nieuw veld genaamd ‘color value’, erft u het van textfield (granite/ui/components/foundation/form/textfield), en configureert u de waarde ‘granite:class’ in zowel de velden ‘colorvalue’ als ‘color’.
Configureer in het veld ‘color’ de waarde ‘granite:class’ voor binding.
En koppel ze door een ‘granite:data’-knooppunt te maken onder het veld ‘color’.
U kunt waarden in granite:data en ‘granite:class’ eigenschappen vergelijken om te begrijpen welke waarden en eigenschapnamen daar moeten staan.
