DokumentationAEM 6.4Användarhandbok om utveckling

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

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

Skapat för:

  • Developer
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Gränssnittet Granite innehåller ett antal komponenter som är avsedda att användas i formulär. kallas fält i GRUND-språket Granite. Standardkomponenterna i Granite 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 ansökningar

  • klientsidan:

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

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

  • init.jsp: hanterar den allmänna behandlingen, 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. ingår i init.jsp.

Se Bevilja gränssnittsdokumentation - fält om du vill ha mer information.

Se till exempel:

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

NOTE
Eftersom den här mekanismen använder JSP, 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 (dvs. återgivningsskriptet) som en wrapper för koden.

  1. Skapa en ny 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 måste du generera hypermediemarkeringen (d.v.s. berikad kod som innehåller hypermedielagring) så att klienten vet hur man interagerar 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 användargränssnittsfält för Granite som är färdiga att användas. 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 ganska 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.

    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
2315f3f5-cb4a-4530-9999-30c8319c520e