In questo capitolo esploreremo la tecnologia di base di un componente Adobe Experience Manager (AEM) Sites attraverso un semplice HelloWorld
esempio. Verranno apportate piccole modifiche a un componente esistente, con argomenti relativi all’authoring, all’HTL, ai modelli Sling e alle librerie lato client.
Rivedere gli strumenti e le istruzioni necessari per la configurazione di un ambiente di sviluppo locale.
L’IDE utilizzata nei video è Codice di Visual Studio e Sincronizzazione AEM VSCode plugin.
In questo capitolo eseguirai diverse modifiche a un molto semplice HelloWorld
componente. Nel processo di aggiornamento della HelloWorld
informazioni sulle aree chiave dello sviluppo di AEM componente.
Questo capitolo si basa su un progetto generico generato dal Archetipo di progetto AEM. Guarda il video seguente e rivedi il prerequisiti per iniziare!
Se hai completato con successo il capitolo precedente, puoi riutilizzare il progetto e saltare i passaggi per il check-out del progetto iniziale.
Aprire un nuovo terminale della riga di comando ed eseguire le operazioni seguenti.
In una directory vuota, duplica il aem-guides-wknd archivio:
$ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
Facoltativamente, puoi continuare a utilizzare il progetto generato nel capitolo precedente, Configurazione del progetto.
Passa a aem-guides-wknd
cartella.
$ cd aem-guides-wknd
Crea e distribuisci il progetto in un’istanza locale di AEM con il seguente comando:
$ mvn clean install -PautoInstallSinglePackage
Se utilizzi AEM 6.5 o 6.4, aggiungi la variabile classic
su qualsiasi comando Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Importa il progetto nell’IDE preferito seguendo le istruzioni per impostare un ambiente di sviluppo locale.
I componenti possono essere considerati come piccoli blocchi modulari di una pagina web. Per riutilizzare i componenti, questi devono essere configurabili. Questa operazione viene eseguita tramite la finestra di dialogo di authoring. Ora creeremo un componente semplice ed esamineremo come i valori della finestra di dialogo vengono mantenuti in AEM.
Di seguito sono riportati i passaggi di alto livello eseguiti nel video precedente.
>
US >
en.cq:dialog
e helloworld.html
script situato in /apps/wknd/components/content/helloworld
.HTML Template Language o HTL è un linguaggio di template lato server leggero utilizzato dai componenti AEM per il rendering del contenuto.
Finestre di dialogo definiscono le configurazioni disponibili che possono essere rese per un componente.
Ora aggiorneremo il HelloWorld
Script HTL per visualizzare un messaggio di saluto aggiuntivo prima del messaggio di testo.
Di seguito sono riportati i passaggi di alto livello eseguiti nel video precedente.
Passa all’IDE e apri il progetto nel ui.apps
modulo .
Apri helloworld.html
e apportare una modifica al markup HTML.
Utilizza gli strumenti IDE come Sincronizzazione AEM VSCode per sincronizzare la modifica del file con l’istanza AEM locale.
Torna al browser e osserva che il rendering del componente è cambiato.
Apri .content.xml
file che definisce la finestra di dialogo per HelloWorld
in:
<code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
Aggiorna la finestra di dialogo per aggiungere un campo di testo aggiuntivo denominato Titolo con il nome ./title
:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Title"
name="./title"/>
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text"
name="./text"/>
</items>
</column>
</items>
</content>
</jcr:root>
Riaprire il file helloworld.html
, che rappresenta il principale script HTL responsabile del rendering del HelloWorld
componente, situato in:
<code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
Aggiorna helloworld.html
per eseguire il rendering del valore Saluto campo di testo come parte di un H1
tag:
<div class="cmp-helloworld" data-cmp-is="helloworld">
<h1 class="cmp-helloworld__title">${properties.title}</h1>
...
</div>
Distribuisci le modifiche in un’istanza locale di AEM utilizzando il plug-in per sviluppatori o le tue competenze Maven.
I modelli Sling sono Java "POJO" (Plain Old Java Objects) basati su annotazioni che facilitano la mappatura dei dati da JCR alle variabili Java e forniscono una serie di altri concetti quando si sviluppano nel contesto di AEM.
Successivamente, verranno apportati alcuni aggiornamenti al HelloWorldModel
Modello Sling per applicare una qualche logica di business ai valori memorizzati nel JCR prima di inviarli alla pagina.
Apri il file . HelloWorldModel.java
, che è il modello Sling utilizzato con il HelloWorld
componente.
<code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
Aggiungi le seguenti istruzioni di importazione:
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
Aggiorna @Model
per utilizzare un'annotazione DefaultInjectionStrategy
:
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {
...
Aggiungi le seguenti righe al HelloWorldModel
per mappare i valori delle proprietà JCR del componente title
e text
alle variabili Java:
...
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {
...
@ValueMapValue
private String title;
@ValueMapValue
private String text;
@PostConstruct
protected void init() {
...
Aggiungi il seguente metodo getTitle()
al HelloWorldModel
che restituisce il valore della proprietà denominata title
. Questo metodo aggiunge la logica aggiuntiva per restituire un valore String di "Valore predefinito qui!" se la proprietà title
è nullo o vuoto:
/***
*
* @return the value of title, if null or blank returns "Default Value here!"
*/
public String getTitle() {
return StringUtils.isNotBlank(title) ? title : "Default Value here!";
}
Aggiungi il seguente metodo getText()
al HelloWorldModel
che restituisce il valore della proprietà denominata text
. Questo metodo trasforma la stringa in tutti i caratteri maiuscoli.
/***
*
* @return All caps variation of the text value
*/
public String getText() {
return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null;
}
Crea e distribuisci il bundle dal core
modulo:
$ cd core
$ mvn clean install -PautoInstallBundle
Se utilizzi AEM 6.4/6.5, utilizza mvn clean install -PautoInstallBundle -Pclassic
Aggiornare il file helloworld.html
a aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html
per utilizzare i nuovi metodi di HelloWorld
modello:
<div class="cmp-helloworld" data-cmp-is="helloworld"
data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel">
<h1 class="cmp-helloworld__title">${model.title}</h1>
<div class="cmp-helloworld__item" data-sly-test="${properties.text}">
<p class="cmp-helloworld__item-label">Text property:</p>
<pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre>
</div>
<div class="cmp-helloworld__item" data-sly-test="${model.text}">
<p class="cmp-helloworld__item-label">Sling Model getText() property:</p>
<pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre>
</div>
<div class="cmp-helloworld__item" data-sly-test="${model.message}">
<p class="cmp-helloworld__item-label">Model message:</p>
<pre class="cmp-helloworld__item-output"data-cmp-hook-helloworld="model">${model.message}</pre>
</div>
</div>
Distribuisci le modifiche in un'istanza locale di AEM utilizzando il plugin Eclipse Developer o utilizzando le tue competenze Maven.
Librerie lato client, clientlibs in breve, offre un meccanismo per organizzare e gestire i file CSS e JavaScript necessari per un’implementazione AEM Sites. Le librerie lato client sono il metodo standard per includere CSS e JavaScript in una pagina in AEM.
La ui.frontend modulo disaccoppiato webpack progetto integrato nel processo di creazione. Questo consente l’utilizzo di librerie front-end popolari come Sass, LESS e TypeScript. La ui.frontend
Il modulo verrà esplorato più approfonditamente nella sezione Capitolo Librerie lato client.
Quindi, aggiorna gli stili CSS per HelloWorld
componente.
Di seguito sono riportati i passaggi di alto livello eseguiti nel video precedente.
Apri una finestra terminale e naviga nella ui.frontend
directory e
In ui.frontend
eseguire la directory npm run watch
comando:
$ npm run watch
Passa all’IDE e apri il progetto nel ui.frontend
modulo .
Aprire il file ui.frontend/src/main/webpack/components/_helloworld.scss
.
Aggiorna il file per visualizzare un titolo rosso:
.cmp-helloworld {}
.cmp-helloworld__title {
color: red;
}
Nel terminale dovrebbe essere visualizzata un'attività che indica che il ui.frontend
il modulo sta compilando e sincronizzando le modifiche con l'istanza locale di AEM.
Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB
2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms
change:dist/index.html
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
Torna al browser e osserva che il colore del titolo è cambiato.
Congratulazioni, hai appena imparato le basi dello sviluppo dei componenti in Adobe Experience Manager!
Acquisisci familiarità con le pagine e i modelli di Adobe Experience Manager nel capitolo successivo Pagine e modelli. Scopri in che modo i componenti core vengono associati al progetto e apprendi configurazioni di policy avanzate di modelli modificabili per creare un modello Pagina articoli ben strutturato.
Visualizza il codice finito su GitHub o rivedi e distribuisci il codice localmente nel ramo Git tutorial/component-basics-solution
.