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

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

Prima di passare al codice SPA, è importante comprendere il modello JSON fornito da AEM. Passa alla libreria dei componenti core e visualizza la pagina per il componente Testo. 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.

NOTE

Sono esposte altre proprietà Image (lazyEnabled, widths) che consentono a uno sviluppatore di creare un componente adattivo e a caricamento lento. Il componente creato in questa esercitazione è semplice e non utilizza queste proprietà avanzate.

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;
}

NOTE

La regola :host-context è critica perché il segnaposto dell'editor SPA di AEM funzioni correttamente. Questa regola è necessaria almeno per tutti i componenti SPA destinati a essere creati nell’editor di pagine di AEM.

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.

Avvia il server di sviluppo webpack per visualizzare il rendering ImageComponent.

$ npm run start:mock

Immagine aggiunta all'applicazione a pagina singola

NOTE

Richiesta bonus: implementa un nuovo metodo per visualizzare il valore di title come didascalia sotto l'immagine.

Arresta il server di sviluppo Webpack e dalla radice del progetto, distribuisci le modifiche in AEM utilizzando le abilità Maven:

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

Dalla schermata iniziale di AEM, passa a Strumenti > Modelli > Angular SPA WKND.

Seleziona e modifica la pagina SPA:

Seleziona il Contenitore di layout e fai clic sulla relativa icona criterio per modificare il criterio:

In Componenti consentiti > Angular SPA WKND - Contenuto > controlla il componente Immagine:

In Componenti predefiniti > Aggiungi mappatura e scegli il componente Immagine - Angular SPA WKND - Contenuto:

Immetti un tipo mime di image/*.

Fai clic su Fine per salvare gli aggiornamenti dei criteri.

Nel Contenitore di layout fare clic sull'icona criterio per il componente Testo:

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

In Plug-in > Stili di paragrafo > seleziona la casella per Abilitare gli stili di paragrafo:

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 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. Aprire il file 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: