Sviluppo di componenti AEM (interfaccia classica) developing-aem-components-classic-ui

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

Modifica la jcr:title per riflettere il nuovo nome.

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.

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)

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

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.

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

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.

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.

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

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.

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

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ì:

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.

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ì:

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"><%

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

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.

Modifica i metadati del componente:

• Imposta jcr:title a Image (Extended)

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

Aggiungi una nuova proprietà:

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

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

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

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

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:

Il componente è ora pronto per l’uso.