Creazione di un nuovo componente campo dell’interfaccia utente Granite

Ultimo aggiornamento: 2023-11-07

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/*

NOTA

Questi campi modulo dell’interfaccia utente Granite sono di particolare interesse in quanto vengono utilizzati per finestre di dialogo dei componenti.

NOTA

Per informazioni complete sui campi, vedi Documentazione dell’interfaccia utente Granite.

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 sostituito per il campo personalizzato; è incluso da init.jsp.

Consulta Documentazione dell’interfaccia utente Granite - Campo per i dettagli.

Per esempi, consulta:

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

NOTA

Poiché questo meccanismo utilizza JSP, i18n e XSS non sono forniti come preconfigurati. Questo significa che devi internazionalizzare ed evitare le tue Stringhe. La directory seguente contiene i campi generici di un’istanza standard, che puoi utilizzare come riferimento:

/libs/granite/ui/components/foundation/form directory

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. Creare un 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, genera 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 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 scripting preferito, in quanto la trasmissione di informazioni da un componente all’altro (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.

In questa pagina