Sviluppo di componenti AEM (interfaccia classica)

L’interfaccia classica utilizza ExtJS per creare widget che forniscono l’aspetto dei componenti. A causa della natura di questi widget, vi sono alcune differenze tra il modo in cui i componenti interagiscono con l’interfaccia classica e il interfaccia touch.

Struttura

La struttura di base di un componente viene illustrata nella pagina Componenti AEM - Nozioni di base, che applica sia le interfacce touch che classica. Anche se non è necessario utilizzare le impostazioni per l’interfaccia touch nel nuovo componente, può essere utile conoscerle quando si eredita da componenti esistenti.

Script JSP

Gli script o i servlet JSP possono essere utilizzati per il rendering dei componenti. Secondo le regole di elaborazione della richiesta di Sling il nome per lo script predefinito è:

<*componentname*>.jsp

global.jsp

Il file di script JSP global.jsp viene utilizzato per fornire un accesso rapido a oggetti specifici (ad esempio per accedere al contenuto) a qualsiasi file di script JSP utilizzato per il rendering di un componente.

Pertanto global.jsp deve essere incluso in ogni script JSP di rendering del componente in cui uno o più oggetti forniti in global.jsp sono utilizzati.

Posizione dell'impostazione predefinita global.jsp è:

/libs/foundation/global.jsp

Funzione di global.jsp, API utilizzate e Taglibs

Di seguito sono elencati gli oggetti più importanti forniti dall’impostazione predefinita global.jsp:

Riepilogo:

• <cq:defineObjects />

  • slingRequest - L'oggetto di richiesta con wrapping ( SlingHttpServletRequest).
  • slingResponse - L'oggetto di risposta racchiuso ( SlingHttpServletResponse).
  • resource - L'Oggetto Risorsa Sling ( slingRequest.getResource();).
  • resourceResolver - L'Oggetto Sling Resource Resolver ( slingRequest.getResoucreResolver();).
  • currentNode - Il nodo JCR risolto per la richiesta.
  • log - Il logger predefinito ().
  • sling - L'helper dello script Sling.
  • properties - Le proprietà della risorsa gestita ( resource.adaptTo(ValueMap.class);).
  • pageProperties - Le proprietà della pagina della risorsa gestita.
  • pageManager - Gestione delle pagine per l'accesso AEM pagine di contenuto ( resourceResolver.adaptTo(PageManager.class);).
  • component - L'oggetto componente del componente AEM corrente.
  • designer - L'oggetto designer per il recupero delle informazioni di progettazione ( resourceResolver.adaptTo(Designer.class);).
  • currentDesign - Progettazione della risorsa gestita.
  • currentStyle - Stile della risorsa gestita.

Accesso al contenuto

Sono disponibili tre metodi per accedere al contenuto in AEM WCM:

• Tramite l'oggetto properties introdotto in global.jsp:

  L'oggetto properties è un'istanza di ValueMap (vedi API Sling) e contiene tutte le proprietà della risorsa corrente.

  Esempio: String pageTitle = properties.get("jcr:title", "no title"); utilizzato nello script di rendering di un componente pagina.

  Esempio: String paragraphTitle = properties.get("jcr:title", "no title"); utilizzato nello script di rendering di un componente paragrafo standard.

• Tramite il currentPage oggetto introdotto in global.jsp:

  La currentPage l'oggetto è un'istanza di una pagina (vedi API AEM). La classe page fornisce alcuni metodi per accedere al contenuto.

  Esempio: String pageTitle = currentPage.getTitle();

• Via currentNode oggetto introdotto in global.jsp:

  La currentNode l'oggetto è un'istanza di un nodo (vedi API JCR). Le proprietà di un nodo sono accessibili dal getProperty() metodo .

  Esempio: String pageTitle = currentNode.getProperty("jcr:title");

Librerie di tag JSP

Le librerie di tag CQ e Sling consentono di accedere a funzioni specifiche da utilizzare nello script JSP dei modelli e dei componenti.

Per ulteriori informazioni, consulta il documento Librerie di tag.

Utilizzo delle librerie HTML lato client

I siti web moderni si basano fortemente sull’elaborazione lato client basata su codice JavaScript e CSS complessi. Organizzare e ottimizzare il servizio di questo codice può essere un problema complicato.

Per risolvere questo problema, AEM fornisce Cartelle libreria lato client, che ti consente di memorizzare il codice lato client nell’archivio, organizzarlo in categorie e definire quando e come ogni categoria di codice deve essere trasmessa al client. Il sistema di libreria lato client si occupa quindi di produrre i collegamenti corretti nella pagina web finale per caricare il codice corretto.

Vedere il documento Utilizzo delle librerie HTML lato client per ulteriori informazioni.

Finestra di dialogo

Per aggiungere e configurare il contenuto, è necessaria una finestra di dialogo per gli autori.

Vedi Componenti AEM - Nozioni di base per ulteriori dettagli.

Configurazione del comportamento di modifica

Puoi configurare il comportamento di modifica di un componente. Ciò include attributi come le azioni disponibili per il componente, le caratteristiche dell’editor locale e i listener relativi agli eventi sul componente. La configurazione è comune sia alle interfacce touch che alle interfacce classica, anche se con alcune specifiche differenze.

La è configurato il comportamento di modifica di un componente aggiungendo un cq:editConfig nodo di tipo cq:EditConfig sotto il nodo del componente (di tipo cq:Component) e aggiungendo proprietà specifiche e nodi secondari.

Utilizzo ed estensione dei widget ExtJS

Vedi Utilizzo ed estensione dei widget ExtJS per ulteriori dettagli.

Utilizzo di xtypes per i widget ExtJS

Vedi Utilizzo di xtypes per ulteriori dettagli.

Sviluppo di nuovi componenti

Questa sezione descrive come creare i propri componenti e aggiungerli al sistema paragrafo.

Un modo rapido per iniziare consiste nel copiare un componente esistente e quindi apportare le modifiche desiderate.

Un esempio di come sviluppare un componente è descritto in dettaglio in Estensione del componente Testo e immagine - Un esempio.

Sviluppa un nuovo componente (adatta componente esistente)

Per sviluppare nuovi componenti per AEM basati sul componente esistente è possibile copiare il componente, creare un file javascript per il nuovo componente e archiviarlo in una posizione accessibile a AEM (vedi anche Personalizzazione di componenti e altri elementi):

1. Utilizzando CRXDE Lite, crea una nuova cartella di componenti in:

   / apps/<myProject>/components/<myComponent>

   Ricrea la struttura del nodo come in libs, quindi copia la definizione di un componente esistente, ad esempio il componente Testo . Ad esempio, per personalizzare la copia del componente Testo :

   • da /libs/foundation/components/text
   • a /apps/myProject/components/text

2. Modifica la jcr:title per riflettere il nuovo nome.

3. Apri la nuova cartella dei componenti e apporta le modifiche necessarie. Inoltre, elimina eventuali informazioni estranee presenti nella cartella.

   Puoi apportare modifiche quali:

   • aggiunta di un nuovo campo nella finestra di dialogo

     • cq:dialog - Finestra di dialogo per l’interfaccia touch
     • dialog - Finestra di dialogo per l’interfaccia classica

   • sostituzione del .jsp file (denominalo dopo il nuovo componente)

   • o rielaborazione completa dell’intero componente, se lo si desidera

   Ad esempio, se scegli una copia del componente Testo standard, puoi aggiungere un campo aggiuntivo alla finestra di dialogo e quindi aggiornare il .jsp per elaborare l'input effettuato in quel punto.

   NOTA

   Un componente per:

   • L’interfaccia touch utilizza Granite componenti
   • L’interfaccia classica utilizza Widget ExtJS
   NOTA

   Una finestra di dialogo definita per l’interfaccia classica funziona all’interno dell’interfaccia touch.

   Una finestra di dialogo definita per l’interfaccia touch non funziona nell’interfaccia classica.

   A seconda dell’ambiente di istanza e authoring, è possibile definire entrambi i tipi di finestra di dialogo per il componente.

4. Uno dei seguenti nodi deve essere presente e inizializzato correttamente affinché venga visualizzato il nuovo componente:

   • cq:dialog - Finestra di dialogo per l’interfaccia touch
   • dialog - Finestra di dialogo per l’interfaccia classica
   • cq:editConfig - comportamento dei componenti nell’ambiente di modifica (ad esempio, trascinamento)
   • design_dialog - finestra di dialogo per la modalità di progettazione (solo interfaccia classica)

5. Attiva il nuovo componente nel sistema paragrafo:

   • utilizzo di CRXDE Lite per aggiungere il valore <path-to-component> (ad esempio, /apps/geometrixx/components/myComponent) ai componenti di proprietà del nodo /etc/designs/geometrixx/jcr:content/contentpage/par
   • seguendo le istruzioni riportate in Aggiunta di nuovi componenti ai sistemi paragrafo

6. In AEM WCM, apri una pagina del sito Web e inserisci un nuovo paragrafo del tipo appena creato per verificare che il componente funzioni correttamente.

Aggiunta di un nuovo componente al sistema paragrafo (modalità Progettazione)

Una volta sviluppato il componente, lo aggiungi al sistema di paragrafi, consentendo agli autori di selezionare e utilizzare il componente durante la modifica di una pagina.

1. Accedere a una pagina dell’ambiente di authoring che utilizza il sistema paragrafo, ad esempio <contentPath>/Test.html.

2. Passa alla modalità Progettazione effettuando una delle seguenti operazioni:

   • aggiunta ?wcmmode=design alla fine dell’URL e accedi di nuovo, ad esempio:

     <contextPath>/ Test.html?wcmmode=design

   • clic su Progettazione nella barra laterale

   Ora sei in modalità progettazione e puoi modificare il sistema paragrafo.

3. Fai clic su Modifica.

   Viene visualizzato un elenco dei componenti appartenenti al sistema paragrafo. È elencato anche il nuovo componente.

   I componenti possono essere attivati (o disattivati) per determinare quali vengono offerti all’autore durante la modifica di una pagina.

4. Attiva il componente, quindi torna alla modalità di modifica normale per verificare che sia disponibile per l’uso.

Estensione del componente Testo e Immagine - Un esempio

Questa sezione fornisce un esempio su come estendere il componente di testo e immagine standard, ampiamente utilizzato, con una funzione di posizionamento dell’immagine configurabile.

L’estensione al componente testo e immagine consente agli editor di utilizzare tutte le funzionalità esistenti del componente, oltre a un’opzione aggiuntiva per specificare il posizionamento dell’immagine:

• Sul lato sinistro del testo (comportamento corrente e nuovo predefinito)
• nonché sul lato destro

Dopo aver esteso questo componente, puoi configurare il posizionamento dell’immagine tramite la finestra di dialogo del componente.

In questo esercizio sono descritte le seguenti tecniche:

• Copiare il nodo componente esistente e modificarne i metadati
• Modifica della finestra di dialogo del componente, inclusa l’ereditarietà dei widget dalle finestre di dialogo padre
• Modifica dello script del componente per implementare la nuova funzionalità

Estensione del componente Testo esistente

Per creare il nuovo componente, utilizziamo il componente di testo standard come base e lo modifichiamo. Il nuovo componente viene memorizzato nell’applicazione di esempio Geometrixx AEM WCM.

1. Copia il componente di testo standard da /libs/foundation/components/textimage nella cartella del componente Geometrixx, /apps/geometrixx/components, utilizzando il textimage come nome del nodo di destinazione. Copia il componente accedendo al componente, facendo clic con il pulsante destro del mouse e selezionando Copia e navigando nella directory di destinazione.

   

2. Per semplificare questo esempio, passa al componente copiato ed elimina tutti i sottonodi del nuovo nodo di textimage, tranne i seguenti:

   • definizione finestra di dialogo: textimage/dialog
   • script componente: textimage/textimage.jsp
   • modifica il nodo di configurazione (che consente il trascinamento della selezione delle risorse): textimage/cq:editConfig
   NOTA

   La definizione della finestra di dialogo dipende dall’interfaccia utente:

   • Interfaccia touch: textimage/cq:dialog
   • Interfaccia classica: textimage/dialog

3. Modifica i metadati del componente:

   • Nome componente

     • Imposta jcr:description a Text Image Component (Extended)
     • Imposta jcr:title a Text Image (Extended)

   • Gruppo, in cui il componente è elencato nella barra laterale (lascia così com’è)

     • Esci componentGroup impostato su General

   • Componente principale per il nuovo componente (il componente di testo standard)

     • Imposta sling:resourceSuperType a foundation/components/textimage

   Dopo questo passaggio, il nodo del componente si presenta così:

   

4. Modificare la sling:resourceType proprietà del nodo di configurazione modifica dell'immagine (proprietà: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) a geometrixx/components/textimage.

   In questo modo, quando un’immagine viene rilasciata al componente sulla pagina, la sling:resourceType la proprietà del componente testo esteso è impostata su: geometrixx/components/textimage.

5. Modificare la finestra di dialogo del componente in modo da includere la nuova opzione. Il nuovo componente eredita le parti della finestra di dialogo uguali a quelle dell’originale. L'unica aggiunta che facciamo è quella di estendere Avanzate scheda , aggiunta di un Posizione immagine elenco a discesa, con opzioni Sinistra e Destra:

   • Lascia la textimage/dialogproprietà invariate.

   Nota come textimage/dialog/items presenta quattro sottonodi, da tab1 a tab4, che rappresentano le quattro schede della finestra di dialogo della textimage.

   • Per le prime due schede (tab1 e tab2):

     • Cambia xtype in cqinclude (per ereditare dal componente standard).
     • Aggiungere una proprietà del percorso con i valori /libs/foundation/components/textimage/dialog/items/tab1.infinity.jsone /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, rispettivamente.
     • Rimuovere tutte le altre proprietà o sottonodi.

   • Per la scheda 3:

     • Lascia le proprietà e i sottonodi senza modifiche

     • Aggiungi una nuova definizione di campo a tab3/items, posizione del nodo del tipo cq:Widget

     • Imposta le seguenti proprietà (di tipo String) per il nuovo tab3/items/positionnodo:

       • name: ./imagePosition
       • xtype: selection
       • fieldLabel: Image Position
       • type: select

     • Aggiungi nodo secondario position/options di tipo cq:WidgetCollection per rappresentare le due scelte per il posizionamento dell'immagine, e sotto di esso creare due nodi, o1 e o2 di tipo nt:unstructured.

     • Per nodo position/options/o1 imposta le proprietà: text a Left e value a left.

     • Per nodo position/options/o2 imposta le proprietà: text a Right e value a right.

   • Elimina scheda4.

   La posizione dell'immagine viene mantenuta nel contenuto come imagePositionproprietà del nodo che rappresenta textimage paragrafo. Dopo questi passaggi, la finestra di dialogo del componente si presenta così:

   

6. Estende lo script del componente, textimage.jsp, con ulteriore gestione del nuovo parametro:

   Image image = new Image(resource, "image");
   
   if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
        image.loadStyleData(currentStyle);
   

   Sostituiremo il frammento di codice sottolineato %><div class="image"><% con nuovo codice che genera uno stile personalizzato per questo tag.

   // todo: add new CSS class for the 'right image' instead of using
   // the style attribute
   String style="";
        if (properties.get("imagePosition", "left").equals("right")) {
             style = "style=\"float:right\"";
        }
        %><div <%= style %> class="image"><%
   

7. Salva il componente nella directory archivio. Il componente è pronto per il test.

Controllo del nuovo componente

Una volta sviluppato il componente, è possibile aggiungerlo al sistema di paragrafi, consentendo agli autori di selezionare e utilizzare il componente durante la modifica di una pagina. Questi passaggi consentono di testare il componente.

1. Apri una pagina in Geometrixx, ad esempio Inglese / Azienda.
2. Passate alla modalità di progettazione facendo clic su Progettazione nella barra laterale.
3. Modificate la struttura del sistema di paragrafi facendo clic su Modifica nel sistema di paragrafi al centro della pagina. Viene visualizzato un elenco di componenti che possono essere inseriti nel sistema di paragrafi e deve includere il componente appena sviluppato, Immagine testo (estesa) . Attivalo per il sistema di paragrafi selezionandolo e facendo clic su OK .
4. Torna alla modalità di modifica.
5. Aggiungi il paragrafo Testo e immagine (Extended) al sistema di paragrafi, inizializza testo e immagine con contenuto di esempio. Salva le modifiche.
6. Apri la finestra di dialogo del testo e del paragrafo dell’immagine e modifica la posizione dell’immagine nella scheda Avanzate a destra , quindi fai clic su OK per salvare le modifiche.
7. Viene eseguito il rendering del paragrafo con l’immagine a destra.
8. Il componente è ora pronto per l’uso.

Il componente memorizza il suo contenuto in un paragrafo della pagina Società.

Disattiva la funzionalità di caricamento del componente immagine

Per disabilitare questa funzionalità, utilizziamo il componente immagine standard come base e lo modifichiamo. Il nuovo componente viene memorizzato nell’applicazione di Geometrixx.

1. Copia il componente immagine standard da /libs/foundation/components/image nella cartella del componente Geometrixx, /apps/geometrixx/components, utilizzando l’immagine come nome del nodo di destinazione.

   

2. Modifica i metadati del componente:

   • Imposta jcr:title a Image (Extended)

3. Accedi a /apps/geometrixx/components/image/dialog/items/image.

4. Aggiungi una nuova proprietà:

   • Nome: allowUpload
   • Tipo: String
   • Valore: false

   

5. Fai clic su Salva tutto. Il componente è pronto per il test.

6. Apri una pagina in Geometrixx, ad esempio Inglese / Azienda.

7. Passa alla modalità di progettazione e attiva l'immagine (Extended).

8. Torna alla modalità di modifica e aggiungilo al sistema paragrafo. Nelle immagini successive, è possibile vedere le differenze tra il componente immagine originale e quello appena creato.

   Componente immagine originale:

   

   Il nuovo componente immagine:

   

9. Il componente è ora pronto per l’uso.

Risorse Business.Adobe.com

Style System Personalized Experiences Personalized Communications Web Content Management Content Management Digital Asset Management