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

Utilizzando CRXDE Lite, crea una 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

Modificare jcr:title in modo che rifletta il nuovo nome.

Apri la nuova cartella dei componenti e apporta le modifiche necessarie. Elimina inoltre eventuali informazioni estranee nella cartella.

Puoi apportare modifiche quali:

• aggiunta di un campo nella finestra di dialogo

  • cq:dialog - finestra di dialogo per l'interfaccia touch
  • dialog - finestra di dialogo per l'interfaccia classica

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

• o rielaborazione completa dell'intero componente, se si desidera

Ad esempio, se si crea una copia del componente Testo standard, è possibile aggiungere un campo aggiuntivo alla finestra di dialogo, quindi aggiornare .jsp per elaborare l'input effettuato.

Affinché il nuovo componente venga visualizzato, è necessario che sia presente e inizializzato correttamente uno dei seguenti nodi:

• 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 della selezione)
• design_dialog - finestra di dialogo per la modalità 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 proprietà del nodo /etc/designs/geometrixx/jcr:content/contentpage/par
• seguendo le istruzioni in Aggiunta di nuovi componenti ai sistemi paragrafo

In WCM per AEM, apri una pagina del sito web e inserisci un paragrafo del tipo creato per assicurarti che il componente funzioni correttamente.

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

Passa alla modalità Progettazione in uno dei modi seguenti:

• aggiungere ?wcmmode=design alla fine dell'URL e accedere di nuovo, ad esempio:

  <contextPath>/ Test.html?wcmmode=design

• clic su Progettazione nel Sidekick

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

Fai clic su Modifica.

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

I componenti possono essere attivati (o disattivati) per determinare quali sono 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.

Copiare il componente textimage standard da /libs/foundation/components/textimage nella cartella del componente Geometrixx, /apps/geometrixx/components, utilizzando textimage come nome del nodo di destinazione. Per copiare il componente, fai clic con il pulsante destro del mouse sul componente e seleziona Copia, quindi individua la directory di destinazione.

Per mantenere semplice questo esempio, passa al componente copiato ed elimina tutti i sottonodi del nuovo nodo textimage ad eccezione dei seguenti:

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

Modifica i metadati del componente:

• Nome componente

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

• Gruppo, in cui il componente è elencato nella barra laterale (lascia invariato)

  • Lascia componentGroup impostato su General

• Componente padre del nuovo componente (il componente textimage standard)

  • Imposta sling:resourceSuperType su foundation/components/textimage

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

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

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

Modificate la finestra di dialogo del componente per includere la nuova opzione. Il nuovo componente eredita le parti della finestra di dialogo che sono identiche a quelle dell'originale. L'unica aggiunta è quella di estendere la scheda Avanzate, aggiungendo un elenco a discesa Posizione immagine, con le opzioni Sinistra e Destra:

• Lascia invariate le proprietà textimage/dialog.

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

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

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

• Per tab3:

  • Lascia le proprietà e i sottonodi senza modifiche

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

  • Impostare le seguenti proprietà (di tipo String) per il nuovo nodo tab3/items/position:

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

  • Aggiungere il sottonodo 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 il nodo position/options/o1 impostare le proprietà: text su Left e value su left.

  • Per il nodo position/options/o2 impostare le proprietà: text su Right e value su right.

• Elimina scheda4.

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

Estendere lo script del componente, textimage.jsp, con una gestione aggiuntiva del nuovo parametro:

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

Stai per sostituire il frammento di codice evidenziato %><div class="image"><% con un 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 nel repository. Il componente è pronto per il test.

Copiare 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 su Image (Extended)

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

Aggiungi una proprietà:

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

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

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

Passa alla modalità progettazione e attiva Immagine (estesa).

Tornate alla modalità di modifica e aggiungetela al sistema paragrafo. Nelle immagini successive puoi vedere le differenze tra il componente immagine originale e quello creato.

Componente immagine originale:

Nuovo componente immagine:

Il componente è ora pronto per l’uso.