Ce didacticiel est obsolète. Il est recommandé de procéder comme suit : Prise en main de l’éditeur SPA AEM et de Angular ou Prise en main de l’éditeur de l’ et réaction
aem SPA Editor prend en charge la modification contextuelle d’une ou de plusieurs applications d’une seule page. Ce didacticiel présente SPA développement à utiliser avec AEM Editor JS SDK. Le didacticiel étendra l'application de Journal We.Retail en ajoutant un composant Hello World personnalisé. Les utilisateurs peuvent compléter le didacticiel à l’aide des structures Réagir ou Angular.
La fonction Éditeur d’application à page unique (SPA) nécessite AEM Service Pack 2 6.4 ou version ultérieure.
L’éditeur SPA est la solution recommandée pour les projets qui nécessitent un rendu côté client SPA structure (par exemple, Réagir ou Angulaire).
Ce didacticiel vise à mettre en évidence les étapes nécessaires pour associer un composant SPA à un composant AEM afin d’activer la modification en contexte. Les utilisateurs qui commencent ce tutoriel doivent connaître les concepts de base du développement avec Adobe Experience Manager, AEM, ainsi que le développement avec React of Angular framework. Ce didacticiel porte à la fois sur les tâches de développement dorsales et frontales.
Il est recommandé de passer en revue les ressources suivantes avant de commencer ce didacticiel :
Ce didacticiel est conçu pour :
Adobe Experience Manager 6.5 ou Adobe Experience Manager 6.4 + Service Pack 5
Dans ce didacticiel, les technologies et outils suivants doivent être installés :
Le doublon vérifie l'installation des outils ci-dessus en ouvrant un nouveau terminal et en exécutant les opérations suivantes :
$ java -version
java version "11 +"
$ mvn -version
Apache Maven 3.3.9
$ node --version
v8.11.1
$ npm --version
6.1.0
Le concept de base est de mapper un composant SPA à un composant AEM. aem composants, exécution côté serveur, exportation de contenu sous la forme de JSON. Le contenu JSON est consommé par le SPA, exécutant côté client dans le navigateur. Un mappage 1:1 entre les composants SPA et un composant AEM est créé.
Les structures populaires réagissez JS et Angular sont prises en charge. Les utilisateurs peuvent compléter ce tutoriel en angulaire ou en réagissant, quel que soit le cadre dans lequel ils se sentent le plus à l'aise.
SPA développement a un pied dans le développement AEM, et l'autre dehors. L'objectif est de permettre SPA développement de manière indépendante, et (surtout) indépendante de l'AEM.
SPA développement a un pied dans le développement AEM, et l'autre dans le développement extérieur - ce qui permet au développement SPA de se produire de façon indépendante et (surtout) indépendante de l'.
L'objectif de ce didacticiel est d'étendre l'application de Journal We.Retail à un nouveau composant. Début en téléchargeant le code source de l’application de Journal We.Retail et en le déployant sur un AEM local.
Téléchargez le dernier code de Journal We.Retail depuis GitHub.
Ou cloner le référentiel à partir de la ligne de commande :
$ git clone git@github.com:adobe/aem-sample-we-retail-journal.git
Le tutoriel fonctionnera avec la branche master avec la version 1.2.1-SNAPSHOT du projet.
La structure suivante doit être visible :
Le projet contient les modules maven suivants :
all
: Incorpore et installe l’ensemble du projet dans un seul package.bundles
: Contient deux lots OSGi : commons et noyau qui contiennent Sling Models et d'autres codes Java.ui.apps
: contient les parties /apps du projet, à savoir les clientlibs JS et CSS, les composants, les configurations spécifiques au mode d’exécution.ui.content
: contient le contenu structurel et les configurations (/content
, /conf
)react-app
: Application Web.Retail Journal React. Il s'agit à la fois d'un module Maven et d'un projet webpack.angular-app
: Application angulaire du Journal We.Retail. Il s'agit à la fois d'un module Maven et d'un projet webpack.Ouvrez une nouvelle fenêtre de terminal et exécutez la commande suivante pour créer et déployer l’application entière sur une instance d’AEM locale s’exécutant sur http://localhost:4502.
$ cd <src>/aem-sample-we-retail-journal
$ mvn -PautoInstallSinglePackage clean install
Dans ce projet, le profil Maven pour construire et assembler l'ensemble du projet est autoInstallSinglePackage
Si vous recevez une erreur au cours de la génération, vérifiez que votre fichier Maven settings.xml contient le référentiel d’artefacts Maven d’Adobe.
Accédez à:
L’application de Journal We.Retail doit être affichée dans l’éditeur AEM Sites.
En mode Modifier, sélectionnez un composant à modifier et mettez à jour le contenu.
Sélectionnez l'icône Propriétés de la page pour ouvrir Propriétés de la page. Sélectionnez Modifier le modèle pour ouvrir le modèle de la page.
Dans la dernière version de SPA Editor, Les modèles modifiables peuvent être utilisés de la même manière que dans les implémentations traditionnelles de Sites. Ceci sera réexaminé ultérieurement avec notre composant personnalisé.
Seuls AEM 6.5 et AEM 6.4 + Service Pack 5 prennent en charge les modèles modifiables.
SPA itérations de développement se produisent indépendamment de l'AEM. Lorsque le SPA est prêt à être déployé en AEM, les étapes de haut niveau suivantes ont lieu (comme illustré ci-dessus).
Persona : Développeur AEM
Un composant AEM sera d’abord créé. Le composant AEM est responsable du rendu des propriétés JSON lues par le composant Réagir. Le composant AEM est également chargé de fournir une boîte de dialogue pour toutes les propriétés modifiables du composant.
A l'aide de Eclipse ou d'un autre IDE, importez le projet We.Retail Journal Maven.
Mettez à jour le réacteur pom.xml pour supprimer le module externe Apache Rat. Ce module externe vérifie chaque fichier pour s’assurer qu’il existe un en-tête de licence. Pour nos besoins, nous n'avons pas besoin de nous préoccuper de cette fonctionnalité.
Dans aem-sample-we-retail-journal/pom.xml remove apache-rate-plugin :
<!-- Remove apache-rat-plugin -->
<plugin>
<groupId>org.apache.rat</groupId>
<artifactId>apache-rat-plugin</artifactId>
<configuration>
<excludes combine.children="append">
<exclude>*</exclude>
...
</excludes>
</configuration>
<executions>
<execution>
<phase>verify</phase>
<goals>
<goal>check</goal>
</goals>
</execution>
</executions>
</plugin>
Dans le module we-commerce-journal-content (<src>/aem-sample-we-retail-journal/ui.apps
), créez un nouveau noeud sous ui.apps/jcr_root/apps/we-retail-journal/components
nommé helloworld de type cq:Component.
Ajoutez les propriétés suivantes au composant helloworld, représenté en XML (/helloworld/.content.xml
) ci-dessous :
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:description="Hello World Component for We.Retail Journal"
jcr:primaryType="cq:Component"
jcr:title="Hello World"
componentGroup="We.Retail Journal" />
Pour illustrer la fonction Modèles modifiables, nous avons délibérément défini le componentGroup="Custom Components"
. Dans un projet réel, il est préférable de minimiser le nombre de groupes de composants, de sorte qu’un meilleur groupe serait “We.Retail Journal” pour correspondre aux autres composants de contenu.
Seuls AEM 6.5 et AEM 6.4 + Service Pack 5 prennent en charge les modèles modifiables.
Une boîte de dialogue sera ensuite créée pour permettre la configuration d'un message personnalisé pour le composant Hello World. Sous /apps/we-retail-journal/components/helloworld
, ajoutez un nom de noeud cq:dialog de nt:unstructured.
Le cq:dialog affiche un seul champ de texte qui conserve le texte dans une propriété nommée message. Au-dessous du nouveau cq:dialog ajoutez les noeuds et propriétés suivants, représentés en XML ci-dessous (helloworld/_cq_dialog/.content.xml
) :
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="We.Retail Journal - Hello World"
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">
<message
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Message"
name="./message"
required="{Boolean}true"/>
</items>
</column>
</items>
</columns>
</items>
</properties>
</items>
</tabs>
</items>
</content>
</jcr:root>
La définition de noeud XML ci-dessus crée une boîte de dialogue avec un seul champ de texte qui permet à un utilisateur de saisir un “message”. Notez la propriété name="./message"
dans le noeud <message />
. Il s’agit du nom de la propriété qui sera stockée dans le JCR dans AEM.
Une boîte de dialogue de stratégie vide sera ensuite créée (cq:design_dialog
). La boîte de dialogue Stratégie est nécessaire pour afficher le composant dans l’éditeur de modèles. Pour ce cas d'utilisation simple, il s'agira d'une boîte de dialogue vide.
Sous /apps/we-retail-journal/components/helloworld
, ajoutez un nom de noeud cq:design_dialog
de nt:unstructured
.
La configuration est représentée en XML ci-dessous (helloworld/_cq_design_dialog/.content.xml
).
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured" />
Déployez la base de code vers AEM à partir de la ligne de commande :
$ cd <src>/aem-sample-we-retail-journal/content
$ mvn -PautoInstallPackage clean install
Dans CRXDE Lite, vérifiez que le composant a été déployé en inspectant le dossier sous /apps/we-retail-journal/components:
Persona : Développeur AEM
Un Sling Model est ensuite créé pour sauvegarder le composant Hello World. Dans un cas d’utilisation WCM traditionnel, Sling Model implémente toute logique métier et un script de rendu côté serveur (HTL) effectue un appel à Sling Model. Le script de rendu reste ainsi relativement simple.
Sling Models sont également utilisées dans le cas d’utilisation SPA pour implémenter la logique métier côté serveur. La différence est que dans le cas d’utilisation de SPA, Sling Models expose ses méthodes comme JSON sérialisé.
Il est recommandé aux développeurs d’utiliser AEM Composants principaux lorsque cela est possible. Entre autres fonctionnalités, les composants principaux fournissent Sling Models une sortie JSON "SPA-ready", ce qui permet aux développeurs de se concentrer davantage sur la présentation frontale.
Dans l’éditeur de votre choix, ouvrez le projet we-commerce-journal-commons ( <src>/aem-sample-we-retail-journal/bundles/commons
).
Dans le package com.adobe.cq.sample.spa.commons.impl.models
:
HelloWorld
.com.adobe.cq.export.json.ComponentExporter.
L'interface ComponentExporter
doit être implémentée pour que Sling Model soit compatible avec AEM Content Services.
package com.adobe.cq.sample.spa.commons.impl.models;
import com.adobe.cq.export.json.ComponentExporter;
public class HelloWorld implements ComponentExporter {
@Override
public String getExportedType() {
return null;
}
}
Ajoutez une variable statique nommée RESOURCE_TYPE
pour identifier le type de ressource du composant HelloWorld :
...
public class HelloWorld implements ComponentExporter {
static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";
...
}
Ajoutez les annotations OSGi pour @Model
et @Exporter
. L'annotation @Model
enregistre la classe sous la forme Sling Model. L'annotation @Exporter
expose les méthodes sous forme de JSON sérialisé à l'aide de la structure Jackson Exporter.
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import com.adobe.cq.export.json.ExporterConstants;
...
@Model(
adaptables = SlingHttpServletRequest.class,
adapters = {ComponentExporter.class},
resourceType = HelloWorld.RESOURCE_TYPE
)
@Exporter(
name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
extensions = ExporterConstants.SLING_MODEL_EXTENSION
)
public class HelloWorld implements ComponentExporter {
...
Mettez en oeuvre la méthode getDisplayMessage()
pour renvoyer la propriété JCR message
. Utilisez l'annotation Sling Model de @ValueMapValue
pour faciliter la récupération de la propriété message
stockée sous le composant. L'annotation @Optional
est importante, car lorsque le composant est ajouté pour la première fois à la page, message
ne sera pas renseigné.
Dans le cadre de la logique métier, une chaîne, "Hello", sera précédée du message.
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.apache.sling.models.annotations.Optional;
...
public class HelloWorld implements ComponentExporter {
static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";
private static final String PREPEND_MSG = "Hello";
@ValueMapValue @Optional
private String message;
public String getDisplayMessage() {
if(message != null && message.length() > 0) {
return PREPEND_MSG + " " + message;
}
return null;
}
...
Le nom de la méthode getDisplayMessage
est important. Lorsque Sling Model est sérialisé avec Jackson Exporter, il est exposé en tant que propriété JSON : displayMessage
. Jackson Exporter sérialisera et exposera toutes les méthodes getter
qui ne prennent pas de paramètre (sauf si explicitement indiqué pour ignorer). Plus tard, dans l’application Réagir / Angular, nous lirons cette valeur de propriété et l’afficherons dans le cadre de l’application.
La méthode getExportedType
est également importante. La valeur du composant resourceType
sera utilisée pour "mapper" les données JSON au composant frontal (Angular / React). Nous étudierons cette question dans la section suivante.
Implémentez la méthode getExportedType()
pour renvoyer le type de ressource du composant HelloWorld
.
@Override
public String getExportedType() {
return RESOURCE_TYPE;
}
Le code complet de HelloWorld.java se trouve ici.
Déployez le code vers AEM à l’aide d’Apache Maven :
$ cd <src>/sample-we-retail-spa-content/bundles/commons
$ mvn -PautoInstallPackage clean install
Vérifiez le déploiement et l'enregistrement de Sling Model en accédant à Status > Sling Models dans la console OSGi.
Vous devez voir que le modèle Sling HelloWorld
est lié au type de ressource Sling we-retail-journal/components/helloworld
et qu'il est enregistré comme Sling Model Exporter Servlet :
com.adobe.cq.sample.spa.commons.impl.models.HelloWorld - we-retail-journal/components/helloworld
com.adobe.cq.sample.spa.commons.impl.models.HelloWorld exports 'we-retail-journal/components/helloworld' with selector 'model' and extension '[Ljava.lang.String;@6480f3e5' with exporter 'jackson'
Persona : Développeur frontal
Ensuite, le composant Réagir sera créé. Ouvrez le module response-app ( <src>/aem-sample-we-retail-journal/react-app
) à l’aide de l’éditeur de votre choix.
N'hésitez pas à sauter cette section si vous êtes intéressé par Développement angulaire.
Dans le dossier react-app
, accédez au dossier src. Développez le dossier de composants pour vue les fichiers de composants de Réagir existants.
Ajoutez un nouveau fichier sous le dossier de composants nommé HelloWorld.js
.
Ouvrez HelloWorld.js
. Ajoutez une instruction d'importation pour importer la bibliothèque de composants Réagir. Ajoutez une deuxième instruction d'importation pour importer l'aide MapTo
fournie par l'Adobe. L'assistance MapTo
fournit un mappage du composant Réagir au JSON du composant AEM.
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
Sous les importations, créez une nouvelle classe appelée HelloWorld
qui étend l'interface Réagir Component
. Ajoutez la méthode render()
requise à la classe HelloWorld
.
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
class HelloWorld extends Component {
render() {
}
}
L'assistance MapTo
inclut automatiquement un objet nommé cqModel
dans les props du composant Réagir. Le cqModel
comprend toutes les propriétés exposées par le Sling Model.
Souvenez-vous que le Sling Model créé précédemment contient une méthode getDisplayMessage()
. getDisplayMessage()
est converti en une clé JSON nommée displayMessage
lors de la sortie.
Implémentez la méthode render()
pour générer une balise h1
contenant la valeur displayMessage
. JSX, une extension de syntaxe à JavaScript, est utilisé pour renvoyer l’annotation finale du composant.
...
class HelloWorld extends Component {
render() {
if(this.props.displayMessage) {
return (
<div className="cmp-helloworld">
<h1 className="cmp-helloworld_message">{this.props.displayMessage}</h1>
</div>
);
}
return null;
}
}
Mettez en oeuvre une méthode de modification de la configuration. Cette méthode est transmise par l'aide MapTo
et fournit à l'éditeur AEM des informations pour afficher un espace réservé au cas où le composant serait vide. Cela se produit lorsque le composant est ajouté au SPA mais n’a pas encore été créé. Ajoutez les éléments suivants sous la classe HelloWorld
:
...
class HelloWorld extends Component {
...
}
const HelloWorldEditConfig = {
emptyLabel: 'Hello World',
isEmpty: function(props) {
return !props || !props.displayMessage || props.displayMessage.trim().length < 1;
}
};
...
À la fin du fichier, appelez l'assistance MapTo
, en transmettant la classe HelloWorld
et la classe HelloWorldEditConfig
. Le composant Réagir sera alors mappé au composant AEM en fonction du type de ressource du composant AEM : we-retail-journal/components/helloworld
.
MapTo('we-retail-journal/components/helloworld')(HelloWorld, HelloWorldEditConfig);
Le code terminé pour HelloWorld.js se trouve ici.
Ouvrez le fichier ImportComponents.js
. Il se trouve à <src>/aem-sample-we-retail-journal/react-app/src/ImportComponents.js
.
Ajoutez une ligne pour exiger HelloWorld.js
avec les autres composants du lot JavaScript compilé :
...
require('./components/Text');
require('./components/Image');
require('./components/HelloWorld');
...
Dans le dossier components
, créez un nouveau fichier nommé HelloWorld.css
en tant que frère de HelloWorld.js.
Renseignez le fichier avec ce qui suit pour créer un style de base pour le composant HelloWorld
:
/* HelloWorld.css to style HelloWorld component */
.cmp-helloworld_message {
text-align: center;
color: #ff505e;
text-transform: unset;
letter-spacing: unset;
}
Ouvrez à nouveau HelloWorld.js
et mettez à jour sous les instructions d'importation pour exiger HelloWorld.css
:
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
require('./HelloWorld.css');
...
Déployez le code vers AEM à l’aide d’Apache Maven :
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
Dans CRXDE-Lite, ouvrez /apps/we-retail-journal/react/clientlibs/we-retail-journal-react/js/app.js
. Effectuez une recherche rapide de HelloWorld dans app.js pour vérifier que le composant React a été inclus dans l’application compilée.
app. js correspond à l’application React fournie. Le code n'est plus lisible par l'homme. La commande npm run build
a déclenché une compilation optimisée qui génère du code JavaScript compilé qui peut être interprété par les navigateurs modernes.
Persona : Développeur frontal
N'hésitez pas à sauter cette section si vous souhaitez uniquement développer React.
Ensuite, le composant angulaire sera créé. Ouvrez le module angular-app (<src>/aem-sample-we-retail-journal/angular-app
) à l’aide de l’éditeur de votre choix.
Dans le dossier angular-app
, accédez à son dossier src
. Développez le dossier de composants pour vue des fichiers de composants angulaires existants.
Ajoutez un nouveau dossier sous le dossier de composants nommé helloworld
. Sous le dossier helloworld
, ajoutez de nouveaux fichiers nommés helloworld.component.css, helloworld.component.html, helloworld.component.ts
.
/angular-app
/src
/app
/components
+ /helloworld
+ helloworld.component.css
+ helloworld.component.html
+ helloworld.component.ts
Ouvrez helloworld.component.ts
. Ajoutez une instruction import pour importer les classes Angular Component
et Input
. Créez un nouveau composant, en pointant styleUrls
et templateUrl
sur helloworld.component.css
et helloworld.component.html
. Enfin, exportez la classe HelloWorldComponent
avec l'entrée displayMessage
attendue.
//helloworld.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-helloworld',
host: { 'class': 'cmp-helloworld' },
styleUrls:['./helloworld.component.css'],
templateUrl: './helloworld.component.html',
})
export class HelloWorldComponent {
@Input() displayMessage: string;
}
Si vous vous souvenez du Sling Model créé précédemment, il existait une méthode getDisplayMessage(). Le JSON sérialisé de cette méthode sera displayMessage, que nous lisons maintenant dans l’application Angular.
Ouvrez helloworld.component.html
pour inclure une balise h1
qui imprime la propriété displayMessage
:
<h1 *ngIf="displayMessage" class="cmp-helloworld_message">
{{displayMessage}}
</h1>
Mettez à jour helloworld.component.css
pour inclure certains styles de base pour le composant.
:host-context {
display: block;
};
.cmp-helloworld {
display:block;
}
.cmp-helloworld_message {
text-align: center;
color: #ff505e;
text-transform: unset;
letter-spacing: unset;
}
Mettre à jour helloworld.component.spec.ts
avec le banc d'essai suivant :
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HelloWorldComponent } from './helloworld.component';
describe('HelloWorld', () => {
let component: HelloWorldComponent;
let fixture: ComponentFixture<HelloWorldComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HelloWorldComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HelloWorldComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Mise à jour suivante src/components/mapping.ts
pour inclure HelloWorldComponent
. Ajoutez un HelloWorldEditConfig
qui marquera l’espace réservé dans l’éditeur AEM avant que le composant n’ait été configuré. Enfin, ajoutez une ligne pour mapper le composant AEM au composant Angular avec l'aide MapTo
.
// src/components/mapping.ts
import { HelloWorldComponent } from "./helloworld/helloworld.component";
...
const HelloWorldEditConfig = {
emptyLabel: 'Hello World',
isEmpty: function(props) {
return !props || !props.displayMessage || props.displayMessage.trim().length < 1;
}
};
...
MapTo('we-retail-journal/components/helloworld')(HelloWorldComponent, HelloWorldEditConfig);
Le code complet de mapping.ts se trouve ici.
Mettez à jour src/app.module.ts
pour mettre à jour le NgModule. Ajoutez HelloWorldComponent
en tant que déclaration qui appartient à AppModule. Ajoutez également HelloWorldComponent
en tant que entryComponent afin qu’il soit compilé et dynamiquement inclus dans l’application au fur et à mesure que le modèle JSON est traité.
import { HelloWorldComponent } from './components/helloworld/helloworld.component';
...
@NgModule({
imports: [BrowserModule.withServerTransition({ appId: 'we-retail-sample-angular' }),
SpaAngularEditableComponentsModule,
AngularWeatherWidgetModule.forRoot({
key: "37375c33ca925949d7ba331e52da661a",
name: WeatherApiName.OPEN_WEATHER_MAP,
baseUrl: 'http://api.openweathermap.org/data/2.5'
}),
AppRoutingModule,
BrowserTransferStateModule],
providers: [ModelManagerService,
{ provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent,
TextComponent,
ImageComponent,
WeatherComponent,
NavigationComponent,
MenuComponent,
MainContentComponent,
HelloWorldComponent],
entryComponents: [TextComponent,
ImageComponent,
WeatherComponent,
NavigationComponent,
MainContentComponent,
HelloWorldComponent],
bootstrap: [AppComponent]
})
Le code terminé pour app.module.ts se trouve ici.
Déployez le code vers AEM à l’aide de Maven :
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
Dans CRXDE-Lite, ouvrez /apps/we-retail-journal/angular/clientlibs/we-retail-journal-angular/js/main.js
. Effectuez une recherche rapide de HelloWorld dans main.js
pour vérifier que le composant Angular a été inclus.
main. js l’application Angular fournie. Le code n'est plus lisible par l'homme. La commande npm run build a déclenché une compilation optimisée qui génère du code JavaScript compilé qui peut être interprété par les navigateurs modernes.
Accédez au modèle modifiable pour les versions de réaction et/ou angulaire :
Sélectionnez le Conteneur de mise en page principal et sélectionnez l'icône Stratégie pour ouvrir sa stratégie :
Sous Propriétés > Composants autorisés, recherchez Custom Components. Vous devriez voir le composant Hello World, puis le sélectionner. Enregistrez vos modifications en cochant la case située dans le coin supérieur droit.
Après l’enregistrement, vous devriez voir le composant HelloWorld comme composant autorisé dans le Conteneur de mise en page.
Seuls AEM 6.5 et AEM 6.4.5 prennent en charge la fonction Modèle modifiable de l’éditeur de SPA. Si vous utilisez AEM 6.4, vous devez configurer manuellement la stratégie pour les composants autorisés par le biais du CRXDE Lite : /conf/we-retail-journal/react/settings/wcm/policies/wcm/foundation/components/responsivegrid/default
ou /conf/we-retail-journal/angular/settings/wcm/policies/wcm/foundation/components/responsivegrid/default
CRXDE Lite présentant les configurations de stratégie mises à jour pour Composants autorisés dans le Conteneur de mise en page :
Accédez aux pages Angular ou React :
Recherchez le composant Hello World et faites glisser et déposez le composant Hello World sur la page.
L’espace réservé doit apparaître.
Sélectionnez le composant et ajoutez un message dans la boîte de dialogue, par exemple "Monde" ou "Votre nom". Enregistrez les modifications.
Notez que la chaîne "Hello" est toujours précédée du message. Il s'agit du résultat de la logique de HelloWorld.java
Sling Model.
Solution terminée pour le composant HelloWorld
Erreur : Erreur lors de l'importation du We.Retail Journal projet dans Eclipse pour les exécutions d'objectif non reconnues :
Execution npm install, Execution npm run build, Execution default-analyze-classes*
Résolution : Cliquez sur Terminer pour les résoudre ultérieurement. Cela ne doit pas empêcher l'achèvement du tutoriel.
Erreur : Le module React react-app
ne se construit pas correctement lors d'une génération Maven.
Résolution : Essayez de supprimer le node_modules
dossier situé sous l'application réagir. Réexécutez la commande Apache Maven mvn clean install -PautoInstallSinglePackage
à partir de la racine du projet.
Si une dépendance d'AEM n'est pas satisfaite, que ce soit dans le AEM Package Manager ou dans la console Web (console Felix), cela indique que la fonction de l'éditeur de n'est pas disponible.
Erreur : Même après un déploiement réussi et la vérification que les versions compilées des applications React/Angular comportent le helloworld
composant mis à jour, mon composant ne s’affiche pas lorsque je le fais glisser sur la page. Je peux voir le composant dans l’interface utilisateur AEM.
Résolution : Effacez l'historique/le cache de votre navigateur et/ou ouvrez un nouveau navigateur ou utilisez le mode Incognito. Si cela ne fonctionne pas, invalidez le cache de bibliothèque client sur l’instance d’AEM locale. aem tente de mettre en cache de grandes bibliothèques clientes afin d'être efficace. Il peut arriver que l’invalidation manuelle du cache soit nécessaire pour résoudre les problèmes de mise en cache du code obsolète.
Accédez à : http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html et cliquez sur Invalider le cache. Revenez à votre page Réagir/Angulaire et actualisez la page.