Mappare i componenti dell’applicazione a pagina singola ai componenti di AEM map-components

Scarica il punto di partenza per questa esercitazione tramite Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/map-components-start

Implementa la base di codice in un’istanza AEM locale utilizzando Maven:

$ mvn clean install -PautoInstallSinglePackage

Se utilizzi AEM 6.x, aggiungi il profilo classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Before jumping into the SPA code, it is important to understand the JSON model that AEM provides. Navigate to the Core Component Library and view the page for the Text component. La libreria dei componenti core fornisce esempi di tutti i componenti core di AEM.

Selezionare la scheda JSON per uno degli esempi:

Dovrebbero essere visualizzate tre proprietà: text, richText e :type.

:type è una proprietà riservata che elenca sling:resourceType (o percorso) del componente AEM. Il valore di :type è ciò che viene utilizzato per mappare il componente AEM al componente SPA.

text e richText sono proprietà aggiuntive esposte al componente SPA.

Aprire un nuovo terminale e passare alla cartella ui.frontend all'interno del progetto. Eseguire npm install e quindi npm start per avviare il server di sviluppo Webpack:

$ cd ui.frontend
$ npm run start:mock

Il modulo ui.frontend è attualmente configurato per utilizzare il modello JSON fittizio.

Dovresti visualizzare una nuova finestra del browser aperta per http://localhost:4200/content/wknd-spa-angular/us/en/home.html

Nell’IDE che preferisci, apri il progetto AEM per l’applicazione a pagina singola WKND. Espandere il modulo ui.frontend e aprire il file text.component.ts in ui.frontend/src/app/components/text/text.component.ts:

La prima area da ispezionare è class TextComponent a ~riga 35:

export class TextComponent {
    @Input() richText: boolean;
    @Input() text: string;
    @Input() itemName: string;

    @HostBinding('innerHtml') get content() {
        return this.richText
        ? this.sanitizer.bypassSecurityTrustHtml(this.text)
        : this.text;
    }
    @HostBinding('attr.data-rte-editelement') editAttribute = true;

    constructor(private sanitizer: DomSanitizer) {}
}

@Input() decorator viene utilizzato per dichiarare i campi i cui valori sono impostati tramite l'oggetto JSON mappato, rivisto in precedenza.

@HostBinding('innerHtml') get content() è un metodo che espone il contenuto del testo creato dal valore di this.text. Nel caso in cui il contenuto sia in formato Rich Text (determinato dal flag this.richText), la sicurezza integrata di Angular viene ignorata. DomSanitizer di Angular viene utilizzato per "scorrere" il HTML non elaborato e impedire vulnerabilità cross-site scripting. Il metodo è associato alla proprietà innerHtml utilizzando il decoratore @HostBinding.

Ispeziona TextEditConfig alla riga 24:

const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.text.trim().length < 1
};

Il codice di cui sopra è responsabile di determinare quando eseguire il rendering del segnaposto nell’ambiente di authoring di AEM. Se il metodo isEmpty restituisce true, viene eseguito il rendering del segnaposto.

Infine, dare un'occhiata alla chiamata MapTo a ~riga 53:

MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );

MapTo è fornito da AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components). Il percorso wknd-spa-angular/components/text rappresenta sling:resourceType del componente AEM. Questo percorso viene confrontato con :type esposto dal modello JSON osservato in precedenza. MapTo analizza la risposta del modello JSON e trasmette i valori corretti alle variabili @Input() del componente SPA.

La definizione del componente AEM Text è disponibile in ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.

Prova a modificare il file en.model.json in ui.frontend/src/mocks/json/en.model.json.

Alla ~riga 62 aggiornare il primo valore Text per utilizzare un tag H1 e u:

    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }

Torna al browser per visualizzare gli effetti gestiti dal server di sviluppo webpack:

Prova a impostare la proprietà richText tra true / false per visualizzare la logica di rendering in azione.

Esaminare text.component.html in ui.frontend/src/app/components/text/text.component.html.

Questo file è vuoto perché l'intero contenuto del componente è impostato dalla proprietà innerHTML.

Controlla app.module.ts in ui.frontend/src/app/app.module.ts.

@NgModule({
imports: [
    BrowserModule,
    SpaAngularEditableComponentsModule,
    AppRoutingModule
],
providers: [ModelManagerService, { provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent, TextComponent, PageComponent, HeaderComponent],
entryComponents: [TextComponent, PageComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

TextComponent non è incluso in modo esplicito, ma in modo dinamico tramite AEMResponsiveGridComponent fornito da AEM SPA Editor JS SDK. Pertanto deve essere elencato nell'array app.module.ts' entryComponents.

Passa a Esempi di immagini nella libreria dei componenti core.

Le proprietà di src, alt e title sono utilizzate per popolare il componente SPA Image.

Torna all'IDE e apri en.model.json alle ui.frontend/src/mocks/json/en.model.json. Poiché si tratta di un componente nuovo per il nostro progetto, dobbiamo "simulare" il JSON dell’immagine.

Alla ~riga 70 aggiungere una voce JSON per il modello image (non dimenticare la virgola finale , dopo il secondo text_386303036) e aggiornare l'array :itemsOrder.

...
":items": {
            ...
            "text_386303036": {
                "text": "<p>A new text component.</p>\r\n",
                "richText": true,
                ":type": "wknd-spa-angular/components/text"
                },
            "image": {
                "alt": "Rock Climber in New Zealand",
                "title": "Rock Climber in New Zealand",
                "src": "/mocks/images/adobestock-140634652.jpeg",
                ":type": "wknd-spa-angular/components/image"
            }
        },
        ":itemsOrder": [
            "text",
            "text_386303036",
            "image"
        ],

Il progetto include un'immagine di esempio in /mock-content/adobestock-140634652.jpeg utilizzata con il server di sviluppo Webpack.

Puoi visualizzare il en.model.json completo qui.

Aggiungete una foto d'archivio che verrà visualizzata dal componente.

Crea una nuova cartella denominata images sotto ui.frontend/src/mocks. Scarica adobestock-140634652.jpeg e inseriscilo nella cartella images appena creata. Se lo desideri, puoi usare la tua immagine personale.

Arrestare il server di sviluppo webpack se avviato.

Creare un nuovo componente Immagine eseguendo il comando Angular CLI ng generate component dalla cartella ui.frontend:

$ ng generate component components/image

Nell'IDE, apri image.component.ts in ui.frontend/src/app/components/image/image.component.ts e aggiorna come segue:

import {Component, Input, OnInit} from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: cqModel =>
    !cqModel || !cqModel.src || cqModel.src.trim().length < 1
};

@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {

@Input() src: string;
@Input() alt: string;
@Input() title: string;

constructor() { }

get hasImage() {
    return this.src && this.src.trim().length > 0;
}

ngOnInit() { }
}

MapTo('wknd-spa-angular/components/image')(ImageComponent, ImageEditConfig);

ImageEditConfig è la configurazione per determinare se eseguire il rendering del segnaposto autore in AEM, in base al popolamento della proprietà src.

@Input() di src, alt e title sono le proprietà mappate dall'API JSON.

hasImage() è un metodo che determinerà se l'immagine deve essere sottoposta a rendering.

MapTo associa il componente SPA al componente AEM situato in ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

Apri image.component.html e aggiornalo come segue:

<ng-container *ngIf="hasImage">
    <img class="image" [src]="src" [alt]="alt" [title]="title"/>
</ng-container>

L'elemento <img> verrà eseguito se hasImage restituisce true.

Apri image.component.scss e aggiornalo come segue:

:host-context {
    display: block;
}

.image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Apri app.module.ts e aggiungi ImageComponent all'array entryComponents:

entryComponents: [TextComponent, PageComponent, ImageComponent],

Come TextComponent, ImageComponent è caricato in modo dinamico e deve essere incluso nell'array entryComponents.

Start the webpack dev server to see the ImageComponent render.

$ npm run start:mock

Image added to the SPA

Stop the webpack dev server and from the root of the project, deploy the changes to AEM using your Maven skills:

$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage

From the AEM Start screen navigate to Tools > Templates > WKND SPA Angular.

Select and edit the SPA Page:

Select the Layout Container and click it's policy icon to edit the policy:

Under Allowed Components > WKND SPA Angular - Content > check the Image component:

Under Default Components > Add mapping and choose the Image - WKND SPA Angular - Content component:

Enter a mime type of image/*.

Click Done to save the policy updates.

In the Layout Container click the policy icon for the Text component:

Create a new policy named WKND SPA Text. Under Plugins > Formatting > check all the boxes to enable additional formatting options:

Under Plugins > Paragraph Styles > check the box to Enable paragraph styles:

Fai clic su Fine per salvare l'aggiornamento dei criteri.

Passa alla home page http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

Dovresti anche poter modificare il componente Text e aggiungere altri stili di paragrafo in modalità schermo intero.

Dovresti anche essere in grado di trascinare e rilasciare un'immagine da Asset Finder:

Aggiungi le tue immagini tramite AEM Assets o installa la base di codice completata per il sito di riferimento WKND standard. Il sito di riferimento WKND include molte immagini che possono essere riutilizzate nell'applicazione a pagina singola WKND. È possibile installare il pacchetto utilizzando Gestione pacchetti di AEM.

Nell'IDE, apri responsive-grid.component.ts alle ui.frontend/src/app/components/responsive-grid:

import { AEMResponsiveGridComponent,MapTo } from '@adobe/cq-angular-editable-components';

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);

AEMResponsiveGridComponent è implementato come parte del SDK dell'Editor SPA di AEM ed è incluso nel progetto tramite import-components.

In un browser passa a http://localhost:4502/content/wknd-spa-angular/us/en.model.json

Il componente Contenitore di layout ha sling:resourceType di wcm/foundation/components/responsivegrid ed è riconosciuto dall'editor SPA tramite la proprietà :type, proprio come i componenti Text e Image.

Le stesse funzionalità di ridimensionamento di un componente mediante la modalità Layout sono disponibili con l'editor SPA.

Torna a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Aggiungi altri componenti Immagine e prova a ridimensionarli utilizzando l'opzione Layout:

Riapri il modello JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.json e osserva columnClassNames come parte del codice JSON:

Il nome di classe aem-GridColumn--default--4 indica che il componente deve avere una larghezza di 4 colonne in base a una griglia a 12 colonne. Ulteriori dettagli sulla griglia reattiva sono disponibili qui.

Tornare all'IDE e nel modulo ui.apps è presente una libreria lato client definita in ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid. Apri il file in less/grid.less.

Questo file determina i punti di interruzione (default, tablet e phone) utilizzati dal Contenitore di layout. Questo file è stato progettato per essere personalizzato in base alle specifiche del progetto. Attualmente i punti di interruzione sono impostati su 1200px e 650px.

Dovresti essere in grado di utilizzare le funzionalità reattive e i criteri Rich Text aggiornati del componente Text per creare una visualizzazione simile alla seguente:

Nell'IDE di Visual Studio Code verificare che sia installato VSCode AEM Sync tramite l'estensione Marketplace:

Espandi il modulo ui.content in Esplora progetti e passa a /conf/wknd-spa-angular/settings/wcm/templates.

Fai clic con il pulsante destro del mouse sulla cartella templates e seleziona Importa da AEM Server:

Ripeti i passaggi per importare il contenuto, ma seleziona la cartella criteri che si trova in /conf/wknd-spa-angular/settings/wcm/policies.

Controllare il file filter.xml che si trova in ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-angular" mode="merge"/>
     <filter root="/content/wknd-spa-angular" mode="merge"/>
     <filter root="/content/dam/wknd-spa-angular" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-angular" mode="merge"/>
 </workspaceFilter>

Il file filter.xml è responsabile dell'identificazione dei percorsi dei nodi installati con il pacchetto. Osserva mode="merge" su ciascuno dei filtri che indica che il contenuto esistente non verrà modificato, ma che verrà aggiunto solo il nuovo contenuto. Poiché gli autori di contenuto potrebbero aggiornare questi percorsi, è importante che una distribuzione del codice non sovrascriva il contenuto. Per ulteriori informazioni sull'utilizzo degli elementi del filtro, consulta la documentazione di FileVault.

Confronta ui.content/src/main/content/META-INF/vault/filter.xml e ui.apps/src/main/content/META-INF/vault/filter.xml per comprendere i diversi nodi gestiti da ciascun modulo.