Creare un widget CQ che supporti il drag and drop delle immagini

Cerca

Ultimo aggiornamento il 3 mag 2021

Riassunto dell'articolo

Riepilogo	Illustra come sviluppare un componente CQ che il sistema parsys utilizza. Il componente supporta una finestra di dialogo con più schede, supporta un'immagine e si aggancia alle funzionalità offerte dal Content Finder.
Soluzione/i di marketing digitale	Adobe Experience Manager (Adobe CQ)
Pubblico	Sviluppatore (intermedio)
Competenze richieste	Javascript, JCR, Sling
Testato su	Adobe CQ 5.5

È possibile creare un componente AEM che gestisca il testo e un'immagine. Inoltre, il componente che si impara a creare in questo articolo ha una finestra di dialogo CQ che consente all'utente di selezionare un'immagine durante la progettazione.

Un widget AEM che permette all'autore di selezionare un'immagine durante la progettazione

Quando l'utente seleziona un'immagine, questa viene visualizzata nel widget.

Un'immagine viene visualizzata nel widget AEM

In questo articolo, l'immagine è modificabile da un autore di contenuti e può essere trascinata dal Content Finder.

Per questo articolo, l'immagine:

È un Dialog Widget (xtype di smartimage).
Deve essere configurato nella configurazione cq:editConfig del componente per consentire il trascinamento delle immagini dal Content Finder, come mostrato in questa figura.

Il componente supporta il trascinamento dal Content Finder di CQ

Il rich text:

1. È un Dialog Widget (xtype di richtext).
2. Il widget abilita tutte le caratteristiche della tabella dei plug-in per l'editing del rich text.
3. Il widget ha un testo predefinito.

Il percorso di una pagina:

1. È un Design Dialog Widget, molto probabilmente un xtype di completamento del percorso.
2. Il widget dovrebbe avere proprietà regex con un'espressione regolare che convalidi l'input dell'utente (per esempio, "/^\/content\/training\/(.)*$/").
3. Il widget dovrebbe avere la proprietà regexText con un messaggio di errore se l'espressione regolare non funziona.

Creare una struttura di cartelle dell'applicazione CQ

Crea una struttura di cartelle dell'applicazione Adobe CQ che contiene modelli, componenti e pagine utilizzando CRXDE Lite.

Una struttura di cartelle dell'applicazione CQ

Di seguito sono descritte le cartelle delle applicazioni:

nome dell'applicazione: contiene tutte le risorse utilizzate da un'applicazione. Le risorse possono essere modelli, pagine, componenti e così via.
componenti: contiene i componenti utilizzati dall'applicazione.
pagina: contiene i componenti della pagina. Un componente di pagina è uno script come un file JSP.
global: contiene i componenti globali utilizzati dall'applicazione.
template: contiene i modelli su cui si basano i componenti della pagina.
src: contiene il codice sorgente che comprende un componente OSGi (questo articolo di sviluppo non crea un bundle OSGi usando questa cartella).
install: contiene un contenitore di bundle OSGi compilato.

Per creare una struttura di cartelle di un'applicazione:

1. Per visualizzare la pagina di benvenuto di CQ, inserisci l'URL http://[nome host]:[porta] in un browser web. Ad esempio, http://localhost:4502.

2. Seleziona CRXDE Lite.

3. Fai clic con il pulsante destro del mouse sulla cartella delle applicazioni (o sulla cartella principale), seleziona Crea, Crea cartella.

4. Immetti il nome della cartella nella finestra di dialogo Crea cartella. Inserisci imagecomponent.

5. Ripeti i punti 1-4 per ciascuna cartella specificata nell'illustrazione precedente.

6. Fai clic sul pulsante Salva tutto.

Nota:

È necessario fare clic sul pulsante Salva tutto quando si lavora in CRXDELite per apportare le modifiche.

Creare un modello

È possibile creare un modello utilizzando CRXDE Lite. Un modello CQ consente di definire uno stile coerente per le pagine della propria applicazione. Un template è composto da nodi che specificano la struttura della pagina. Per ulteriori informazioni sui template, consulta http://dev.day.com/docs/en/cq/current/developing/templates.html.

Per creare un template, esegui queste operazioni:
1. Per visualizzare la pagina di benvenuto di CQ, inserisci l'URL http://[nome host]:[porta] in un browser web. Ad esempio, http://localhost:4502.
2. Seleziona CRXDE Lite.
3. Fai clic con il pulsante destro del mouse sulla cartella template (all'interno dell'applicazione), seleziona Crea, Crea
template.
4. Immetti le seguenti informazioni nella finestra di dialogo Crea template:

Etichetta: il nome del template da creare. Inserisci templateImage.
Titolo: Il titolo che viene assegnato al template.
Descrizione: La descrizione che viene assegnata al template.
Tipo di risorsa: Il percorso del componente che viene assegnato al template e copiato nelle pagine di implementazione. Inserisci imagecomponent/components/page/templatelmage.
Ranking: L'ordine (ascendente) in cui questo modello apparirà in relazione ad altri modelli. Impostando questo valore a 1, il template appare per primo nell'elenco.

5. Aggiungi un percorso ai Percorsi consentiti. Fai clic sul segno + e inserisci il seguente valore: /content(/.*)?.
6. Fai clic su Avanti per i Genitori ammessi.
7. Seleziona OK su Bambini ammessi.

Crea il componente immagine

I componenti sono moduli riutilizzabili che implementano una logica applicativa specifica per il rendering del contenuto del tuo sito Web. Si può pensare ad un componente come un insieme di script (per esempio, JSP, Java servlets, e così via) che realizzano completamente una specifica funzione. Per realizzare questa funzionalità, è tua responsabilità come sviluppatore di CQ creare script che eseguono funzionalità specifiche. Per ulteriori informazioni sui componenti, consulta http://dev.day.com/docs/en/cq/current/developing/components.html.

Per impostazione predefinita, un componente ha almeno uno script predefinito, identico al nome del componente. Per creare un componente di rendering, eseguire questi task:
1. Per visualizzare la pagina di benvenuto di CQ, inserisci l'URL http://[nome host]:[porta] in un browser web. Ad esempio, http://localhost:4502.
2. Seleziona CRXDE Lite.
3. Fai clic con il tasto destro del mouse su /apps/imagecomponent/components/page, quindi seleziona
Crea, Crea componente.
4. Immetti le seguenti informazioni nella finestra di dialogo Crea componente:

Etichetta: il nome del componente da creare. Inserisci templateImage;
Titolo: Il titolo che viene assegnato al componente.
Descrizione: La descrizione che viene assegnata al template.

5. Seleziona Avanti per le impostazioni avanzate dei componenti e i Genitori ammessi.
6. Seleziona OK su Bambini ammessi.
7. Apri il templateImage.jsp situato in corrispondenza di: /apps/imagecomponent/components/page/templateImage/templateImage.jsp.

8. Inserisci il seguente codice JSP.

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>


<body>
<h1>Here is where the Component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Nota:

Questo è il componente della pagina in cui si aggiunge il componente immagine che si crea in questo articolo di sviluppo. La parte restante di questo articolo illustra come creare il componente che permette di utilizzare un'immagine.

Sviluppa il componente che supporta il drag and drop delle immagini

Ora creiamo il componente complesso che supporta tutti i requisiti elencati all'inizio di questo articolo. La seguente illustrazione mostra la struttura del componente creato in questa sezione.

La struttura del componente complesso che viene creato in questa sezione

Esegui queste operazioni utilizzando CRXDE:

1. Fai clic con il pulsante destro del mouse su /apps/imagecomponent/components e selezionare Nuovo, Componente.

2. Immetti le seguenti informazioni nella finestra di dialogo Crea componente:

Etichetta: il nome del componente da creare. Inserisci complesso.
Titolo: Il titolo che viene assegnato al componente. Inserisci Training Complex.
Descrizione: La descrizione che viene assegnata al template. Inserisci Complex Component.
Tipodi risorsa eccellente: Inserisci foundation/components/parbase.
Gruppo: Il gruppo nel sidekick dove appare il componente. Inserisci Training.
genitori ammessi: Inserisci */*parsys

3. Apri complex.jsp e inserisci il seguente codice JavaScript:

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.wcm.foundation.Image" %>
<%
// getting the image from the Dialog/resouce
// notice the use of the second parameter "image" -- this signifies that the
// image will live on a resource (called image) below the requested resource
Image image = new Image(resource, "image");
// setting the selector so that the "parbase" can work its magic
image.setSelector(".img");
// getting the rich text from the Dialog
String text = properties.get("text", "TEXT NA");
// getting the path from the Design Dialog
String path = currentStyle.get("path", "PATH NA");
%>
<h2><%= path %></h2>
<%= text %><br />
<%
image.draw(out);
%>

4. Aggiungi una finestra di dialogo al componente complesso. Seleziona /apps/imagecomponent/components/complex, fai clic con il tasto destro del mouse e seleziona Nuovo, Finestra di dialogo.

5. Crea un nodo di elementi (nodeType cq:WidgetCollection) sotto il nodo tab1 della
finestra di dialogo del componente.

6. Crea un nodo di testo (nodeType cq:Widget) sotto il nodo degli elementi appena creati.

7. Assegna le seguenti proprietà al nodo di testo appena creato:

Nome	Tipo	Valore	Descrizione
nome	String	./text	Definisce dove è memorizzato il contenuto.
xtype	String	RichText	Definisce il tipo di Widget
hideLabel	Boolean	true	Specifica di nascondere l'etichetta del Widget
defaultValue	String	Questo è il testo predefinito	Definisce il valore predefinito del testo.

8. Crea un nodo rtePlugins (nodeType nt: nonunstructured) sotto il nodo di testo appena creato
.

9. Crea un nodo tabella (nodeType nt:unstructured) sotto il nodo
rtePlugins appena creato.

10. Assegna la proprietà feature (Type = String, Value = *) al nodo tabella appena creato.

11. Copia i nodi tab2 e tab3 sotto il nodo /libs/foundation/components/textimage/dialog/items. Incolla nella finestra di dialogo del componente complesso in modo che siano un peer di tab1 (ad esempio, /apps/imagecomponent/components/complex/dialog/items/items).

La tab2 è la scheda smartimage e la tab3 è quella delle proprietà avanzate dell'immagine. Spesso è più efficiente copiare e incollare le finestre di dialogo e i widget esistenti che soddisfano le tue esigenze. Si raccomanda di rivedere e comprendere ciò che hai appena copiato per comprendere meglio il funzionamento interno di CQ.

Se lo esamini abbastanza da vicino, vedrai che il Widget memorizza effettivamente il contenuto relativo all'immagine ad un livello più profondo della risorsa corrente (per esempio,./image/file,./image/fileReference, ecc.). Questo corrisponde al codice in complex.jsp (Image image = new Image(resource, "image");).

12. Crea un nodo di elementi (nodeType cq:WidgetCollection) sotto il nodo tab1 della finestra di dialogo di progettazione del componente.

13. Crea un nodo di percorso (nodeType cq:Widget) sotto il nodo elementi .

14. Assegna le seguenti proprietà al nodo del percorso:

Nome	Tipo	Valore	Descrizione
nome	String	./path	Definisce dove è memorizzato il contenuto
xtype	String	pathfield	Definisce il tipo di Widget
fieldLabel	String	Inserisci un percorso	Definisce l'etichetta applicata al Widget
rootPath	String	/content/trainingSite	Definisce il percorso principale da visualizzare
regex	String	/^\/content\/trainingSite\/(.)*$/	Definisce l'espressione regolare usata per valutare l'input dell'utente
regexText	String	Inserisci una pagina sotto /content/trainingSite	Definisce il messaggio di errore se l'input di un utente non risolve l'espressione regolare

15. Copia il nodo /libs/foundation/components/textimage/cq:editConfig. Incolla al nodo principale del componente complesso ( /apps/imagecomponent/components/complex).

Questa azione consente di attivare le funzionalità di trascinamento dal Content Finder.

Per poter trascinare e rilasciare le risorse dal Content Finder ad un componente di una pagina, deve esserci un nodo di configurazione dei target di drop chiamato cq:dropTargets (di tipo nt:unstructured) sotto il nodo di configurazione di modifica (cq:editConfig) di un componente.

16. Usando CRXDE, apri questo percorso:

/apps/imagecomponent/components/complex/cq:editConfig/cq:dropTargets/image

Verifica che il nodo immagine abbia le seguenti proprietà:

accetta (Type = String) - i tipi di supporto da accettare (ad esempio image/.*, ecc.)
gruppi (Type = String) - i gruppi nelle risorse del Content Finder possono essere
accettati da (es. media)
propertyName (Type = String) - la proprietà che il riferimento deve memorizzare
(ad esempio./image/fileReference)

17. Passa al nodo parametri che è un figlio del nodo immagine. Cambia
il valore della proprietà sling:resourceType per avere il valore: training/
components/complex. La proprietà sling:resourceType
dovrebbe fare riferimento alla locazione per trovare uno script di rendering.

Creare una pagina web di CQ che utilizza il nuovo componente

Il compito finale è quello di creare un sito che contiene una pagina basata sul templateImage (il template creato in precedenza in questo articolo di sviluppo). Questa pagina CQ ti permetterà di selezionare il widget complesso che hai appena creato dal sidekick CQ, come mostrato nella seguente illustrazione.

Il sidekick CQ che mostra il componente Training Complex creato in questo articolo di sviluppo

1. Vai alla pagina di benvenuto di CQ all'indirizzo http://[host name]:[porta]; per esempio, http://localhost:4502.
Seleziona Siti web.

2. Dal riquadro a sinistra, seleziona siti Web.

3. Seleziona Nuova pagina.

4. Specifica il titolo della pagina nel campo Titolo.

5. Specifica il nome della pagina nel campo Nome.

6. Seleziona templateImage dall'elenco di template che appare. Questo valore rappresenta il template creato in questo articolo di sviluppo. Se non lo vedi, ripeti i passaggi di questo articolo di sviluppo. Ad esempio, se hai commesso un errore di digitazione durante l'immissione delle informazioni sul percorso, il template non verrà visualizzato nella finestra di dialogo Nuova pagina.

6. Apri la nuova pagina creata facendo doppio clic sul pannello di destra. La nuova pagina viene aperta in un browser Web.

7. Dal sidekick, fai clic sull'icona Design che si trova in basso.

8. Fai clic sul pulsante di modifica che appare.

Il pulsante Modifica che appare sulla pagina web di CQ

9. Dalla finestra di dialogo Modifica componente che appare, seleziona il componente in formazione come mostrato in questa illustrazione

Il componente CQ che viene creato in questo articolo di sviluppo

10. Fai clic su OK.

11. Ora il nuovo componente appare nel sidekick. Trascina il componente nella pagina Web. Ora vedrai il componente come mostrato all'inizio di questo articolo. Se non compare, assicurati di aver creato tutti i nodi e le proprietà create in questo articolo.

Adobe

Ottieni supporto in modo più facile e veloce

Nuovo utente?