Creazione di un nuovo componente campo dell’interfaccia Granite

L’interfaccia utente Granite offre una serie di componenti progettati per essere utilizzati nei moduli; si chiamano field nel vocabolario dell’interfaccia Granite. I componenti standard per moduli Granite sono disponibili in:

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

Utilizza il framework Granite UI Foundation per sviluppare e/o estendere i componenti Granite. Sono disponibili due elementi:

• lato server:

  • una raccolta di componenti di base

    • base - modulare, compositore, leggibile, riutilizzabile
    • componenti - Componenti Sling

  • aiutanti per lo sviluppo delle applicazioni

• lato client:

  • una raccolta di clientlibs che forniscono un certo vocabolario (cioè l'estensione del linguaggio HTML) per ottenere modelli di interazione generici tramite un'interfaccia utente guidata da Hypermedia

Componente generico dell’interfaccia utente Granite field è composto da due file di interesse:

• init.jsp: gestisce la trasformazione generica; l’etichettatura, la descrizione e fornisce il valore del modulo che sarà necessario per eseguire il rendering del campo.
• render.jsp: in questo punto viene eseguito il rendering effettivo del campo e deve essere sostituito per il campo personalizzato; è incluso da init.jsp.

Fai riferimento alla Documentazione dell’interfaccia utente Granite - Campo se vuoi maggiori dettagli.

Per esempi, consulta:

• cqgems/customizingfield/components/colorpicker

  • di cui Esempio di codice

• granite/ui/components/foundation/form

Creazione dello script lato server per il componente

Il campo personalizzato deve solo sostituire render.jsp script, in cui fornisci il markup per il componente. È possibile considerare il JSP (cioè lo script di rendering) come wrapper per il markup.

1. Crea un nuovo componente che utilizza il sling:resourceSuperType da cui ereditare:

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

2. Ignora script:

   render.jsp

   In questo script, è necessario generare il markup ipermedia (ad esempio il markup arricchito, contenente il prezzo dell’ipermedia) in modo che il cliente sappia come interagire con l’elemento generato. Questo dovrebbe seguire lo stile di codifica lato server dell'interfaccia utente Granite.

   Quando si personalizza, l'unico contratto che si deve eseguire è leggere il valore del modulo (inizializzato in init.jsp) dalla richiesta utilizzando:

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

   Per ulteriori dettagli, consulta l’implementazione dei campi predefiniti dell’interfaccia utente Granite; ad esempio, /libs/granite/ui/components/foundation/form/textfield.

   NOTA

   Al momento, JSP è il metodo di script preferito, in quanto non è facile passare informazioni da un componente all’altro (che è abbastanza frequente nel contesto di moduli/campi) in HTL.

Creazione della libreria-client per il componente

Per aggiungere al componente un comportamento specifico lato client:

1. Creare una clientlib di una categoria cq.authoring.dialog.

2. Creare una clientlib di una categoria cq.authoring.dialog e definire le JS/ CSS dentro.

   Definisci i JS/ CSS all’interno di clientlib.

   NOTA

   Al momento, l’interfaccia utente Granite non fornisce alcun listener o hook preconfigurati che è possibile utilizzare direttamente per aggiungere il comportamento JS. Quindi, per aggiungere ulteriori comportamenti JS al componente, devi implementare un hook JS a una classe personalizzata che poi assegni al componente durante la generazione del markup.

Risorse Business.Adobe.com

Multichannel Communication Managed Cloud Content As A Service Web Content Management Dynamic Media Dynamic Forms