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/*

Hinweis

Die Formularfelder der Granite-Benutzeroberfläche sind besonders interessant, da sie für Komponenten-Dialoge verwendet werden.

Hinweis

Vollständige Informationen zu Feldern finden Sie in der Dokumentation zur Granite-Benutzeroberfläche.

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 unter:

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

Hinweis

Da dieser Mechanismus JSP verwendet, werden i18n und XSS nicht vorgefertigt bereitgestellt. Daher müssen Sie die Zeichenfolgen internationalisieren und durch Anführungszeichen schützen. Das folgende Verzeichnis enthält die generischen Felder aus einer Standardinstanz, die Sie als Referenz verwenden können:

/libs/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");
    

    For more details, please refer to the implementation of out-ot-the-box Granite UI fields; for example, /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 clientseitiges Verhalten hinzuzufügen:

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

  2. Create a clientlib of category cq.authoring.dialog and define your JS/ CSS inside it.

    Define your JS/ CSS inside the clientlib.

    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.

Auf dieser Seite