DocumentazioneAEM 6.4Guida allo sviluppo

Creazione di un nuovo componente campo dell’interfaccia Granite creating-a-new-granite-ui-field-component

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

Creato per:

  • Developer
CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

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

NOTE
Questi campi modulo Granite UI sono di particolare interesse in quanto vengono utilizzati per finestre di dialogo dei componenti.
NOTE
Per maggiori dettagli sui campi, consulta la sezione Documentazione dell’interfaccia utente Granite.

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

  • granite/ui/components/foundation/form

NOTE
Poiché questo meccanismo utilizza JSP, i18n e XSS non sono preconfigurati. Ciò significa che sarà necessario internazionalizzare e sfuggire alle vostre Strings. La seguente directory 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 creating-the-server-side-script-for-the-component

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:

    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");

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

    note note
    NOTE
    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 creating-the-client-library-for-the-component

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.

    note note
    NOTE
    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.
recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e