Découvrez comment créer un composant de météo personnalisé à utiliser avec l’éditeur de SPA d’AEM. Découvrez comment développer des boîtes de dialogue de création et des modèles Sling pour étendre le modèle JSON et renseigner un composant personnalisé. Les éléments utilisés sont l’API Open Weather et le composant React Open Weather.
Un composant de météo simple est créé. Ce composant peut être ajouté à la SPA par les personnes créant le contenu. À l’aide d’une boîte de dialogue AEM, les auteurs et autrices peuvent définir l’emplacement de la météo à afficher. L’implémentation de ce composant illustre les étapes nécessaires à la création d’un nouveau composant AEM compatible avec le framework de l’éditeur de SPA d’AEM.
Examinez les outils et les instructions nécessaires pour configurer un environnement de développement local. Ce chapitre est la suite du chapitre Navigation et routage, toutefois, vous n’avez besoin pour le suivre que d’un projet AEM compatible avec les SPA déployé sur une instance AEM locale.
Une clé API Open Weather est nécessaire pour suivre le tutoriel. L’inscription est gratuite, mais avec un nombre limité d’appels API.
Un composant AEM est défini comme un nœud et des propriétés. Dans le projet, ces nœuds et propriétés sont représentés sous la forme de fichiers XML dans le module ui.apps
. Créez ensuite le composant AEM dans le module ui.apps
.
Un bref rappel des principes de base des composants AEM peut s’avérer utile.
Dans l’IDE de votre choix, ouvrez le dossier ui.apps
.
Accédez à ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components
et créez un dossier nommé open-weather
.
Créez un nouveau fichier nommé .content.xml
sous le dossier open-weather
. Remplissez le open-weather/.content.xml
avec les éléments suivants :
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
jcr:title="Open Weather"
componentGroup="WKND SPA React - Content"/>
jcr:primaryType="cq:Component"
: identifie que ce nœud est un composant AEM.
jcr:title
est la valeur affichée pour les auteurs et autrices de contenu et le componentGroup
détermine le regroupement des composants dans l’interface utilisateur de création.
Sous le dossier custom-component
, créez un autre dossier nommé _cq_dialog
.
Sous le dossier _cq_dialog
, créez un fichier nommé .content.xml
et renseignez-le avec les éléments suivants :
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Open Weather"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<properties
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<label
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The label to display for the component"
fieldLabel="Label"
name="./label"/>
<lat
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldDescription="The latitude of the location."
fieldLabel="Latitude"
step="any"
name="./lat" />
<lon
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
fieldDescription="The longitude of the location."
fieldLabel="Longitude"
step="any"
name="./lon"/>
</items>
</column>
</items>
</columns>
</items>
</properties>
</items>
</tabs>
</items>
</content>
</jcr:root>
Le fichier XML ci-dessus génère une boîte de dialogue très simple pour le Weather Component
. La partie essentielle du fichier est constituée des nœuds <label>
, <lat>
et <lon>
internes. Cette boîte de dialogue contient deux numberfield
et un textfield
qui permettent à l’utilisateur ou à l’utilisatrice de configurer la météo à afficher.
Un modèle Sling est ensuite créé pour exposer la valeur des propriétés label
,lat
et long
via le modèle JSON.
Vous pouvez afficher de nombreux autres exemples de boîtes de dialogue en affichant les définitions des composants principaux. Vous pouvez également afficher des champs de formulaire supplémentaires, tels que select
, textarea
, pathfield
, disponibles sous /libs/granite/ui/components/coral/foundation/form
dans CRXDE-Lite.
Avec un composant AEM traditionnel, un script HTL est généralement requis. Comme la SPA effectue le rendu du composant, aucun script HTL n’est nécessaire.
Les modèles Sling sont des objets POJO (Plain Old Java Object) Java pilotés par des annotations qui facilitent le mappage des données du JCR aux variables Java. Les modèles Sling fonctionnent en règle générale pour encapsuler une logique commerciale côté serveur complexe pour les composants AEM.
Dans le contexte de l’éditeur de SPA, les modèles Sling exposent le contenu d’un composant par le biais du modèle JSON grâce à une fonctionnalité utilisant l’exporteur de modèles Sling.
Dans l’IDE de votre choix, ouvrez le module core
dans aem-guides-wknd-spa.react/core
.
Créez un fichier nommé OpenWeatherModel.java
dans core/src/main/java/com/adobe/aem/guides/wkndspa/react/core/models
.
Remplissez OpenWeatherModel.java
avec les éléments suivants :
package com.adobe.aem.guides.wkndspa.react.core.models;
import com.adobe.cq.export.json.ComponentExporter;
// Sling Models intended to be used with SPA Editor must extend ComponentExporter interface
public interface OpenWeatherModel extends ComponentExporter {
public String getLabel();
public double getLat();
public double getLon();
}
Il s’agit de l’interface Java de notre composant. Pour que notre modèle Sling soit compatible avec le framework d’éditeur de SPA, il doit étendre la classe ComponentExporter
.
Créez un dossier nommé impl
sous core/src/main/java/com/adobe/aem/guides/wkndspa/react/core/models
.
Créez un fichier nommé OpenWeatherModelImpl.java
sous impl
et renseignez les éléments suivants :
package com.adobe.aem.guides.wkndspa.react.core.models.impl;
import org.apache.sling.models.annotations.*;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import com.adobe.aem.guides.wkndspa.react.core.models.OpenWeatherModel;
// Sling Model annotation
@Model(
adaptables = SlingHttpServletRequest.class,
adapters = { OpenWeatherModel.class, ComponentExporter.class },
resourceType = OpenWeatherModelImpl.RESOURCE_TYPE,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
@Exporter( //Exporter annotation that serializes the modoel as JSON
name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
extensions = ExporterConstants.SLING_MODEL_EXTENSION
)
public class OpenWeatherModelImpl implements OpenWeatherModel {
@ValueMapValue
private String label; //maps variable to jcr property named "label" persisted by Dialog
@ValueMapValue
private double lat; //maps variable to jcr property named "lat"
@ValueMapValue
private double lon; //maps variable to jcr property named "lon"
// points to AEM component definition in ui.apps
static final String RESOURCE_TYPE = "wknd-spa-react/components/open-weather";
// public getter method to expose value of private variable `label`
// adds additional logic to default the label to "(Default)" if not set.
@Override
public String getLabel() {
return StringUtils.isNotBlank(label) ? label : "(Default)";
}
// public getter method to expose value of private variable `lat`
@Override
public double getLat() {
return lat;
}
// public getter method to expose value of private variable `lon`
@Override
public double getLon() {
return lon;
}
// method required by `ComponentExporter` interface
// exposes a JSON property named `:type` with a value of `wknd-spa-react/components/open-weather`
// required to map the JSON export to the SPA component props via the `MapTo`
@Override
public String getExportedType() {
return OpenWeatherModelImpl.RESOURCE_TYPE;
}
}
La variable statique RESOURCE_TYPE
doit pointer vers le chemin d’accès dans le ui.apps
du composant. Le getExportedType()
est utilisé pour mapper les propriétés JSON au composant SPA via MapTo
. @ValueMapValue
est une annotation qui lit la propriété jcr enregistrée par la boîte de dialogue.
Ensuite, mettez à jour le code React afin d’inclure le Composant React Open Weather et faites en sorte qu’il soit mappé au composant AEM créé lors des étapes précédentes.
Installez le composant React Open Weather en tant que dépendance npm :
$ cd aem-guides-wknd-spa.react/ui.frontend
$ npm i react-open-weather
Créez un nouveau dossier nommé OpenWeather
dans ui.frontend/src/components/OpenWeather
.
Ajoutez un fichier nommé OpenWeather.js
et renseignez-le avec les éléments suivants :
import React from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';
import ReactWeather, { useOpenWeather } from 'react-open-weather';
// Open weather API Key
// For simplicity it is hard coded in the file, ideally this is extracted in to an environment variable
const API_KEY = 'YOUR_API_KEY';
// Logic to render placeholder or component
const OpenWeatherEditConfig = {
emptyLabel: 'Weather',
isEmpty: function(props) {
return !props || !props.lat || !props.lon || !props.label;
}
};
// Wrapper function that includes react-open-weather component
function ReactWeatherWrapper(props) {
const { data, isLoading, errorMessage } = useOpenWeather({
key: API_KEY,
lat: props.lat, // passed in from AEM JSON
lon: props.lon, // passed in from AEM JSON
lang: 'en',
unit: 'imperial', // values are (metric, standard, imperial)
});
return (
<div className="cmp-open-weather">
<ReactWeather
isLoading={isLoading}
errorMessage={errorMessage}
data={data}
lang="en"
locationLabel={props.label} // passed in from AEM JSON
unitsLabels={{ temperature: 'F', windSpeed: 'mph' }}
showForecast={false}
/>
</div>
);
}
export default function OpenWeather(props) {
// render nothing if component not configured
if (OpenWeatherEditConfig.isEmpty(props)) {
return null;
}
// render ReactWeather component if component configured
// pass props to ReactWeatherWrapper. These props include the mapped properties from AEM JSON
return ReactWeatherWrapper(props);
}
// Map OpenWeather to AEM component
MapTo('wknd-spa-react/components/open-weather')(OpenWeather, OpenWeatherEditConfig);
Mettez à jour import-components.js
dans ui.frontend/src/components/import-components.js
pour inclure la composant OpenWeather
:
// import-component.js
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
+ import './OpenWeather/OpenWeather';
Déployez toutes les mises à jour sur un environnement AEM local à partir de la racine du répertoire du projet, en utilisant vos compétences Maven :
$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage
Ensuite, accédez à AEM pour vérifier les mises à jour, et autorisez le composant OpenWeather
à être ajouté à la SPA.
Vérifiez l’enregistrement du nouveau modèle Sling en accédant à http://localhost:4502/system/console/status-slingmodels.
com.adobe.aem.guides.wkndspa.react.core.models.impl.OpenWeatherModelImpl - wknd-spa-react/components/open-weather
com.adobe.aem.guides.wkndspa.react.core.models.impl.OpenWeatherModelImpl exports 'wknd-spa-react/components/open-weather' with selector 'model' and extension '[Ljava.lang.String;@2fd80fc5' with exporter 'jackson'
Vous devriez voir les deux lignes ci-dessus qui indiquent que le OpenWeatherModelImpl
est associé avec le composant wknd-spa-react/components/open-weather
et qu’il est enregistré via l’exporteur de modèle Sling.
Accédez au modèle de page SPA à l’adresse http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.
Mettez à jour la stratégie du conteneur de disposition pour ajouter le nouveau composant Open Weather
en tant que composant autorisé :
Enregistrez les modifications apportées à la stratégie et observez le composant Open Weather
en tant que composant autorisé :
Ensuite, créez le composant Open Weather
à l’aide de l’éditeur de SPA d’AEM.
Accédez à http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.
Dans le mode Edit
, ajoutez le composant Open Weather
au Layout Container
:
Ouvrez la boîte de dialogue du composant et saisissez un Libellé, une Latitude, et une Longitude. Par exemple San Diego, 32,7157°, et - 117,1611°. Les nombres de l’hémisphère occidental et de l’hémisphère sud sont représentés sous forme de nombres négatifs avec l’API Open Weather.
Il s’agit de la boîte de dialogue qui a été créée à partir du fichier XML plus tôt dans le chapitre.
Enregistrez les modifications. Observez que la météo pour San Diego s’affiche maintenant :
Affichez le modèle JSON en accédant à http://localhost:4502/content/wknd-spa-react/us/en.model.json. Recherchez wknd-spa-react/components/open-weather
:
"open_weather": {
"label": "San Diego",
"lat": 32.7157,
"lon": -117.1611,
":type": "wknd-spa-react/components/open-weather"
}
Les valeurs JSON sont générées par le modèle Sling. Ces valeurs JSON sont transmises au composant React sous la forme de propriétés.
Félicitations, vous avez appris à créer un composant AEM personnalisé à utiliser avec l’éditeur de SPA. Vous avez également appris comment les boîtes de dialogue, les propriétés JCR et les modèles Sling interagissent pour générer le modèle JSON.
Étendre un composant principal - Découvrez comment étendre un composant AEM principal existant à utiliser avec l’editeur de SPA d’AEM. Comprendre comment ajouter des propriétés et du contenu à un composant existant est une technique puissante pour étendre les fonctionnalités d’une implémentation d’éditeur de SPA AEM.