Mappatura di componenti SPA per AEM componenti

Scopri come mappare i componenti di Angular ai componenti di Adobe Experience Manager (AEM) con l’SDK JS dell’editor di SPA AEM. La mappatura dei componenti consente agli utenti di apportare aggiornamenti dinamici ai componenti SPA all’interno dell’editor di SPA AEM, in modo simile all’authoring tradizionale AEM.

Questo capitolo descrive in modo più approfondito l’API del modello JSON AEM e come il contenuto JSON esposto da un componente AEM può essere inserito automaticamente in un componente Angular come proprietà.

Obiettivo

  1. Scopri come mappare AEM componenti su SPA componenti.
  2. Comprendi la differenza tra i componenti Contenitore e i componenti Contenuto.
  3. Crea un nuovo componente Angular associato a un componente AEM esistente.

Cosa verrà creato

Questo capitolo analizzerà come il componente Text SPA fornito viene mappato sul componente AEM Text. Verrà creato un nuovo componente Image SPA che può essere utilizzato nel SPA e creato in AEM. Le funzioni predefinite dei criteri Contenitore di layout e Editor modelli verranno utilizzate anche per creare una visualizzazione con aspetto leggermente più vario.

Esempio di capitolo di authoring finale

Prerequisiti

Rivedi gli strumenti e le istruzioni necessari per configurare un ambiente di sviluppo locale.

Ottieni il codice

  1. 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
    
  2. Distribuisci 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
    

Puoi sempre visualizzare il codice finito su GitHub o estrarre il codice localmente passando al ramo Angular/map-components-solution.

Approccio di mappatura

Il concetto di base consiste nel mappare un componente SPA a un componente AEM. AEM componenti, esegui lato server, esporta il contenuto come parte dell’API del modello JSON. Il contenuto JSON viene utilizzato dal SPA, che esegue lato client nel browser. Viene creata una mappatura 1:1 tra SPA componenti e un componente AEM.

Panoramica di alto livello sulla mappatura di un componente AEM a un componente di Angular

Panoramica di alto livello sulla mappatura di un componente AEM a un componente di Angular

Inspect come componente testo

Il AEM Project Archetype fornisce un componente Text mappato al componente AEM Testo. Questo è un esempio di un componente content, in quanto esegue il rendering di content da AEM.

Vediamo come funziona il componente.

Inspect il modello JSON

  1. Prima di passare al codice SPA, è importante comprendere il modello JSON AEM fornito. Passa alla Libreria di componenti core e visualizza la pagina per il componente Testo . La libreria dei componenti core fornisce esempi di tutti i componenti core AEM.

  2. Seleziona la scheda JSON per uno degli esempi seguenti:

    Modello JSON per testo

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

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

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

Inspect il componente Testo

  1. Apri un nuovo terminale e passa alla cartella ui.frontend all’interno del progetto. Esegui npm install e quindi npm start per avviare il server di sviluppo del webpack:

    $ cd ui.frontend
    $ npm run start:mock
    

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

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

    Server di sviluppo Webpack con contenuti fittizi

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

    Codice sorgente del componente di Angular Text.js

  4. La prima area da ispezionare è la class TextComponent alla ~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 di testo creato dal valore di this.text. Se il contenuto è in formato RTF (determinato dal flag this.richText ), la sicurezza integrata dell’Angular viene bypassata. Angular DomSanitizer viene utilizzato per “scorrere” l’HTML non elaborato ed evitare vulnerabilità di vulnerabilità cross-site scripting. Il metodo è associato alla proprietà innerHtml utilizzando il decoratore @HostBinding.

  5. Ispeziona quindi il TextEditConfig in ~linea 24:

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

    Il codice riportato sopra ha la responsabilità di determinare quando eseguire il rendering del segnaposto nell’ambiente di authoring AEM. Se il metodo isEmpty restituisce true, viene eseguito il rendering del segnaposto.

  6. Infine, dai un'occhiata alla chiamata MapTo su ~line 53:

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

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

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

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

    Alla riga 62 ~aggiorna 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 vedere gli effetti forniti dal server di sviluppo del webpack:

    Modello di testo aggiornato

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

  8. Inspect text.component.html in ui.frontend/src/app/components/text/text.component.html.

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

  9. Inspect il 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 {}
    

    Il TextComponent non è incluso esplicitamente, ma piuttosto dinamicamente tramite AEMResponsiveGridComponent fornito dall'SDK JS dell'editor di SPA AEM. Pertanto deve essere elencato nella matrice app.module.ts' entryComponents.

Creare il componente Immagine

Quindi, crea un componente di Angular Image mappato sul AEM componente Immagine. Il componente Image è un altro esempio di un componente content .

Inspect JSON

Prima di passare al codice SPA, controlla il modello JSON fornito da AEM.

  1. Passa a Esempi di immagini nella libreria Componenti core.

    JSON del componente core immagine

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

    NOTA

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

  2. Torna all’IDE e apri en.model.json in ui.frontend/src/mocks/json/en.model.json. Poiché si tratta di un nuovo componente di rete per il nostro progetto, dobbiamo "deridere" l’immagine JSON.

    A ~riga 70 aggiungi una voce JSON per il modello image (non dimenticare la virgola finale , dopo il secondo text_386303036) e aggiorna 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 che verrà utilizzata con il webpack dev server.

    Puoi visualizzare il file en.model.json completo qui.

  3. Aggiungi una foto stock da visualizzare 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.

Implementare il componente Immagine

  1. Arrestare il webpack dev server se avviato.

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

    $ ng generate component components/image
    
  3. 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 a se la src proprietà è compilata.

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

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

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

  4. Apri image.component.html e aggiornalo come segue:

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

    Questo renderà l'elemento <img> se hasImage restituisce true.

  5. Apri image.component.scss e aggiornalo come segue:

    :host-context {
        display: block;
    }
    
    .image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
    }
    
    NOTA

    La regola :host-context è critica perché il segnaposto dell'editor SPA AEM funzioni correttamente. Per tutti i componenti SPA destinati all’authoring nell’editor di pagine AEM questa regola è richiesta almeno.

  6. Apri app.module.ts e aggiungi ImageComponent alla matrice entryComponents:

    entryComponents: [TextComponent, PageComponent, ImageComponent],
    

    Come il TextComponent, il ImageComponent viene caricato in modo dinamico e deve essere incluso nella matrice entryComponents.

  7. Avviare il webpack dev server per visualizzare il rendering ImageComponent.

    $ npm run start:mock
    

    Immagine aggiunta al simulacro

    Immagine aggiunta al SPA

    NOTA

    Sfida bonus: Implementa un nuovo metodo per visualizzare il valore di title come didascalia sotto l’immagine.

Aggiorna criteri in AEM

Il componente ImageComponent è visibile solo nel server di sviluppo del webpack. Quindi, distribuisci il SPA aggiornato per AEM e aggiornare i criteri dei modelli.

  1. Arresta il server di sviluppo del webpack e dalla radice del progetto, distribuisci le modifiche a AEM utilizzando le tue competenze Maven:

    $ cd aem-guides-wknd-spa
    $ mvn clean install -PautoInstallSinglePackage
    
  2. Dalla schermata iniziale AEM passare a Strumenti > Modelli > WKND SPA Angular.

    Seleziona e modifica la SPA pagina:

    Modifica modello di pagina SPA

  3. Seleziona il Contenitore di layout e fai clic sull'icona policy per modificare il criterio:

    Criterio contenitore di layout

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

    Componente immagine selezionato

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

    Imposta componenti predefiniti

    Immetti un tipo MIME di image/*.

    Fai clic su Fine per salvare gli aggiornamenti dei criteri.

  5. Nel Contenitore di layout fai clic sull'icona policy per il componente Testo:

    Icona del criterio del componente testo

    Crea un nuovo criterio denominato WKND SPA Text. Alla voce Plugin > Formattazione > controlla tutte le caselle per abilitare ulteriori opzioni di formattazione:

    Abilita formattazione RTE

    Alla voce Plugin > Stili di paragrafo > seleziona la casella per Abilitare gli stili di paragrafo:

    Abilita stili di paragrafo

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

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

    È inoltre necessario poter modificare il componente Text e aggiungere stili di paragrafo aggiuntivi in modalità a schermo intero.

    Modifica RTF a schermo intero

  7. È inoltre necessario essere in grado di trascinare e rilasciare un'immagine da Asset Finder:

    Trascina immagine

  8. Aggiungi le tue immagini tramite AEM Assets o installa la base di codice finita per il sito di riferimento standard WKND. Il sito di riferimento WKND include molte immagini che possono essere riutilizzate sul SPA WKND. Il pacchetto può essere installato utilizzando Gestione pacchetti AEM.

    Package Manager installa wknd.all

Inspect il contenitore di layout

Il supporto per il Contenitore di layout viene fornito automaticamente dall’SDK dell’editor di SPA AEM. Il Contenitore di layout, come indicato dal nome, è un componente contenitore. I componenti contenitore sono componenti che accettano strutture JSON che rappresentano altri componenti e le creano in modo dinamico un’istanza.

Esaminiamo ulteriormente il Contenitore di layout.

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

    import { AEMResponsiveGridComponent,MapTo } from '@adobe/cq-angular-editable-components';
    
    MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);
    

    Il AEMResponsiveGridComponent viene implementato come parte dell’SDK dell’editor di SPA AEM e viene incluso nel progetto tramite import-components.

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

    API del modello JSON - Griglia reattiva

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

    Le stesse funzionalità di ridimensionamento di un componente utilizzando Modalità layout sono disponibili con l’Editor di SPA.

  3. 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 :

    Ridimensionare l’immagine utilizzando la modalità Layout

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

    Nomi delle classi cloud

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

  5. Torna 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 deve essere personalizzato in base alle specifiche del progetto. Attualmente i punti di interruzione sono impostati su 1200px e 650px.

  6. Dovresti essere in grado di utilizzare le funzionalità reattive e i criteri di testo RTF aggiornati del componente Text per creare una visualizzazione come la seguente:

    Esempio di capitolo di authoring finale

Congratulazioni!

Congratulazioni, hai imparato a mappare SPA componenti su componenti AEM e hai implementato un nuovo componente Image. Hai anche la possibilità di esplorare le funzionalità reattive del Contenitore di layout.

Puoi sempre visualizzare il codice finito su GitHub o estrarre il codice localmente passando al ramo Angular/map-components-solution.

Passaggi successivi

Navigazione e routing : scopri come è possibile supportare più visualizzazioni nel SPA mappando AEM pagine con l’SDK dell’editor SPA. La navigazione dinamica viene implementata tramite Router Angular e aggiunta a un componente Header esistente.

Bonus - Configurazioni permanenti al controllo del codice sorgente

In molti casi, specialmente all’inizio di un progetto AEM, è utile mantenere le configurazioni, come i modelli e i relativi criteri dei contenuti, al controllo del codice sorgente. In questo modo tutti gli sviluppatori lavorano con lo stesso set di contenuti e configurazioni e possono garantire un’ulteriore coerenza tra gli ambienti. Quando un progetto raggiunge un certo livello di maturità, la gestione dei modelli può essere affidata a un gruppo speciale di utenti.

I passaggi successivi si svolgeranno utilizzando l'IDE di codice di Visual Studio e VSCode AEM Sync ma potrebbero essere eseguiti utilizzando qualsiasi strumento e qualsiasi IDE configurato per pull o import da un'istanza locale di AEM.

  1. Nell'IDE di codice di Visual Studio, assicurati di aver installato VSCode AEM Sync tramite l'estensione Marketplace:

    Sincronizzazione AEM VSCode

  2. Espandi il modulo ui.content in Project explorer e passa a /conf/wknd-spa-angular/settings/wcm/templates.

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

    Modello di importazione VSCode

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

  5. Inspect 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 che verranno installati con il pacchetto. Osserva mode="merge" su ciascuno dei filtri che indica che il contenuto esistente non verrà modificato, ma che viene aggiunto solo un nuovo contenuto. Poiché gli autori di contenuti possono aggiornare questi percorsi, è importante che una distribuzione di codice sovrascriva il contenuto non. Per ulteriori informazioni sull’utilizzo degli elementi filtro, consulta la documentazione 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.

In questa pagina