將組SPA件映射到組AEM件

瞭解如何使用Editor JS SDK將React元件AEM映射到Adobe Experience Manager(AEM)SPA元件。元件映射使用戶能夠對編輯器SPA中的元件進行AEM動SPA態更新，與傳AEM統創作類似。

本章將更深入地介紹AEMJSON模型API，以及如何將元件暴露的JSON內容自AEM動作為道具注入React元件。

目標

瞭解如何將元件AEM映射到SPA元件。
InspectReact元件如何使用傳遞自的動態屬AEM性。
瞭解如何使用現成設備反AEM應核心元件。

您將構建的

本章將檢查如何提供 Text 組SPA件映射到AEM Text元件。響應核心元件，如 Image 將SPA在中使SPA用和創作AEM。開箱即用功能 佈局容器 和 模板編輯器 策略還將用於建立外觀更多樣的視圖。

章節樣本最終創作

必備條件

查看所需的工具和設定地方開發環境。本章是整合SPA 但是，後續的所有需要都是啟SPA用的AEM項目。

映射方法

基本概念是將元件映SPA射到組AEM件。組AEM件、運行伺服器端、導出作為JSON模型API一部分的內容。 JSON內容由瀏覽器中運SPA行的客戶端使用。將建立元件和元SPA件之間AEM的1:1映射。

將元件映射到反應組AEM件的高級概述

將元件映射到反應組AEM件的高級概述

Inspect文本元件

的項AEM目原型提供 Text 映射到的組AEM件文本元件。這是內容元件，在它呈現內容的上AEM界。

讓我們看看元件是如何工作的。

InspectJSON模型

在跳入代SPA碼之前，瞭解提供的JSON模AEM型非常重要。導航到核心元件庫並查看文本元件的頁面。「核心元件庫」提供了所有核心組AEM件的示例。
選擇 JSON 頁籤

您應看到以下三個屬性： text。 richText, :type。

:type 是一個保留屬性，它列出 sling:resourceType (或路AEM徑)。值 :type 是用於將元件映射AEM到元件SPA的。

text 和 richText 是將暴露於元件的附SPA加屬性。

查看JSON輸出位置 http://localhost:4502/content/wknd-spa-react/us/en.model.json。您應該能夠找到類似以下項的條目：

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

Inspect文SPA本

在您選擇的IDE中，開啟AEM項目SPA。展開 ui.frontend 模組並開啟檔案 Text.js 在 ui.frontend/src/components/Text/Text.js。

我們首先要檢查的是 class Text 第40行：

class Text extends Component {

    get richTextContent() {
        return (<div
                id={extractModelId(this.props.cqPath)}
                data-rte-editelement
                dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                );
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

Text 是標準React元件。元件使用 this.props.richText 確定要呈現的內容是富格文本還是純文字檔案。實際使用的「內容」來自 this.props.text。

為避免潛在的XSS攻擊，富文本通過 DOMPurify 使用前危險的SetInnerHTML 來顯示內容。回憶 richText 和 text JSON模型中的屬性。

接下來，請看 TextEditConfig 在~29號線：
```
const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};
```
上述代碼負責確定何時在作者環境中呈AEM現佔位符。如果 isEmpty 方法返回真將呈現佔位符。
最後，請看 MapTo 電話：
```
export default MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);
```
MapTo 由編輯AEM器SPAJS SDK提供(@adobe/aem-react-editable-components)。路徑 wknd-spa-react/components/text 表示 sling:resourceType 的上AEM界。此路徑與 :type 由先前觀察到的JSON模型暴露。 MapTo 負責分析JSON模型響應並將正確值傳遞為 props 的上SPA界。

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

使用反應核心元件

WCMAEM元件 — 反應核心實施和 WCMAEM元件 — Spa編輯器 — React Core實施。這些是一組可重用的UI元件，它們映射到出廠設AEM備。大多數項目都可以重新使用這些元件作為自己實施的起點。

在項目代碼中，開啟檔案 import-components.js 在 ui.frontend/src/components。
此檔案導入映射到SPA元件的所有AEM元件。鑑於編輯器實SPA現的動態性，我們必SPA須明確引用與可作者組AEM件關聯的任何元件。這允許作AEM者選擇在應用程式中想使用的任何元件。

以下導入語句包括SPA在項目中編寫的元件：

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

還有幾個 imports 從 @adobe/aem-core-components-react-spa 和 @adobe/aem-core-components-react-base。這些元件將導入React Core元件，並在當前項目中提供。然後，使用 MapTo就像 Text 元件示例。

更新策AEM略

策略是模板的一AEM項功能，它讓開發人員和超級用戶能夠精確控制哪些元件可用。 React Core Components包含在代碼中，SPA但需要通過策略啟用，然後才能在應用程式中使用。

從「開始AEM」螢幕導航到工具 > 模板 > WKND反SPA應。
選擇並開啟 頁SPA面 的子菜單。
選擇 佈局容器 點擊政策表徵圖：
下 允許的元件 > WKND反SPA應 — 內容 >檢查影像。預告, 標題。

下 預設元件 > 添加映射 選擇 影像 — WKNDSPA反應 — 內容 元件：

輸入 mime類型 共 image/*。

按一下完成保存策略更新。
在 佈局容器 按一下政策表徵圖文本元件。

建立名為 WKND文SPA本。下插件 > 格式 >選中所有框以啟用其他格式設定選項：

下插件 > 段落樣式 >選中該框 啟用段落樣式:

按一下完成的子菜單。

作者內容

導航到首頁 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html。
您現在應該能夠使用其他元件影像。預告, 標題的下一頁。
您還應能夠編輯 Text 元件和添加附加段落樣式全屏的子菜單。
您還應能夠從 資產查找器:
使用標題和預告元件。
通過 AEM Assets 或為標準 WKND參考站點。的 WKND參考站點包括許多可在WKND上重新使用的圖SPA像。可以使用包管AEM理器。

Inspect佈局容器

支援 佈局容器 由編輯器AEM SDK自SPA動提供。的 佈局容器，如名稱所示，為容器元件。容器元件是接受JSON結構的元件，表示其他並動態實例化它們。

讓我們進一步檢查佈局容器。

在瀏覽器中導航到 http://localhost:4502/content/wknd-spa-react/us/en.model.json

的 佈局容器 元件 sling:resourceType 共 wcm/foundation/components/responsivegrid 由編輯器SPA使用 :type 財產，就像 Text 和 Image 元件。

使用佈局模式可SPA用。
返回到 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html。添加其他影像並嘗試使用佈局選項：
重新開啟JSON模型 http://localhost:4502/content/wknd-spa-react/us/en.model.json 觀察 columnClassNames 作為JSON的一部分：

類名 aem-GridColumn--default--4 指示元件應基於12列網格為4列寬。有關可在此找到響應網格。
返回到IDE和 ui.apps 模組在 ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid。開啟檔案 less/grid.less。

此檔案確定斷點(default。 tablet, phone) 佈局容器。此檔案旨在根據項目規範進行自定義。當前斷點設定為 1200px 和 768px。
您應該能夠使用 Text 建立視圖的元件，如下所示：

恭喜！

恭喜，您學習了如何將組SPA件映AEM射到元件，並且使用了React Core Components。您還有機會瞭解 佈局容器。

後續步驟

導航和路由 — 瞭解使用Editor SDK映射SPA到頁面可以支AEM持中的多SPA個視圖。動態導航是使用React Router和React Core元件實現的。

（附加）將配置保留到原始碼管理

在許多情況下，特別是在項AEM目開始時，將配置（如模板和相關內容策略）保留到原始碼管理非常有價值。這可確保所有開發人員都針對同一組內容和配置工作，並可確保環境之間的更多一致性。一旦項目達到一定的成熟度，模板管理的做法就可以轉給特定的用戶群。

接下來的幾個步驟將使用Visual Studio代碼IDE和 VSCode同AEM步但可能正在使用您配置為拉或導入本地實例中的內容AEM。

在Visual Studio代碼IDE中，確保 VSCode同AEM步 通過Marketplace擴展安裝：
展開 ui.content 模組，並導航到 /conf/wknd-spa-react/settings/wcm/templates。
按一下右鍵 這樣 templates 資料夾和 從伺服器導AEM入:
重複導入內容的步驟，但選擇策略位於 /conf/wknd-spa-react/settings/wcm/templates/policies。
Inspect filter.xml 位於 ui.content/src/main/content/META-INF/vault/filter.xml。
```

<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-react" mode="merge"/>
     <filter root="/content/wknd-spa-react" mode="merge"/>
     <filter root="/content/dam/wknd-spa-react" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
 </workspaceFilter>
```
的 filter.xml 檔案負責標識將隨軟體包一起安裝的節點的路徑。注意 mode="merge" 在每個篩選器上，指示不會修改現有內容，只添加新內容。由於內容作者可能正在更新這些路徑，因此代碼部署必須執行不覆蓋內容。查看 FileVault文檔的子菜單。

比較 ui.content/src/main/content/META-INF/vault/filter.xml 和 ui.apps/src/main/content/META-INF/vault/filter.xml 瞭解各模組管理的不同節點。

（附加）建立自定義映像元件

反SPA應核心元件已提供映像元件。但是，如果您需要額外的實踐，請建立自己的React實施，該實施與影像元件。的 Image 元件是另一個示例內容元件。

InspectJSON

跳入代SPA碼前，檢查由提供的JSON模AEM型。

導航到核心元件庫中的影像示例。

屬性 src。 alt, title 將用於填充 Image 元件。

注意

還有其他映像屬性已公開(lazyEnabled。 widths)，允許開發人員建立自適應和延遲載入元件。本教程中構建的元件將非常簡單，並將不使用這些高級屬性。

實現映像元件

接下來，建立名為 Image 在 ui.frontend/src/components。
在 Image 資料夾建立名為 Image.js。

添加以下內容 import 聲明 Image.js:

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

然後添加 ImageEditConfig 確定何時在中顯示佔位符AEM:

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

佔位符將顯示 src 未設定屬性。

下一步實施 Image 類：

 export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

上述代碼將呈現 <img> 基於道具 src。 alt, title 由JSON模型傳入。

添加 MapTo 將React元件映射到元件的代AEM碼：
```
MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);
```
注意字串 wknd-spa-react/components/image 與元件的AEM位置 ui.apps 地址： ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image。

建立名為 Image.css 並添加以下內容：

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

在 Image.js 將引用添加到位於 import 語句：

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

開啟檔案 ui.frontend/src/components/import-components.js 並添加對新 Image 元件：

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

在 import-components.js 注釋掉React Core元件影像：
```
//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});
```
這將確保改用我們的自定義映像元件。

從項目的根部部署代SPA碼到使AEM用Maven:

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

InspectSPA進AEM來。頁面上的任何映像元件應繼續工作。 Inspect已呈現輸出，您應看到自定義映像元件的標籤，而不是反應核心元件。

自定義影像元件標籤
```
<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>
```
反應核心元件影像標籤
```
<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>
```
這是擴展和實施您自己的元件的好介紹。

全新的改善搜尋

將組SPA件映射到組AEM件

目標

您將構建的

必備條件

映射方法

Inspect文本元件

InspectJSON模型

Inspect文SPA本

使用反應核心元件

更新策AEM略

作者內容

Inspect佈局容器

恭喜！

後續步驟

（附加）將配置保留到原始碼管理

（附加）建立自定義映像元件

InspectJSON

實現映像元件

Business.Adobe.com資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe