Mapear componentes de SPA para componentes do AEM map-components

Baixe o ponto de partida para este tutorial pelo Git:

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

Implante a base de código em uma instância do AEM local usando Maven:

$ mvn clean install -PautoInstallSinglePackage

Se estiver usando o AEM 6.x, adicione o perfil classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Antes de pular para o código SPA, é importante entender o modelo JSON que o AEM fornece. Navegue até a Biblioteca de Componentes principais e exiba a página do componente de Texto. A Biblioteca de componentes principais fornece exemplos de todos os Componentes principais do AEM.

Selecione a guia JSON para um dos exemplos:

Você deve ver três propriedades: text, richText e :type.

:type é uma propriedade reservada que lista o sling:resourceType (ou caminho) do Componente AEM. O valor de :type é o que é usado para mapear o componente AEM para o componente SPA.

text e richText são propriedades adicionais expostas ao componente de SPA.

Abra um novo terminal e navegue até a pasta ui.frontend dentro do projeto. Execute npm install e depois npm start para iniciar o servidor de desenvolvimento do webpack:

$ cd ui.frontend
$ npm run start:mock

O módulo ui.frontend está configurado atualmente para usar o modelo JSON simulado.

Você deve ver uma nova janela de navegador aberta para http://localhost:4200/content/wknd-spa-angular/us/en/home.html

No IDE de sua escolha, abra o Projeto AEM para o WKND SPA. Expanda o módulo ui.frontend e abra o arquivo text.component.ts em ui.frontend/src/app/components/text/text.component.ts:

A primeira área a ser inspecionada é o class TextComponent na linha ~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) {}
}

O decorador @Input() é usado para declarar campos cujos valores são definidos por meio do objeto JSON mapeado, revisado anteriormente.

@HostBinding('innerHtml') get content() é um método que expõe o conteúdo do texto criado a partir do valor de this.text. Caso o conteúdo seja rich text (determinado pelo sinalizador this.richText), a segurança interna do Angular é ignorada. O DomSanitizer da Angular é usado para "limpar" o HTML bruto e evitar vulnerabilidades de script entre sites. O método está associado à propriedade innerHtml usando o decorador @HostBinding.

Em seguida, verifique o TextEditConfig em ~line 24:

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

O código acima é responsável por determinar quando renderizar o espaço reservado no ambiente de autor do AEM. Se o método isEmpty retornar true, o espaço reservado será renderizado.

Por fim, dê uma olhada na chamada MapTo em ~line 53:

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

MapTo é fornecido pelo AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components). O caminho wknd-spa-angular/components/text representa o sling:resourceType do componente AEM. Esse caminho corresponde ao :type exposto pelo modelo JSON observado anteriormente. MapTo analisa a resposta do modelo JSON e passa os valores corretos para as variáveis @Input() do componente SPA.

Você pode encontrar a definição do componente Text do AEM em ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.

Experimente modificando o arquivo en.model.json em ui.frontend/src/mocks/json/en.model.json.

Em ~line 62, atualize o primeiro valor Text para usar as marcas H1 e u:

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

Retorne ao navegador para ver os efeitos do servidor de desenvolvimento do webpack:

Tente alternar a propriedade richText entre true / false para ver a lógica de renderização em ação.

Inspecionar text.component.html em ui.frontend/src/app/components/text/text.component.html.

Este arquivo está vazio porque todo o conteúdo do componente está definido pela propriedade innerHTML.

Inspecione o app.module.ts em 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 {}

O TextComponent não está incluído explicitamente, mas dinamicamente por meio de AEMResponsiveGridComponent fornecido pelo AEM SPA Editor JS SDK. Portanto, deve ser listado na matriz app.module.ts' entryComponents.

Navegue até os exemplos de imagem na biblioteca de Componentes principais.

Propriedades de src, alt e title são usadas para popular o componente de SPA Image.

Retorne ao IDE e abra o en.model.json em ui.frontend/src/mocks/json/en.model.json. Como este é um componente novo para o nosso projeto, precisamos "simular" o JSON de imagem.

Em ~line 70, adicione uma entrada JSON para o modelo image (não se esqueça da vírgula à direita , após o segundo text_386303036) e atualize a matriz :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"
        ],

O projeto inclui uma imagem de exemplo em /mock-content/adobestock-140634652.jpeg que é usada com o servidor de desenvolvimento do webpack.

Você pode exibir o en.model.json completo aqui.

Adicione uma foto do estoque a ser exibida pelo componente.

Crie uma nova pasta chamada imagens abaixo de ui.frontend/src/mocks. Baixe adobestock-140634652.jpeg e coloque-o na pasta images recém-criada. Você pode usar sua própria imagem, se desejar.

Pare o servidor de desenvolvimento do webpack, se iniciado.

Crie um novo componente de Imagem executando o comando ng generate component da Angular CLI na pasta ui.frontend:

$ ng generate component components/image

No IDE, abra image.component.ts em ui.frontend/src/app/components/image/image.component.ts e atualize da seguinte maneira:

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 é a configuração para determinar se o espaço reservado do autor deve ser renderizado no AEM, com base no preenchimento da propriedade src.

@Input() de src, alt e title são as propriedades mapeadas da API JSON.

hasImage() é um método que determinará se a imagem deve ser renderizada.

MapTo mapeia o componente SPA para o componente AEM localizado em ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

Abra image.component.html e atualize da seguinte maneira:

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

Isso renderizará o elemento <img> se hasImage retornar true.

Abra image.component.scss e atualize da seguinte maneira:

:host-context {
    display: block;
}

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

Abra app.module.ts e adicione ImageComponent à matriz entryComponents:

entryComponents: [TextComponent, PageComponent, ImageComponent],

Assim como o TextComponent, o ImageComponent é carregado dinamicamente e deve ser incluído na matriz entryComponents.

Inicie o servidor de desenvolvimento do webpack para ver a renderização de ImageComponent.

$ npm run start:mock

Imagem adicionada ao SPA

Pare o servidor de desenvolvimento do webpack e, a partir da raiz do projeto, implante as alterações no AEM usando suas habilidades em Maven:

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

Na tela inicial do AEM, navegue até Ferramentas > Modelos > WKND SPA Angular.

Selecione e edite a Página do SPA:

Selecione o Contêiner de layout e clique em seu ícone de política para editar a política:

Em Componentes Permitidos > WKND SPA Angular - Conteúdo > verifique o componente Imagem:

Em Componentes Padrão > Adicionar mapeamento e escolha o componente Imagem - WKND SPA Angular - Conteúdo:

Insira um tipo MIME de image/*.

Clique em Concluído para salvar as atualizações de política.

No Contêiner de Layout, clique no ícone política para o componente Texto:

Crie uma nova política chamada WKND SPA Text. Em Plugins > Formatação > marque todas as caixas para habilitar opções de formatação adicionais:

Em Plug-ins > Estilos de parágrafo >, marque a caixa para Habilitar estilos de parágrafo:

Clique em Concluído para salvar a atualização de política.

Navegue até a Página inicial http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

Você também pode editar o componente Text e adicionar outros estilos de parágrafo no modo tela cheia.

Você também pode arrastar e soltar uma imagem do Localizador de ativos:

Adicione suas próprias imagens via AEM Assets ou instale a base de código concluída para o site de referência WKND padrão. O site de referência WKND inclui muitas imagens que podem ser reutilizadas no SPA do WKND. O pacote pode ser instalado usando o Gerenciador de Pacotes da AEM.

do Gerenciador de Pacotes

No IDE, abra responsive-grid.component.ts em ui.frontend/src/app/components/responsive-grid:

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

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

O AEMResponsiveGridComponent é implementado como parte do SDK do Editor SPA do AEM e está incluído no projeto via import-components.

Em um navegador, navegue até http://localhost:4502/content/wknd-spa-angular/us/en.model.json

O componente Contêiner de Layout tem um sling:resourceType de wcm/foundation/components/responsivegrid e é reconhecido pelo Editor SPA usando a propriedade :type, exatamente como os componentes Text e Image.

Os mesmos recursos de redimensionamento de um componente usando o Modo de layout estão disponíveis com o Editor de SPA.

Retorne a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Adicione componentes adicionais de Imagem e tente redimensioná-los usando a opção Layout:

Abra novamente o modelo JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.json e observe o columnClassNames como parte do JSON:

O nome de classe aem-GridColumn--default--4 indica que o componente deve ter 4 colunas de largura com base em uma grade de 12 colunas. Mais detalhes sobre a grade responsiva podem ser encontrados aqui.

Retorne ao IDE e no módulo ui.apps há uma biblioteca do lado do cliente definida em ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid. Abra o arquivo less/grid.less.

Este arquivo determina os pontos de interrupção (default, tablet e phone) usados pelo Contêiner de Layout. Este arquivo deve ser personalizado de acordo com as especificações do projeto. Os pontos de interrupção estão definidos como 1200px e 650px.

Você deve ser capaz de usar os recursos responsivos e as políticas de rich text atualizadas do componente Text para criar uma exibição como a seguinte:

No Visual Studio Code IDE, verifique se você tem o VSCode AEM Sync instalado por meio da extensão do Marketplace:

Expanda o módulo ui.content no Gerenciador de projetos e navegue até /conf/wknd-spa-angular/settings/wcm/templates.

Clique com o botão direito do mouse na pasta templates e selecione Importar do AEM Server:

Repita as etapas para importar o conteúdo, mas selecione a pasta políticas localizada em /conf/wknd-spa-angular/settings/wcm/policies.

Inspecione o arquivo filter.xml localizado em 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>

O arquivo filter.xml é responsável por identificar os caminhos dos nós instalados com o pacote. Observe o mode="merge" em cada filtro que indica que o conteúdo existente não será modificado, somente o novo conteúdo será adicionado. Como os autores de conteúdo podem estar atualizando esses caminhos, é importante que uma implantação de código não substitua o conteúdo. Consulte a documentação do FileVault para obter mais detalhes sobre como trabalhar com elementos de filtro.

Compare ui.content/src/main/content/META-INF/vault/filter.xml e ui.apps/src/main/content/META-INF/vault/filter.xml para entender os diferentes nós gerenciados por cada módulo.