DokumentationAEM 6.5Användarhandbok

Skapa en ny GRE-fältkomponent creating-a-new-granite-ui-field-component

Last update: Tue Nov 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Gränssnittet Granite innehåller ett antal komponenter som är utformade för att användas i formulär. Dessa kallas fält i GRUND-språket Granite. Standardkomponenterna i Granite-formuläret finns under:

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

NOTE
Dessa GRÄNSSNITTSformulärfält är av särskilt intresse eftersom de används för komponentdialogrutor.
NOTE
Mer information om fält finns i Granite UI-dokumentation.

Använd ramverket Granite UI Foundation för att utveckla och/eller utöka Granite-komponenter. Detta har två element:

  • serversidan:

    • en samling grundkomponenter

      • grund - modulär, sammansättningsbar, lagerhanterbar, återanvändbar
      • komponenter - Sling-komponenter

    • hjälpmedel för utveckling av applikationer

  • klientsidan:

    • en samling klientlibs som innehåller vokabulära tecken (dvs. HTML) för att uppnå generiska interaktionsmönster via ett hypermediastyrt användargränssnitt.

Den generiska användargränssnittskomponenten Granite field består av två intressanta filer:

  • init.jsp: hanterar den generiska bearbetningen; etiketter, beskrivning och tillhandahåller formulärvärden som du behöver när du återger fältet.
  • render.jsp: det är här som den faktiska återgivningen av fältet utförs och måste åsidosättas för ditt anpassade fält; inkluderas av init.jsp.

Se Bevilja gränssnittsdokumentation - fält för mer information.

Se till exempel:

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

NOTE
Eftersom JSP används för den här mekanismen, ges i18n och XSS inte direkt. Det innebär att du måste internationalisera och undvika dina strängar. Följande katalog innehåller de generiska fälten från en standardinstans och du kan använda dessa som referens:
/libs/granite/ui/components/foundation/form katalog

Skapa serverskriptet för komponenten creating-the-server-side-script-for-the-component

Ditt anpassade fält bör bara åsidosätta render.jsp skript, där du anger koden för komponenten. Du kan betrakta JSP-filen (det vill säga återgivningsskriptet) som en wrapper för koden.

  1. Skapa en komponent som använder sling:resourceSuperType egenskap att ärva från:

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

  2. Åsidosätt skriptet:

    render.jsp

    I det här skriptet skapar du hypermediemarkeringen (d.v.s. berikad kod som innehåller hypermediatillägget) så att klienten kan interagera med det genererade elementet. Detta bör följa kodningsformatet för serversidan Granite.

    När du anpassar, det enda kontrakt som du måste fulfill är att läsa formulärvärdet (initierat i init.jsp) från begäran med:

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

    Mer information finns i implementeringen av färdiga GRA-fält, till exempel: /libs/granite/ui/components/foundation/form/textfield.

    note note
    NOTE
    För närvarande är JSP den rekommenderade skriptmetoden eftersom det inte är lätt att skicka information från en komponent till en annan (vilket är vanligt i formulärfält) i HTML.

Skapa klientbiblioteket för komponenten creating-the-client-library-for-the-component

Så här lägger du till specifikt klientbeteende i komponenten:

  1. Skapa ett clientlib för kategori cq.authoring.dialog.

  2. Skapa ett clientlib för kategori cq.authoring.dialog och definiera JS/ CSS inuti den.

    Definiera JS/ CSS inuti klientlib.

    note note
    NOTE
    För tillfället innehåller GRE-gränssnittet inga avlyssnare eller kopplingar som du kan använda direkt för att lägga till JS-beteende. För att lägga till ytterligare JS-beteende i komponenten måste du implementera en JS-krok i en anpassad klass som du sedan tilldelar till komponenten under kodgenereringen.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2