將SPA元件對應至AEM元件

上次更新: 2024-01-26
  • 主題:
  • SPA Editor
    檢視有關此主題的更多資訊
  • 建立對象:
  • Beginner
    Developer

瞭解如何使用AEM SPA Editor JS SDK將Angular元件對應至Adobe Experience Manager (AEM)元件。 元件對應可讓使用者在SPA SPA編輯器中對AEM元件進行動態更新,類似於傳統的AEM編寫。

本章更深入地探討AEM JSON模型API,以及如何將AEM元件公開的JSON內容作為prop自動插入到Angular元件中。

目標

  1. 瞭解如何將AEM元件對應至SPA元件。
  2. 瞭解兩者之間的差異 容器 元件和 內容 元件。
  3. 建立對應至現有AEM元件的新Angular元件。

您將建置的內容

本章將檢查提供的 Text SPA元件已對應至AEM Text元件。 新 Image SPA元件是建立於SPA中,並在AEM中編寫。 開箱即用的 配置容器範本編輯器 原則也會用來建立外觀稍有變化的檢視。

章節範例最終製作

先決條件

檢閱設定所需的工具和指示 本機開發環境.

取得程式碼

  1. 透過Git下載本教學課程的起點:

    $ git clone git@github.com:adobe/aem-guides-wknd-spa.git
    $ cd aem-guides-wknd-spa
    $ git checkout Angular/map-components-start
    
  2. 使用Maven將程式碼庫部署到本機AEM執行個體:

    $ mvn clean install -PautoInstallSinglePackage
    

    若使用 AEM 6.x 新增 classic 設定檔:

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

您一律可以於檢視完成的程式碼 GitHub 或切換至分支以在本機取出程式碼 Angular/map-components-solution.

對應方法

基本概念是對應SPA元件至AEM元件。 AEM元件,執行伺服器端,將內容匯出為JSON模型API的一部分。 SPA會使用JSON內容,在瀏覽器中執行使用者端。 SPA元件和AEM元件之間會建立1:1對應。

將AEM元件對應至Angular元件的高階概觀

將AEM元件對應至Angular元件的高階概觀

Inspect文字元件

AEM專案原型 提供 Text 對應至AEM的元件 文字元件. 以下範例為 內容 元件,在其中 內容 來自AEM。

讓我們瞭解元件的運作方式。

Inspect JSON模型

  1. 在跳入SPA程式碼之前,請務必瞭解AEM提供的JSON模型。 導覽至 核心元件庫 並檢視文字元件的頁面。 核心元件庫提供所有AEM核心元件的範例。

  2. 選取 JSON 標籤以取得下列其中一個範例:

    文字JSON模型

    您應該會看到三個屬性: textrichText、和 :type.

    :type 是保留的屬性,其中列出 sling:resourceType AEM (或路徑)。 的值 :type 是用來將AEM元件對應至SPA元件的專案。

    textrichText 是公開給SPA元件的其他屬性。

Inspect文字元件

  1. 開啟新終端機,並導覽至 ui.frontend 檔案夾。 執行 npm install 然後 npm start 以開始 webpack開發伺服器

    $ cd ui.frontend
    $ npm run start:mock
    

    ui.frontend 模組目前設定為使用 模擬JSON模型.

  2. 您應該會看到新的瀏覽器視窗開啟至 http://localhost:4200/content/wknd-spa-angular/us/en/home.html

    含有模擬內容的Webpack開發伺服器

  3. 在您選擇的IDE中,開啟WKND SPA的AEM專案。 展開 ui.frontend 模組並開啟檔案 text.component.tsui.frontend/src/app/components/text/text.component.ts

    Text.jsAngular元件原始碼

  4. 第一個要檢查的區域是 class TextComponent 於第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用於宣告欄位,這些欄位的值是透過先前審閱的對映JSON物件來設定的。

    @HostBinding('innerHtml') get content() 是一種方法,會從的值公開所編寫的文字內容 this.text. 在內容為RTF文字的情況下(由 this.richText 標幟)略過Angular的內建安全性。 angular的 DomSanitizer 用於「清除」原始HTML並防止跨網站指令碼漏洞。 方法已繫結至 innerHtml 屬性使用 @HostBinding 裝飾器。

  5. 接著檢查 TextEditConfig 於第24行:

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

    上述程式碼負責決定何時在AEM製作環境中呈現預留位置。 如果 isEmpty 方法傳回 true 則會轉譯預留位置。

  6. 最後,檢視 MapTo 呼叫第53行:

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

    對應至 是由AEM SPA編輯器JS SDK提供(@adobe/cq-angular-editable-components)。 路徑 wknd-spa-angular/components/text 代表 sling:resourceType AEM的URL名稱。 此路徑會與 :type 由先前觀察到的JSON模型公開。 對應至 剖析JSON模型回應,並將正確的值傳遞至 @Input() SPA元件的變數。

    您可以找到AEM Text 元件定義於 ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.

  7. 藉由修改 en.model.json 檔案位於 ui.frontend/src/mocks/json/en.model.json.

    在第62行,更新第一個 Text 值以使用 H1u 標籤:

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

    返回瀏覽器以檢視 webpack開發伺服器

    更新的文字模型

    嘗試切換 richText 屬性介於 true / false 以檢視執行中的轉譯器邏輯。

  8. Inspect text.component.htmlui.frontend/src/app/components/text/text.component.html.

    此檔案是空的,因為元件的整個內容是由 innerHTML 屬性。

  9. Inspect app.module.tsui.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 {}
    

    文字元件 未明確包含,而是透過以動態方式包含 AEMResponsiveGridComponent 由AEM SPA編輯器JS SDK提供。 因此,必須列於 app.module.tsentryComponents 陣列。

建立影像元件

接下來,建立 Image 對應至AEM的Angular元件 影像元件. 此 Image 元件是 內容 元件。

Inspect和JSON

在跳入SPA程式碼之前,請檢查AEM提供的JSON模型。

  1. 導覽至 核心元件庫中的影像範例.

    影像核心元件JSON

    屬性 srcalt、和 title 用於填入SPA Image 元件。

    注意

    公開其他影像屬性(lazyEnabledwidths)可讓開發人員建立最適化和延遲載入元件。 本教學課程中建置的元件非常簡單且可以 請使用這些進階屬性。

  2. 返回IDE並開啟 en.model.jsonui.frontend/src/mocks/json/en.model.json. 由於這是我們專案的全新元件,因此需要「模擬」影像JSON。

    在第70行,為新增一個JSON專案 image 模型(別忘了尾端逗號) , 在秒之後 text_386303036)並更新 :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"
            ],
    

    專案包含位於的範例影像 /mock-content/adobestock-140634652.jpeg 搭配 webpack開發伺服器.

    您可以檢視完整的 en.model.json在此.

  3. 新增元件要顯示的庫存像片。

    建立名為的新資料夾 影像ui.frontend/src/mocks. 下載 adobestock-140634652.jpeg 並將其放置在新建立的 影像 資料夾。 您可視需要使用自己的影像。

實作影像元件

  1. 停止 webpack開發伺服器 若已啟動。

  2. 執行AngularCLI以建立新的影像元件 ng generate component 命令來自內部 ui.frontend 資料夾:

    $ ng generate component components/image
    
  3. 在IDE中,開啟 image.component.tsui.frontend/src/app/components/image/image.component.ts 並依照以下方式更新:

    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 是用於確定是否在AEM中呈現作者預留位置的設定,根據 src 屬性已填入。

    @Input()srcalt、和 title 是從JSON API對應的屬性。

    hasImage() 是判斷是否應轉譯影像的方法。

    MapTo 將SPA元件對應至位於的AEM元件 ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

  4. 開啟 image.component.html 並依照以下方式更新:

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

    這將呈現 <img> 元素if hasImage 傳回 true.

  5. 開啟 image.component.scss 並依照以下方式更新:

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

    :host-context 規則是 關鍵 讓AEM SPA編輯器預留位置能正常運作。 打算在SPA頁面編輯器中編寫的所有AEM元件至少需要此規則。

  6. 開啟 app.module.ts 並新增 ImageComponententryComponents 陣列:

    entryComponents: [TextComponent, PageComponent, ImageComponent],
    

    喜歡 TextComponent,則 ImageComponent 動態載入,且必須包含在中 entryComponents 陣列。

  7. 開始 webpack開發伺服器 以檢視 ImageComponent 轉譯。

    $ npm run start:mock
    

    新增至模擬的影像

    影像已新增至SPA

    注意

    額外挑戰:實作新方法來顯示值 title 作為影像下方的標題。

在AEM中更新原則

ImageComponent 元件僅在 webpack開發伺服器. 接下來,將更新的SPA部署到AEM並更新範本原則。

  1. 停止 webpack開發伺服器 和從 使用您的Maven技能將變更部署到AEM:

    $ cd aem-guides-wknd-spa
    $ mvn clean install -PautoInstallSinglePackage
    
  2. 從AEM開始畫面導覽至 工具 > 範本 > WKND SPAANGULAR.

    選取並編輯 SPA頁面

    編輯SPA頁面範本

  3. 選取 配置容器 並按一下 原則 圖示以編輯原則:

    配置容器原則

  4. 允許的元件 > WKND SPAAngular — 內容 >檢查 影像 元件:

    已選取影像元件

    預設元件 > 新增對應 並選擇 影像 — WKND SPAAngular — 內容 元件:

    設定預設元件

    輸入 mime型別image/*.

    按一下 完成 以儲存原則更新。

  5. 配置容器 按一下 原則 圖示 文字 元件:

    文字元件原則圖示

    建立名為的新原則 WKND SPA文字. 在 外掛程式 > 格式化 >勾選所有方塊以啟用其他格式選項:

    啟用RTE格式

    外掛程式 > 段落樣式 >勾選方塊以 啟用段落樣式

    啟用段落樣式

    按一下 完成 以儲存原則更新。

  6. 導覽至 首頁 http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

    您也應該能夠編輯 Text 元件並新增其他段落樣式 全熒幕 模式。

    全熒幕RTF編輯

  7. 您也應該能夠從 資產尋找器

    拖放影像

  8. 透過新增您自己的影像 AEM Assets 或安裝完成的標準程式碼基底 WKND參考網站. 此 WKND參考網站 包括可在WKND SPA上重複使用的許多影像。 套件可使用以下方式安裝: AEM封裝管理員.

    封裝管理員安裝wknd.all

Inspect配置容器

支援 配置容器 由AEM SPA Editor SDK自動提供。 此 配置容器​如名稱所示,是 容器 元件。 容器元件是接受JSON結構的元件,表示 其他 元件並以動態方式加以例項化。

讓我們進一步檢查配置容器。

  1. 在IDE中開啟 responsive-grid.component.tsui.frontend/src/app/components/responsive-grid

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

    AEMResponsiveGridComponent 實施為AEM SPA Editor SDK的一部分,並透過包含在專案中 import-components.

  2. 在瀏覽器中導覽至 http://localhost:4502/content/wknd-spa-angular/us/en.model.json

    JSON模型API — 回應式格線

    配置容器 元件具有 sling:resourceTypewcm/foundation/components/responsivegrid 和,可由SPA編輯器使用 :type 屬性,就像 TextImage 元件。

    相同的功能,使用重新調整元件大小 版面模式 可透過SPA編輯器使用。

  3. 返回至 http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. 新增其他 影像 元件,然後嘗試使用 版面 選項:

    使用版面模式重新調整影像大小

  4. 重新開啟JSON模型 http://localhost:4502/content/wknd-spa-angular/us/en.model.json 並觀察 columnClassNames 做為JSON的一部分:

    欄類別名稱

    類別名稱 aem-GridColumn--default--4 表示元件應以12欄格線為4欄寬。 關於的更多詳細資料 您可以在這裡找到回應式格線.

  5. 返回IDE並在 ui.apps 模組有一個使用者端程式庫定義於 ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid. 開啟檔案 less/grid.less.

    此檔案會決定中斷點(defaulttablet、和 phone)使用的 配置容器. 此檔案旨在根據專案規格自訂。 目前中斷點設定為 1200px650px.

  6. 您應該能夠使用的回應式功能和更新的RTF原則 Text 元件以編寫類似以下內容的檢視:

    章節範例最終製作

恭喜!

恭喜,您已瞭解如何將SPA元件對應至AEM元件,並且已實作新的 Image 元件。 您也有機會探索 配置容器.

您一律可以於檢視完成的程式碼 GitHub 或切換至分支以在本機取出程式碼 Angular/map-components-solution.

後續步驟

導覽與路由 — 瞭解如何使用SPA編輯器SDK將對應到AEM頁面,以支援SPA中的多個檢視。 動態導覽是使用Angular路由器實作,並新增至現有的Header元件。

額外優點 — 將設定保留到原始檔控制

在許多情況下,尤其是在AEM專案開始時,將設定(例如範本和相關內容原則)保留到原始檔控制中很有價值。 這可確保所有開發人員都針對相同的內容和設定集,且可確保環境之間有額外的一致性。 一旦專案達到一定的成熟度,管理範本的實務就可以交給特殊的超級使用者群組。

接下來的幾個步驟將使用Visual Studio Code IDE和 VSCode AEM Sync 但可以使用任何工具和您已設定的IDE執行 提取匯入 來自AEM本機執行個體的內容。

  1. 在Visual Studio Code IDE中,確定您已 VSCode AEM Sync 透過Marketplace擴充功能安裝:

    VSCode AEM Sync

  2. 展開 ui.content 模組,並導覽至 /conf/wknd-spa-angular/settings/wcm/templates.

  3. 按一下右鍵templates 資料夾並選取 從AEM伺服器匯入

    VSCode匯入範本

  4. 重複步驟以匯入內容,但選取 原則 資料夾位於 /conf/wknd-spa-angular/settings/wcm/policies.

  5. Inspect filter.xml 檔案位於 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>
    

    filter.xml 檔案負責識別隨套件安裝的節點路徑。 請注意 mode="merge" 在表示現有內容將不會被修改的每個篩選器上,只會新增新內容。 由於內容作者可能正在更新這些路徑,因此程式碼部署必須更新 覆寫內容。 請參閱 FileVault檔案 以取得有關使用篩選元素的詳細資訊。

    比較 ui.content/src/main/content/META-INF/vault/filter.xmlui.apps/src/main/content/META-INF/vault/filter.xml 以瞭解每個模組所管理的不同節點。

本頁內容