Anpassen von Touch AEM Dialogfeldern
Die Anpassung der Benutzeroberfläche ist ein wesentlicher Bestandteil jedes Projekts. Erfahren Sie, wie Sie Touch AEM Dialogfelder in AEM 6.1 anpassen können. Die Anpassung der Benutzeroberfläche ist ein wesentlicher Bestandteil jedes Projekts, und AEM 6.1 bietet dafür viele Erweiterungspunkte. Dieser Blogbeitrag beschreibt, wie Touch UI Dialogfelder in AEM 6.1 angepasst werden können. Für das Hinzufügen von Touch UI Dialogen stehen mehrere Out-of-the-box-Eigenschaften zur Verfügung, doch manchmal reicht dies nicht aus. Es gibt viele Beiträge zur Anpassung von Classic UI Dialogen, aber Touch UI erfordert eine andere Art der Anpassung.
Ich führe Sie durch den Prozess der Anpassung des Touch UI Dialogs anhand eines Color Picker Dialogbeispiels.
Um diesen Dialog zu erstellen, legen Sie ein neues benutzerdefiniertes Feld an (ich nannte es ‚colorpicker‘) und lassen Sie es von ‚granite/ui/components/foundation/form/field‘ erben. Erstellen Sie anschließend eine lokale Clientlib und überschreiben Sie ‚render.jsp‘.
Definieren Sie im render.jsp-Skript die notwendigen Eigenschaften, um die Dialoge zu konfigurieren und diese mit der Clientlib zu verbinden.
Danach erstellen Sie eine neue Komponente und setzen den resourceType des Feldes ‚color‘ auf ‚training/components/colorpicker‘.
Erstellen Sie anschließend eine .html-Datei, um den Farbwert anzuzeigen. Wir können nun endlich eine Farbe mit unserem benutzerdefinierten Farbwähler auswählen und das Ergebnis visualisieren.
Aber was ist, wenn Sie andere Feldwerte mit dem von Ihnen erstellten benutzerdefinierten Feld synchronisieren müssen (z.B. das Feld ‚color value‘ zwingen, den gleichen Wert wie ‚color‘ zu haben)?
Um dies zu erreichen, erstellen Sie ein neues Feld namens ‚color value‘, lassen Sie es von textfield (granite/ui/components/foundation/form/textfield) erben und konfigurieren Sie den ‚granite:class‘-Wert sowohl im Feld ‚colorvalue‘ als auch im Feld ‚color‘.
Konfigurieren Sie im Feld ‚color‘ den ‚granite:class‘-Wert für die Bindung.
Und binden Sie diese, indem Sie einen ‚granite:data‘-Knoten unter dem Feld ‚color‘ erstellen.
Sie können die Werte in den Eigenschaften granite:data und ‚granite:class‘ vergleichen, um zu verstehen, welche Werte und Eigenschaftsnamen dort vorhanden sein sollten.
