單頁應用程式 (SPA) 可為網站使用者提供引人入勝的體驗。開發人員希望能使用SPA架構建立網站,而作者則想在AEM中為使用SPA架構建立的網站順暢地編輯內容。
SPA製作功能提供全方位的解決方案,可支援AEM中的SPA。 本文舉例說明如何調整簡單、現有的React元件,以便搭配AEM SPA編輯器使用。
單頁應用程式(SPA)編輯器功能需要AEM 6.4 service pack 2或更新版本。
若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPA Editor是建議的解決方案。
由於AEM需要並在SPA與SPA編輯器之間建立簡單輕量的合約,採用現有的Javascript應用程式並加以調整,以便與AEM中的SPA搭配使用,是相當簡單的作法。
本文說明We.Retail Journal範例SPA上天氣元件的範例。
您應熟悉 SPA應用程式的AEM結構 讀這篇文章之前。
本檔案使用 We.Retail Journal應用程式 僅供示範之用。 它不應用於任何專案。
任何 AEM 專案都應利用 AEM 專案原型,它支援使用 React 或 Angular 的 SPA 專案並利用 SPA SDK。
We.Retail Journal應用程式左上角有天氣元件。 它會顯示已定義位置的目前天氣,以動態提取天氣資料。
在SPA編輯器中編寫SPA內容時,天氣元件會以任何其他AEM元件的形式顯示,並帶有完整的工具列,且是可編輯的。
您可以像其他AEM元件一樣,在對話方塊中更新城市。
變更會持續存在,而元件會隨著新氣象資料自動更新。
天氣元件實際上是以公開提供的React元件為基礎,稱為 反應開放天氣,此變數已調整為在We.Retail Journal範例SPA應用程式中作為元件使用。
以下是NPM檔案中React Open Weather元件使用情形的片段。
檢閱自訂天氣元件的程式碼( Weather.js
)(在We.Retail Journal應用程式中):
16號線:React Open Weather Widget會視需要載入。
46號線:此 MapTo
函式會將此React元件與對應的AEM元件相關聯,以便在SPA編輯器中編輯它。
22-29線:此 EditConfig
已定義,檢查城市是否已填入,並定義值(如果空)。
31-44行:天氣元件將 Component
類別和提供React Open Weather元件的NPM使用說明檔案中定義的必要資料,並轉譯元件。
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2018 Adobe Systems Incorporated
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ https://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';
require('./Weather.css');
const WeatherEditConfig = {
emptyLabel: 'Weather',
isEmpty: function() {
return !this.props || !this.props.cq_model || !this.props.cq_model.city || this.props.cq_model.city.trim().length < 1;
}
};
class Weather extends Component {
render() {
let apiKey = "12345678901234567890";
let city;
if (this.props.cq_model) {
city = this.props.cq_model.city;
return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
}
return null;
}
}
MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);
雖然後端元件必須已存在,但前端開發人員可以利用We.Retail Journal SPA中的React Open Weather元件,只需很少的編碼。
如需開發SPA for AEM的詳細資訊,請參閱文章 開發SPA for AEM.