Les composants React modifiables peuvent être "corrigés" ou codés en dur dans les vues SPA. Cela permet aux développeurs de placer SPA composants compatibles avec l’éditeur dans les vues SPA et aux utilisateurs de créer le contenu des composants dans l’éditeur d’.
Dans ce chapitre, nous remplaçons le titre de la vue d’accueil, "Current Adventures", qui est un texte codé en dur dans Home.js
avec un composant Titre fixe mais modifiable. Les composants fixes garantissent le placement du titre, mais permettent également la création du texte du titre et le changement en dehors du cycle de développement.
Pour ajouter une Fixe composant à la vue d’accueil :
Dans la vue Accueil SPA, remplacez le texte codé en dur. <h2>Current Adventures</h2>
avec un composant Titre modifiable personnalisé. Avant de pouvoir utiliser le composant Titre, nous devons :
@adobe/aem-react-editable-components
pour le rendre modifiable.MapTo
afin qu’il puisse être utilisé dans composant de conteneur ultérieur.Pour ce faire :
Ouvrez le projet SPA à distance à l’adresse ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
dans votre IDE
Créez un composant React à l’adresse react-app/src/components/editable/core/Title.js
Ajoutez le code suivant à Title.js
.
import React from 'react'
import { RoutedLink } from "./RoutedLink";
const TitleLink = (props) => {
return (
<RoutedLink className={props.baseCssClass + (props.nested ? '-' : '__') + 'link'}
isRouted={props.routed}
to={props.linkURL}>
{props.text}
</RoutedLink>
);
};
const TitleV2Contents = (props) => {
if (!props.linkDisabled) {
return <TitleLink {...props} />
}
return <>{props.text}</>
};
export const Title = (props) => {
if (!props.baseCssClass) {
props.baseCssClass = 'cmp-title'
}
const elementType = (!!props.type) ? props.type.toString() : 'h3';
return (<div className={props.baseCssClass}>
{
React.createElement(elementType, {
className: props.baseCssClass + (props.nested ? '-' : '__') + 'text',
},
<TitleV2Contents {...props} />
)
}
</div>)
}
export const titleIsEmpty = (props) => props.text == null || props.text.trim().length === 0
Notez que ce composant React n’est pas encore modifiable à l’aide d’AEM SPA Editor. Ce composant de base sera rendu modifiable à l’étape suivante.
Lisez les commentaires du code pour plus d’informations sur l’implémentation.
Créez un composant React à l’adresse react-app/src/components/editable/EditableTitle.js
Ajoutez le code suivant à EditableTitle.js
.
// Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import React from 'react'
// Import the AEM the Title component implementation and it's Empty Function
import { Title, titleIsEmpty } from "./core/Title";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
// The sling:resourceType of the AEM component used to collected and serialize the data this React component displays
const RESOURCE_TYPE = "wknd-app/components/title";
// Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
const EditConfig = {
emptyLabel: "Title", // The component placeholder in AEM SPA Editor
isEmpty: titleIsEmpty, // The function to determine if this component has been authored
resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
};
export const WrappedTitle = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Title, "cmp-title"), titleIsEmpty, "TitleV2")
return <Wrapped {...props} />
}
// EditableComponent makes the component editable by the AEM editor, either rendered statically or in a container
const EditableTitle = (props) => <EditableComponent config={EditConfig} {...props}><WrappedTitle /></EditableComponent>
// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(EditableTitle);
export default EditableTitle;
Ceci EditableTitle
Le composant React encapsule la propriété Title
Composant React, encapsulation et décoration pour qu’il soit modifiable dans AEM SPA Editor.
Maintenant que le composant React EditableTitle est enregistré dans et disponible pour utilisation dans l’application React, remplacez le texte du titre codé en dur sur la vue Accueil.
Modifier react-app/src/components/Home.js
Dans le Home()
en bas, importez EditableTitle
et remplacez le titre codé en dur par le nouveau AEMTitle
component :
...
import EditableTitle from './editable/EditableTitle';
...
function Home() {
return (
<div className="Home">
<EditableTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='root/title'/>
<Adventures />
</div>
);
}
Le Home.js
doit se présenter comme suit :
Connexion à l’auteur AEM
Accédez à Sites > Application WKND
Appuyer Accueil et sélectionnez Modifier à partir de la barre d’actions supérieure
Sélectionner Modifier dans le sélecteur de mode d’édition en haut à droite de l’éditeur de page ;
Passez la souris sur le texte de titre par défaut sous le logo WKND et au-dessus de la liste des aventures, jusqu’à ce que la composition de modification bleue s’affiche.
Appuyez sur pour afficher la barre d’actions du composant, puis appuyez sur la clé à molette pour modifier
Créez le composant Titre :
Titre : Les aventures de WKND
Type/Taille : H2
Appuyer Terminé pour enregistrer
Prévisualisez vos modifications dans AEM Éditeur SPA
Actualisez l’application WKND s’exécutant localement sur http://localhost:3000 et voir les modifications du titre créé immédiatement répercutées.
Vous avez ajouté un composant fixe et modifiable à l’application WKND ! Vous savez maintenant comment :
Les prochaines étapes sont les suivantes : ajout d’un composant de conteneur ResponsiveGrid AEM à la SPA qui permet à l’auteur d’ajouter et de modifier des composants au SPA !