Creazione di un nuovo componente campo dell’interfaccia utente Granite

L’interfaccia utente Granite offre una serie di componenti progettati per essere utilizzati nei moduli, denominati campi nel vocabolario dell’interfaccia utente Granite. I componenti del modulo Granite standard sono disponibili in:

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

Utilizza il framework Granite UI Foundation per sviluppare e/o estendere i componenti Granite. Ciò si basa su due elementi:

• lato server:

  • una raccolta di componenti di base

    • foundation: modulare, componibile, a più livelli, riutilizzabile
    • componenti: componenti Sling

  • assistenti per lo sviluppo delle applicazioni

• lato client:

  • una raccolta di clientlibs che fornisce un vocabolario (ovvero un’estensione del linguaggio HTML) per ottenere modelli di interazione generici tramite un’interfaccia utente guidata da Hypermedia

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

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

Consulta la sezione Documentazione dell’interfaccia utente Granite - Campo per ulteriori dettagli.

Per esempi, consulta:

• cqgems/customizingfield/components/colorpicker

  • fornite da Esempio di codice

• granite/ui/components/foundation/form

Creazione dello script lato server per il componente

Il campo personalizzato deve sostituire solo il render.jsp script, in cui viene fornito il markup per il componente. Puoi considerare JSP (ovvero lo script di rendering) come un wrapper per il markup.

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

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

2. Ignora lo script:

   render.jsp

   In questo script, è necessario generare il markup hypermedia (ovvero il markup arricchito, contenente l’affordance hypermedia) in modo che il client sappia come interagire con l’elemento generato. Questo dovrebbe seguire lo stile di codifica lato server dell’interfaccia utente Granite.

   Durante la personalizzazione, l’unico contratto che deve adempiere significa 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 informazioni, 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 scripting preferito, in quanto la trasmissione di informazioni da un componente all’altro (che è piuttosto frequente nel contesto di moduli/campi) non è facilmente raggiungibile in HTL.

Creazione della libreria client per il componente

Per aggiungere al componente un comportamento specifico lato client:

1. Creare una libreria client di categoria cq.authoring.dialog.

2. Creare una libreria client di categoria cq.authoring.dialog e definisci JS/ CSS dentro.

   Definisci le JS/ CSS dentro clientlib.

   NOTA

   Al momento, l’interfaccia utente Granite non fornisce alcun listener o hook predefinito che puoi utilizzare direttamente per aggiungere il comportamento JS. Per aggiungere un ulteriore comportamento JS al componente, devi implementare un hook JS a una classe personalizzata che viene quindi assegnata al componente durante la generazione del markup.

Risorse Business.Adobe.com

Targeted Content Asset Collections Content Intelligence Mobile Forms Customer Experience Management Digital Rights Management