AEM Touch dialoogvensters aanpassen
Het aanpassen van de gebruikersinterface is een cruciaal onderdeel van elk project. Leer hoe u AEM Touch dialoogvensters kunt aanpassen in AEM 6.1. Het aanpassen van de gebruikersinterface is een cruciaal onderdeel van elk project, en AEM 6.1 biedt hiervoor veel uitbreidingspunten. Deze blogpost beschrijft hoe u Touch UI-dialoogvensters kunt aanpassen in AEM 6.1. Er zijn veel kant-en-klare eigenschappen beschikbaar voor het toevoegen van Touch UI-dialoogvensters, maar soms is dat niet voldoende. Er zijn veel artikelen over hoe u Classic UI-dialoogvensters kunt aanpassen, maar Touch UI vereist een andere personalisatie.
Ik zal u door het proces leiden van het aanpassen van een Touch UI-dialoogvenster, met behulp van het voorbeeld van het dialoogvenster voor kleurselectie (Color Picker).
Om dit dialoogvenster te bouwen, maakt u een nieuw aangepast veld (ik heb het ‘colorpicker’ genoemd) 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 vervolgens een nieuw component en stel de resourceType van het veld ‘color’ in op ’training/components/colorpicker’.
Maak vervolgens een .html-bestand om de kleurwaarde weer te geven. We kunnen ten slotte een kleur selecteren met onze aangepaste kleurenkiezer en het resultaat visualiseren.
Maar wat als u andere veldwaarden moet synchroniseren met het aangepaste veld dat u heeft gemaakt (bijv. afdwingen dat het veld ‘color value’ dezelfde waarde heeft 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 van ‘granite:class’ in zowel de velden ‘colorvalue’ als ‘color’.
Configureer in het veld ‘color’ de waarde van ‘granite:class’ voor de koppeling.
En koppel ze door een ‘granite:data’-knooppunt aan te maken onder het veld ‘color’.
U kunt de waarden in de eigenschappen granite:data en ‘granite:class’ vergelijken om te begrijpen welke waarden en eigenschapsnamen daar moeten staan.
