Nozioni di base sui componenti

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.

Prerequisiti

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.

Obiettivo

Scopri il ruolo dei modelli HTL e dei modelli Sling per eseguire il rendering dinamico di HTML.
Scopri come le finestre di dialogo vengono utilizzate per facilitare l’authoring dei contenuti.
Scopri le nozioni di base delle librerie lato client per includere CSS e JavaScript per supportare un componente.

Cosa verrà creato

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.

Progetto iniziale capitolo

Questo capitolo si basa su un progetto generico generato dal Archetipo di progetto AEM. Guarda il video seguente e rivedi il prerequisiti per iniziare!

NOTA

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
```
NOTA

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
```
NOTA

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.

Authoring di componenti

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.

Crea una nuova pagina denominata Nozioni di base sui componenti sotto Sito WKND > US > en.
Aggiungi il Componente "Hello World" alla pagina appena creata.
Apri la finestra di dialogo del componente e immetti del testo. Salva le modifiche per visualizzare il messaggio sulla pagina.
Passa alla modalità sviluppatore e visualizza il percorso del contenuto in CRXDE-Lite ed esamina le proprietà dell'istanza del componente.
Utilizza CRXDE-Lite per visualizzare il cq:dialog e helloworld.html script situato in /apps/wknd/components/content/helloworld.

HTL (HTML Template Language) e finestre di dialogo

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.

Modelli Sling

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
```
NOTA

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

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!

Congratulazioni, hai appena imparato le basi dello sviluppo dei componenti in Adobe Experience Manager!

Passaggi successivi

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.

Funzione di ricerca nuova e migliorata

Nozioni di base sui componenti

Prerequisiti

Obiettivo

Cosa verrà creato

Progetto iniziale capitolo

Authoring di componenti

HTL (HTML Template Language) e finestre di dialogo

Modelli Sling

Librerie lato client

Congratulazioni!

Passaggi successivi

Risorse su adobe.com

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe