Sie sehen sich Hilfeinhalte der folgenden Version an:

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-Verzeichnis

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 verwendet.

  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 vorgefertigten Feldern der Granite-Benutzeroberfläche, beispielsweise unter /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. Erstellen Sie eine Client-Bibliothek der Kategorie cq.authoring.dialog und definieren Sie darin Ihr JS und CSS.

    Definieren Sie Ihr JS und 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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie