Mappare i componenti dell’SPA ai componenti dell’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

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

$ mvn clean install -PautoInstallSinglePackage

Se si utilizza AEM 6.x aggiungi classic profilo:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Prima di passare al codice SPA, è importante comprendere il modello JSON fornito dall’AEM. Accedi a Libreria dei componenti core e visualizzare la pagina del componente Testo. La libreria dei componenti core fornisce esempi di tutti i componenti core dell’AEM.

Seleziona la JSON per uno degli esempi:

Dovresti vedere tre proprietà: text, richText, e :type.

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

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

Apri un nuovo terminale e passa a ui.frontend all'interno del progetto. Esegui npm install e poi npm start per avviare server di sviluppo webpack:

$ cd ui.frontend
$ npm run start:mock

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

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

Nell’IDE che preferisci, apri il progetto AEM per l’SPA WKND. Espandi ui.frontend e aprire il file text.component.ts in ui.frontend/src/app/components/text/text.component.ts:

La prima area da esaminare è 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 un testo RTF (determinato dal this.richText flag) La sicurezza integrata dell’Angular viene ignorata. Angular Strumento di pulizia viene utilizzato per "scorrere" il HTML non elaborato e impedire vulnerabilità cross-site scripting. Il metodo è associato al innerHtml proprietà utilizzando @HostBinding decoratore.

Ispezionare quindi TextEditConfig a ~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 dell’AEM. Se il isEmpty restituisce il metodo true quindi viene eseguito il rendering del segnaposto.

Infine, dai un'occhiata al MapTo chiama alla riga 53:

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

MapTo viene fornito dall’SDK JS dell’Editor SPA dell’AEM (@adobe/cq-angular-editable-components). Il percorso wknd-spa-angular/components/text rappresenta il sling:resourceType della componente AEM. Questo percorso viene abbinato al :type esposti dal modello JSON osservato in precedenza. MapTo analizza la risposta del modello JSON e trasmette i valori corretti al @Input() variabili della componente SPA.

Potete trovare l'AEM Text definizione del componente in ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.

Sperimenta modificando il en.model.json file in ui.frontend/src/mocks/json/en.model.json.

Alla ~riga 62 aggiorna il primo Text valore da utilizzare H1 e u tag:

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

Torna al browser per visualizzare gli effetti prodotti da server di sviluppo webpack:

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

Inspect text.component.html a ui.frontend/src/app/components/text/text.component.html.

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

Inspect app.module.ts a 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 {}

Il TextComponent non è incluso esplicitamente, ma piuttosto in modo dinamico tramite AEMResponsiveGridComponent fornite dall’SDK JS dell’editor SPA dell’AEM. Pertanto deve essere elencato nella sezione app.module.ts' entryComponents array.

Accedi a Esempi di immagini nella libreria dei componenti core.

Proprietà di src, alt, e title sono utilizzati per popolare l’SPA Image componente.

Torna all’IDE e apri la en.model.json a 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 aggiungi una voce JSON per il image modello (non dimenticare la virgola finale) , dopo il secondo text_386303036) e aggiorna il :itemsOrder array.

...
":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 utilizzato con server di sviluppo webpack.

È possibile visualizzare en.model.json qui.

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

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

Interrompi server di sviluppo webpack se avviato.

Creare un nuovo componente Immagine eseguendo l’interfaccia della riga di comando Angular ng generate component comando da ui.frontend cartella:

$ ng generate component components/image

Nell’IDE, apri image.component.ts a ui.frontend/src/app/components/image/image.component.ts e aggiornare 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 di authoring in AEM, in base al src La proprietà è compilata.

@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 mappa il componente SPA sul componente AEM che si trova all’indirizzo ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

Apri image.component.html e aggiornarla come segue:

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

Verrà eseguito il rendering del <img> elemento if hasImage restituisce true.

Apri image.component.scss e aggiornarla come segue:

:host-context {
    display: block;
}

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

Apri app.module.ts e aggiungi ImageComponent al entryComponents array:

entryComponents: [TextComponent, PageComponent, ImageComponent],

Mi piace TextComponent, il ImageComponent viene caricato in modo dinamico e deve essere incluso nel entryComponents array.

Avvia il server di sviluppo webpack per visualizzare ImageComponent rendering.

$ npm run start:mock

Immagine aggiunta all'SPA

Interrompi server di sviluppo webpack e dal radice del progetto, implementa le modifiche all’AEM utilizzando le tue competenze Maven:

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

Dalla schermata iniziale dell’AEM, vai a Strumenti > Modelli > WKND ANGULAR SPA.

Seleziona e modifica il Pagina SPA:

Seleziona la Contenitore di layout e fai clic su policy per modificare il criterio:

Sotto Componenti consentiti > Angular WKND SPA - Contenuto > controllare la Immagine componente:

Sotto Componenti predefiniti > Aggiungi mappatura e scegli la Immagine - Angular WKND SPA - Contenuto componente:

Immetti un tipo mime di image/*.

Clic Fine per salvare gli aggiornamenti dei criteri.

In Contenitore di layout fai clic su policy icona per Testo componente:

Crea un nuovo criterio denominato Testo WKND SPA. Sotto Plug-in > Formattazione > seleziona tutte le caselle per abilitare opzioni di formattazione aggiuntive:

Sotto Plug-in > Stili paragrafo > seleziona la casella per Abilita stili di paragrafo:

Clic Fine per salvare l'aggiornamento del criterio.

Accedi a Homepage http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

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

Dovresti anche poter trascinare e rilasciare un’immagine dalla Asset Finder:

Aggiungi le tue immagini tramite AEM Assets o installare la base di codice completata per lo standard Sito di riferimento WKND. Il Sito di riferimento WKND include molte immagini che possono essere riutilizzate sull’SPA WKND. Il pacchetto può essere installato utilizzando Gestione pacchetti AEM.

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

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

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

Il AEMResponsiveGridComponent è implementato come parte dell’SDK dell’SPA Editor dell’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 Contenitore di layout il componente ha sling:resourceType di wcm/foundation/components/responsivegrid ed è riconosciuto dall'editor SPA utilizzando :type proprietà, proprio come Text e Image componenti.

Le stesse funzionalità di ridimensionamento di un componente mediante Modalità Layout sono disponibili con l’editor SPA.

Torna a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Aggiungi ulteriori Immagine e provare a ridimensionarli utilizzando Layout opzione:

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

Il nome della classe aem-GridColumn--default--4 indica che il componente deve avere una larghezza di 4 colonne in base a una griglia a 12 colonne. Maggiori dettagli su la griglia reattiva si trova qui.

Torna all’IDE e nella 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 less/grid.less.

Questo file determina i punti di interruzione (default, tablet, e phone) utilizzato da 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 di Text per creare una visualizzazione simile alla seguente:

Nell'IDE di Visual Studio Code verificare di avere Sincronizzazione AEM VSCode installato tramite l’estensione Marketplace:

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

Clic con il pulsante destro il templates cartella e seleziona Importa da server AEM:

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

Inspect filter.xml file 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 filter.xml Il file è responsabile dell’identificazione dei percorsi dei nodi installati con il pacchetto. Osserva mode="merge" in ciascuno dei filtri che indica che il contenuto esistente non verrà modificato, viene aggiunto solo il nuovo contenuto. Poiché gli autori dei contenuti potrebbero aggiornare questi percorsi, è importante che una distribuzione del codice non sovrascrivi il contenuto. Consulta la Documentazione di FileVault per ulteriori dettagli sull’utilizzo degli elementi filtro.

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.