Show Menu
ARGOMENTI×

Creazione di un nuovo componente Campo interfaccia Granite

L'interfaccia utente Granite offre una serie di componenti progettati per essere utilizzati nei moduli; questi sono denominati campi nel vocabolario dell’interfaccia utente Granite. I componenti per modulo Granite standard sono disponibili in:
/libs/granite/ui/components/foundation/form/*
Questi campi modulo Granite per l’interfaccia utente sono di particolare interesse in quanto sono utilizzati per le finestre di dialogo dei componenti .
Per informazioni dettagliate sui campi, consulta la documentazione sull’interfaccia utente Granite.
Utilizzate 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
      • fondazione - modulare, componibile, leggibile, riutilizzabile
      • componenti - Sling components
    • aiutanti per lo sviluppo delle applicazioni
  • lato client:
    • una raccolta di clientlibs che forniscono un vocabolario (ad esempio l'estensione del linguaggio HTML) per ottenere pattern di interazione generici tramite un'interfaccia utente ipermedia
Il componente generico dell’interfaccia utente Granite field è composto da due file di interesse:
  • init.jsp : gestisce la trasformazione generica; l'etichettatura, la descrizione e il valore del modulo saranno necessari per il rendering del campo.
  • render.jsp : in questo punto viene eseguito il rendering effettivo del campo e deve essere ignorato per il campo personalizzato; è incluso da init.jsp .
Per maggiori informazioni, consulta la documentazione Granite UI - Campo .
Per esempi, vedete:
  • cqgems/customizingfield/components/colorpicker
  • granite/ui/components/foundation/form
Poiché questo meccanismo utilizza JSP, i18n e XSS non sono forniti out-of-the-box. Ciò significa che sarà necessario internazionalizzare ed evitare le stringhe. La seguente directory contiene i campi generici di un’istanza standard, che potete utilizzare come riferimento:
/libs/granite/ui/components/foundation/form directory

Creazione dello script sul lato server per il componente

Il campo personalizzato deve ignorare solo lo render.jsp script, in cui è possibile fornire la marcatura per il componente. È possibile considerare JSP (ovvero lo script di rendering) come un wrapper per la marcatura.
  1. Creare un nuovo componente che utilizza la sling:resourceSuperType proprietà da cui ereditare:
    /libs/granite/ui/components/foundation/form/field
  2. Ignora script:
    render.jsp
    In questo script, è necessario generare il markup ipermedia (ad es. il markup arricchito, contenente il costo contenuto dell'ipermedia) 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.
    Quando si personalizzano, l'unico contratto che si deve soddisfare è 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, consultare l'implementazione dei campi predefiniti dell'interfaccia utente Granite; ad esempio, /libs/granite/ui/components/foundation/form/textfield .
    Al momento, JSP è il metodo di script preferito, in quanto il passaggio di informazioni da un componente all’altro (che è abbastanza frequente nel contesto di modulo/campi) non è facilmente raggiungibile in HTL.

Creazione della libreria client per il componente

Per aggiungere al componente un comportamento lato client specifico:
  1. Crea una clientlib di categoria cq.authoring.dialog .
  2. Create una clientlib di categoria cq.authoring.dialog e definite il vostro JS / CSS al suo interno.
    Definite il vostro JS / CSS all'interno della clientlib.
    Al momento, l'interfaccia utente Granite non fornisce alcun listener o ganci out-of-the-box che è possibile utilizzare direttamente per aggiungere il comportamento JS. Pertanto, per aggiungere un comportamento JS aggiuntivo al componente, è necessario implementare un gancio JS a una classe personalizzata che poi si assegna al componente durante la generazione del markup.