DokumentationAEM 6.4Entwickleranleitung

Erstellen einer neuen Feld-Komponente in der Granite-Benutzeroberfläche creating-a-new-granite-ui-field-component

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Developer
CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Die Granite-Benutzeroberfläche bietet eine Reihe von Komponenten, die für die Verwendung in Formularen entwickelt wurden. diese fields im Vokabular der Granite-Benutzeroberfläche. Die standardmäßigen Granite-Formularkomponenten sind unter verfügbar:

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

NOTE
Diese Formularfelder der Granite-Benutzeroberfläche sind von besonderem Interesse, da sie für Komponentendialogfelder.
NOTE
Ausführliche Informationen zu Feldern finden Sie im Dokumentation zur Granite-Benutzeroberfläche.

Verwenden Sie das Foundation-Framework der Granite-Benutzeroberfläche, um Granite-Komponenten zu entwickeln und/oder zu erweitern. Dies umfasst zwei Elemente:

  • Server-seitig:

    • eine Sammlung von Foundation-Komponenten

      • foundation - modular, zusammenstellbar, schichtfähig, wiederverwendbar
      • Komponenten – Sling-Komponenten

    • Helfer zur Unterstützung der Anwendungsentwicklung

  • clientseitig:

    • eine Sammlung von Client-Bibliotheken, die ein Vokabular bereitstellen (d. h. Erweiterung der HTML-Sprache), um generische Interaktionsmuster über eine durch Hypermedia gesteuerte Benutzeroberfläche zu erreichen.

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 unter Granite-UI-Dokumentation - Feld , wenn Sie weitere Details wünschen.

Beispiele finden Sie hier:

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

NOTE
Da dieser Mechanismus JSP verwendet, werden i18n und XSS nicht nativ bereitgestellt. Das bedeutet, dass Sie Ihre Zeichenfolgen internationalisieren und maskieren müssen. Das folgende Verzeichnis enthält die generischen Felder einer Standardinstanz. Sie können diese als Referenz verwenden:
/libs/granite/ui/components/foundation/form-Verzeichnis

Erstellen des serverseitigen Skripts für die Komponente creating-the-server-side-script-for-the-component

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. angereichertes Markup, das die Hypermedia-Bezahlbarkeit enthält) generieren, damit der Client weiß, wie er mit dem generierten Element interagiert. Dies sollte dem serverseitigen Kodierungsstil der Granite-Benutzeroberfläche entsprechen.

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

    code language-none 
    // 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.

    note note
    NOTE
    Derzeit ist JSP die bevorzugte Skriptmethode, da die Übergabe von Informationen von einer Komponente an eine andere (was im Kontext von Formular/Feldern recht häufig vorkommt) in HTL nicht einfach möglich ist.

Erstellen der Client-Bibliothek für die Komponente creating-the-client-library-for-the-component

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.

    note note
    NOTE
    Derzeit bietet die Granite-Benutzeroberfläche keine nativen Listener oder Hooks, die Sie direkt zum Hinzufügen von JS-Verhalten verwenden können. Um Ihrer Komponente also zusätzliches JS-Verhalten hinzuzufügen, müssen Sie einen JS-Hook in eine benutzerdefinierte Klasse implementieren, die Sie dann während der Markup-Generierung Ihrer Komponente zuweisen.
recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e