Een nieuwe graniet-UI-veldcomponent maken

Graniet UI biedt een reeks componenten die zijn ontworpen voor gebruik in formulieren; Deze worden velden in de verklarende woordenlijst UI genoemd. De standaardcomponenten voor graniet-formulieren zijn beschikbaar onder:

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

Gebruik het granite UI Foundation-framework om granitecomponenten te ontwikkelen en/of uit te breiden. Dit heeft twee elementen:

• server:

  • een verzameling stichtingscomponenten

    • stichting - modulair, composable, laagbaar, herbruikbaar
    • componenten - Sling-componenten

  • hulpverleners voor de ontwikkeling van toepassingen

• clientzijde:

  • een verzameling clientlibs die een woordenschat biedt (bijv. uitbreiding van de HTML-taal) om generieke interactiepatronen te bereiken via een door Hypermedia gestuurde interface

De generische graniet UI-component field bestaat uit twee belangwekkende bestanden:

• init.jsp: verwerkt de generieke verwerking; een label, beschrijving en een formulierwaarde die u nodig hebt bij het weergeven van uw veld.
• render.jsp: Hier wordt de daadwerkelijke rendering van het veld uitgevoerd en moet deze worden overschreven voor het aangepaste veld. is opgenomen door init.jsp.

Raadpleeg de Granite UI-documentatie - Veld als u meer informatie wilt.

Zie voor voorbeelden:

• cqgems/customizingfield/components/colorpicker

  • verstrekt door Codesteekproef

• granite/ui/components/foundation/form

Het serverscript maken voor de component

Het aangepaste veld mag alleen het script render.jsp overschrijven, waarbij u de markering voor de component opgeeft. U kunt JSP (d.w.z. het teruggevende manuscript) als omslag voor uw prijsverhoging beschouwen.

1. Maak een nieuwe component die de eigenschap sling:resourceSuperType gebruikt om van te erven:

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

2. Overschrijf het script:

   render.jsp

   In dit script moet u de hypermediamarkering genereren (verrijkte markering die de hypermediabelelans bevat), zodat de client weet hoe deze moet communiceren met het gegenereerde element. Dit zou de server-zijstijl van Granite UI van codering moeten volgen.

   Wanneer het aanpassen, moet het enige contract dat u must vervult de vormwaarde (geïnitialiseerd in init.jsp) van het verzoek lezen gebruikend:

   // Delivers the value of the field (read from the content)
   ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
   vm.get("value, String.class");
   

   Voor meer informatie, gelieve te verwijzen naar de implementatie van uit-de-doos gebieden van de Vergroting UI; bijvoorbeeld /libs/granite/ui/components/foundation/form/textfield.

   OPMERKING

   Op dit moment is JSP de voorkeursscriptmethode, aangezien het niet gemakkelijk is om informatie door te geven van de ene component naar de andere (die in de context van formulier/velden veel voorkomt) in HTML.

De clientbibliotheek maken voor de component

Specifiek gedrag aan de clientzijde toevoegen aan de component:

1. Maak een clientlib van categorie cq.authoring.dialog.

2. Maak een client-lib van categorie cq.authoring.dialog en definieer hierin uw JS/ CSS.

   Definieer uw JS/ CSS in de clientlib.

   OPMERKING

   Op dit moment biedt de graniet-interface geen out-of-the-box listeners of haken die u rechtstreeks kunt gebruiken om JS-gedrag toe te voegen. Zo, om extra gedrag JS aan uw component toe te voegen, moet u een haak JS aan een douaneklasse uitvoeren die u dan aan uw component tijdens de prijsverhogingsgeneratie toewijst.