Aanpassen van Touch AEM dialoogvensters
De aanpassing van de gebruikersinterface is een essentieel onderdeel van elk project. Leer hoe u Touch AEM dialoogvensters in AEM 6.1 kunt aanpassen. De aanpassing van de gebruikersinterface is een essentieel onderdeel van elk project, en AEM 6.1 biedt hiervoor veel uitbreidingspunten. Dit blogbericht beschrijft hoe Touch UI dialoogvensters in AEM 6.1 aangepast kunnen worden. Er zijn verschillende standaard eigenschappen beschikbaar voor het toevoegen van Touch UI dialogen, maar soms is dat niet voldoende. Er zijn veel artikelen over hoe Classic UI dialogen aangepast moeten worden, maar de Touch UI vereist een andere aanpak.
Ik zal u door het proces van het aanpassen van het Touch UI dialoogvenster leiden, aan de hand van een voorbeeld van een kleurenkiezer-dialoogvenster.
Om dit dialoogvenster te creëren, maakt u een nieuw aangepast veld aan (ik noemde het ‘colorpicker’) en laat u het overerven van ‘granite/ui/components/foundation/form/field’. Maak vervolgens een lokale Clientlib aan en overschrijf ‘render.jsp’.
Definieer in het render.jsp-script de noodzakelijke eigenschappen om de dialoogvensters te configureren en ze te verbinden met de Clientlib.
Maak daarna een nieuwe component aan en stel de resourceType van het veld ‘color’ in op ’training/components/colorpicker’.
Maak vervolgens een .html-bestand aan om de kleurwaarde weer te geven. We kunnen nu eindelijk een kleur selecteren met onze aangepaste kleurenkiezer en het resultaat visualiseren.
Maar wat als u andere veldwaarden moet synchroniseren met het door u aangemaakte aangepaste veld (bijv. afdwingen dat het veld ‘color value’ dezelfde waarde heeft als ‘color’)?
Om dit te bereiken, maakt u een nieuw veld aan genaamd ‘color value’, laat u het overerven van het tekstveld (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 de binding.
En bind deze door een ‘granite:data’-knooppunt onder het veld ‘color’ aan te maken.
U kunt waarden in de eigenschappen granite:data en ‘granite:class’ vergelijken om te begrijpen welke waarden en eigenschapsnamen daar zouden moeten zijn.
