Erstellen einer neuen Feld-Komponente in der Granite-Benutzeroberfläche

Die Granite-Benutzeroberfläche bietet eine Reihe von Komponenten für die Verwendung in Formularen, die im Granite-Vokabular als Felder bezeichnet werden. Die Standard-Formularkomponenten in Granite sind verfügbar unter:

/libs/granite/ui/components/foundation/form/*

Verwenden Sie das Foundation-Framework der Granite-Benutzeroberfläche zum Entwickeln bzw. Erweitern von Granite-Komponenten. Dieses umfasst zwei Elemente:

• Serverseitig:

  • eine Reihe von Foundation-Komponenten

    • Foundation – modular, zusammensetzbar, schichtfähig, wiederverwendbar
    • Komponenten – Sling-Komponenten

  • Hilfsprogramme für die Anwendungsentwicklung

• Clientseitig:

  • eine Sammlung von Client-Bibliotheken mit Vokabular (d. h. einer Erweiterung der HTML-Sprache) für generische Interaktionsmuster in einer von Hypermedia gesteuerten Benutzeroberfläche

Die generische Komponente field der Granite-Benutzeroberfläche beinhaltet zwei wichtige Dateien:

• init.jsp: Übernimmt die generische Verarbeitung sowie Beschriftung und Beschreibung und liefert den für das Rendern des Felds erforderlichen Formularwert.
• render.jsp: Übernimmt das tatsächliche Rendern des Felds und muss für das benutzerdefinierte Feld überschrieben werden; ist in init.jsp enthalten.

Weitere Informationen finden Sie in der Dokumentation zur Granite-Benutzeroberfläche im Abschnitt zu Feldern.

Beispiele finden Sie hier:

• cqgems/customizingfield/components/colorpicker

  • im Abschnitt Codebeispiel

• granite/ui/components/foundation/form

Erstellen des serverseitigen Skripts für die Komponente

Das benutzerdefinierte Feld sollte das render.jsp-Skript nur überschreiben, wenn Sie das Markup für die Komponente angeben. Das JSP (d. h. das Render-Skript) ist dabei quasi der Wrapper für das Markup.

1. Erstellen Sie eine neue Komponente, die die sling:resourceSuperType-Eigenschaft zum Erben aus

   /libs/granite/ui/components/foundation/form/field

2. Überschreiben Sie das Skript:

   render.jsp

   In diesem Skript müssen Sie das Hypermedia-Markup (d. h. das erweiterte Markup mit Hypermedia-Angebot) erzeugen, damit der Client Anweisungen erhält, wie er mit dem erstellten Element interagieren soll. Verwenden Sie dabei den serverseitigen Code-Stil der Granite-Benutzeroberfläche

   Bei der Anpassung müssen Sie nur festlegen, dass der (in init.jsp initialisierte) Formularwert wie folgt aus der Anforderung gelesen wird:

   // Delivers the value of the field (read from the content)
   ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
   vm.get("value, String.class");
   

   Weitere Informationen finden Sie im Abschnitt zur Implementierung von vorkonfigurierten Feldern der Granite-Benutzeroberfläche, beispielsweise /libs/granite/ui/components/foundation/form/textfield.

   HINWEIS

   Derzeit ist JSP die bevorzugte Methode für die Skripterstellung, da die Weitergabe von Daten von einer Komponente an die andere (die bei Formularen/Feldern häufig erfolgt) mit HTL schwierig zu bewerkstelligen ist.

Erstellen der Client-Bibliothek für die Komponente

Gehen Sie wie folgt vor, um der Komponente ein bestimmtes Client-seitiges Verhalten hinzuzufügen:

1. Erstellen Sie eine Client-Bibliothek der Kategorie cq.authoring.dialog.

2. Erstellen Sie eine Client-Bibliothek der Kategorie cq.authoring.dialog und definieren Sie darin Ihr JS/ CSS darin.

   Definieren Sie Ihr JS/ CSS in der Client-Bibliothek.

   HINWEIS

   Derzeit stellt die Granite-Benutzeroberfläche keine vorgefertigten Listener oder Hooks bereit, die Sie direkt zum Hinzufügen von JS-Verhalten verwenden können. Um der JS-Komponente zusätzliches Verhalten hinzuzufügen, müssen Sie daher einen JS-Hook in einer benutzerdefinierten Klasse implementieren, die Sie der Komponente bei der Markup-Erzeugung zuweisen.

Ressourcen für Business.Adobe.com

Targeted Content Asset Collections Content Intelligence Mobile Forms Customer Experience Management Digital Rights Management