Ce tutoriel est obsolète. Il est recommandé de procéder comme suit : Prise en main de l’éditeur et de l’Angular d’AEM SPA ou Prise en main de l’éditeur SPA d’AEM et de React
AEM Éditeur SPA prend en charge la modification contextuelle d’une ou de plusieurs applications d’une seule page. Ce tutoriel présente le développement SPA à utiliser avec AEM SDK JS de l’éditeur SPA. Le tutoriel étend l’application We.Retail Journal en ajoutant un composant Hello World personnalisé. Les utilisateurs peuvent suivre le tutoriel à l’aide des structures React ou Angular.
La fonction Éditeur d’application sur une seule page (SPA) requiert AEM Service Pack 2 ou version ultérieure.
L’éditeur SPA est la solution recommandée pour les projets qui nécessitent SPA rendu côté client basé sur une structure (par exemple, React ou Angular).
Ce tutoriel est conçu pour mettre en évidence les étapes nécessaires pour mapper un composant SPA à un composant AEM afin d’activer la modification contextuelle. 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 des structures d’Angular. Le tutoriel couvre les tâches de développement front-end et back-end.
Il est recommandé de passer en revue les ressources suivantes avant de commencer ce tutoriel :
Ce tutoriel est conçu pour les éléments suivants :
Adobe Experience Manager 6.5 ou Adobe Experience Manager 6.4 + Service Pack 5
Dans ce tutoriel, les technologies et outils suivants doivent être installés :
Vérifiez deux fois 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 consiste à mapper un composant SPA à un composant AEM. AEM des composants, exécution côté serveur, exportation de contenu sous la forme de JSON. Le contenu JSON est consommé par le SPA, en exécutant côté client dans le navigateur. Un mappage 1:1 entre les composants SPA et un composant AEM est créé.
Cadres populaires React JS et Angular sont prises en charge par défaut. Les utilisateurs peuvent suivre ce tutoriel dans Angular ou React, quel que soit le framework avec lequel ils se sentent le plus à l’aise.
SPA développement a un pied dans AEM développement, et l'autre dehors. L'objectif est de permettre SPA développement de se produire de manière indépendante, et (principalement) indépendante d'AEM.
SPA développement a un pied dans AEM développement, et l'autre dans le développement - permettant à un développement plus proche de se produire de manière indépendante, et (surtout) agnostique envers l'.
L’objectif de ce tutoriel est d’étendre l’application We.Retail Journal avec un nouveau composant. Commencez par télécharger le code source de l’application We.Retail Journal et par le déployer sur une AEM locale.
Télécharger la plus récente Code journal We.Retail de GitHub.
Ou clonez le référentiel à partir de la ligne de commande :
$ git clone git@github.com:adobe/aem-sample-we-retail-journal.git
Le tutoriel va travailler sur la master branche avec 1.2.1-SNAPSHOT version 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 module.bundles
: Contient deux lots OSGi : les biens communs et le noyau qui contiennent Sling Models et tout autre code Java.ui.apps
: contient les parties /apps du projet, par exemple les bibliothèques client 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 We.Retail Journal React. Il s’agit à la fois d’un module Maven et d’un projet webpack.angular-app
: Application d’Angular We.Retail Journal. Il s’agit d’une Maven et 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 créer et empaqueter l’ensemble du projet est autoInstallSinglePackage
Accédez à :
L’application We.Retail Journal doit s’afficher dans l’éditeur AEM Sites.
Dans Modifier , sélectionnez un composant à modifier et effectuez une mise à jour du contenu.
Sélectionnez la Propriétés de la page pour ouvrir la Propriétés de la page. Sélectionner Modifier le modèle pour ouvrir le modèle de la page.
Dans la dernière version de SPA Editor, Modèles modifiables peut être utilisé de la même manière qu’avec les implémentations Sites traditionnelles. Il sera réexaminé ultérieurement avec notre composant personnalisé.
Uniquement 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 d’AEM. Lorsque le SPA est prêt à être déployé dans AEM, les étapes de haut niveau suivantes ont lieu (comme illustré ci-dessus).
Persona : AEM Développeur
Un composant AEM sera d’abord créé. Le composant AEM est responsable du rendu des propriétés JSON lues par le composant React. Le composant AEM est également chargé de fournir une boîte de dialogue pour toutes les propriétés modifiables du composant.
Utilisation Eclipseou autre IDEImportez le projet Maven We.Retail Journal.
Mettre à jour le réacteur pom.xml pour supprimer la variable Apache Rat module externe Ce module externe vérifie chaque fichier pour s’assurer qu’il existe un en-tête de licence. Pour nos besoins, cette fonctionnalité n’est pas nécessaire.
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 we-retail-journal-content (<src>/aem-sample-we-retail-journal/ui.apps
) crée un noeud sous ui.apps/jcr_root/apps/we-retail-journal/components
named helloworld de type cq:Component.
Ajoutez les propriétés suivantes au helloworld composant, 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 la variable 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 soit “We.Retail Journal” pour correspondre aux autres composants de contenu.
Uniquement AEM 6.5 et AEM 6.4 + Service Pack 5 prennent en charge les modèles modifiables.
Une boîte de dialogue s’ouvre ensuite pour permettre la configuration d’un message personnalisé pour la variable Hello World composant. Sous /apps/we-retail-journal/components/helloworld
ajouter 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. Sous le 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 <message />
noeud . 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 alors 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
ajouter 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 pour AEM à partir de la ligne de commande :
$ cd <src>/aem-sample-we-retail-journal/content
$ mvn -PautoInstallPackage clean install
Dans CRXDE Lite valider le déploiement du composant en examinant le dossier sous /apps/we-retail-journal/components:
Persona : AEM Développeur
Suivant un Sling Model est créé pour sauvegarder la variable Hello World composant. Dans le cas d’utilisation WCM classique, la variable Sling Model met en oeuvre toute logique commerciale et un script de rendu côté serveur (HTL) effectue un appel à la fonction Sling Model. Le script de rendu reste ainsi relativement simple.
Sling Models sont également utilisés dans le cas d’utilisation SPA pour implémenter la logique commerciale côté serveur. La différence est que dans la variable SPA le cas d’utilisation, Sling Models expose ses méthodes en tant que JSON sérialisé.
Il est recommandé aux développeurs d’utiliser Composants principaux AEM si possible. Entre autres fonctionnalités, les composants principaux fournissent les Sling Models avec une sortie JSON "SPA", ce qui permet aux développeurs de se concentrer davantage sur la présentation frontale.
Dans l’éditeur de votre choix, ouvrez le we-retail-journal-commons project ( <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.
Le ComponentExporter
doit être implémentée pour que la variable Sling Model pour être 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;
}
}
Ajouter une variable statique nommée RESOURCE_TYPE
pour identifier la variable HelloWorld type de ressource du composant :
...
public class HelloWorld implements ComponentExporter {
static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";
...
}
Ajout d’annotations OSGi pour @Model
et @Exporter
. Le @Model
annotation enregistre la classe en tant que Sling Model. Le @Exporter
annotation expose les méthodes sous la forme d’un fichier JSON sérialisé à l’aide de la fonction Jackson Exporter framework.
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 {
...
Mise en oeuvre de la méthode getDisplayMessage()
pour renvoyer la propriété JCR message
. Utilisez la variable Sling Model annotation de @ValueMapValue
pour faciliter la récupération de la propriété message
stocké sous le composant. Le @Optional
l’annotation est importante, car lorsque le composant est ajouté pour la première fois à la page, message
ne sera pas renseignée.
Dans le cadre de la logique métier, une chaîne "Hello", sera ajouté en préfixe au 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;
}
...
Nom de la méthode getDisplayMessage
est important. Lorsque la variable Sling Model est sérialisé avec la variable Jackson Exporter il sera exposé en tant que propriété JSON : displayMessage
. Le Jackson Exporter sérialisera et présentera tous les getter
méthodes qui ne prennent pas de paramètre (sauf si elles sont explicitement marquées pour ignorer). Plus loin dans l’application React/Angular, nous allons lire cette valeur de propriété et l’afficher dans le cadre de l’application.
La méthode getExportedType
est également important. La valeur du composant resourceType
sera utilisé pour "mapper" les données JSON au composant front-end (Angular/React). Nous allons l’explorer dans la section suivante.
Mise en oeuvre de la méthode getExportedType()
pour renvoyer le type de ressource de la fonction HelloWorld
composant.
@Override
public String getExportedType() {
return RESOURCE_TYPE;
}
Le code complet pour HelloWorld.java se trouve ici.
Déployez le code pour AEM à l’aide d’Apache Maven :
$ cd <src>/sample-we-retail-spa-content/bundles/commons
$ mvn -PautoInstallPackage clean install
Vérification du déploiement et de l’enregistrement de la variable Sling Model en accédant à État > Modèles Sling dans la console OSGi.
Vous devriez constater que la variable HelloWorld
Le modèle Sling est lié au we-retail-journal/components/helloworld
Type de ressource Sling et qu’il est enregistré en tant que 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 front-end
Ensuite, le composant React sera créé. Ouvrez le response-app module ( <src>/aem-sample-we-retail-journal/react-app
) à l’aide de l’éditeur de votre choix.
N’hésitez pas à ignorer cette section si vous souhaitez uniquement Développement des Angulars.
Dans le react-app
accédez au dossier src. Développez le dossier des composants pour afficher les fichiers de composant React 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 React. Ajoutez une deuxième instruction d’importation pour importer la variable MapTo
assistance fournie par Adobe. Le MapTo
L’assistant fournit un mappage du composant React sur le fichier 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 nommée HelloWorld
qui étend React Component
. Ajoutez les render()
à la méthode HelloWorld
classe .
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
class HelloWorld extends Component {
render() {
}
}
Le MapTo
L’assistant inclut automatiquement un objet nommé cqModel
dans le cadre des props du composant React. Le cqModel
inclut toutes les propriétés exposées par la variable Sling Model.
Mémoriser Sling Model created précédemment contient une méthode getDisplayMessage()
. getDisplayMessage()
est traduit en tant que clé JSON nommée displayMessage
lors de la sortie.
Mettez en oeuvre le render()
pour générer une h1
qui contient la valeur de displayMessage
. JSX, une extension de syntaxe à JavaScript, est utilisée pour renvoyer le balisage final 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 configuration de modification. Cette méthode est transmise via la méthode MapTo
aide et fournit à l’éditeur d’AEM des informations pour afficher un espace réservé dans le cas où le composant est vide. Cela se produit lorsque le composant est ajouté à la SPA mais n’a pas encore été créé. Ajoutez ce qui suit sous le HelloWorld
Classe :
...
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 la fonction MapTo
assistance, transmission de HelloWorld
et la variable HelloWorldEditConfig
. Le composant React est 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
. Vous pouvez le trouver à l’adresse <src>/aem-sample-we-retail-journal/react-app/src/ImportComponents.js
.
Ajoutez une ligne pour que la variable HelloWorld.js
avec les autres composants du lot JavaScript compilé :
...
require('./components/Text');
require('./components/Image');
require('./components/HelloWorld');
...
Dans le components
créer un dossier nommé HelloWorld.css
comme frère de HelloWorld.js.
Renseignez le fichier avec ce qui suit pour créer un style de base pour le HelloWorld
component :
/* HelloWorld.css to style HelloWorld component */
.cmp-helloworld_message {
text-align: center;
color: #ff505e;
text-transform: unset;
letter-spacing: unset;
}
rouvrir HelloWorld.js
et mettre à 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 pour AEM à l’aide d’Apache Maven :
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
Dans CRXDE-Lite open /apps/we-retail-journal/react/clientlibs/we-retail-journal-react/js/app.js
. Recherchez rapidement HelloWorld dans app.js pour vérifier que le composant React a été inclus dans l’application compilée.
app.js est l’application React groupée. Le code n’est plus lisible à l’oeil. Le npm run build
a déclenché une version optimisée qui génère du code JavaScript compilé pouvant être interprété par les navigateurs modernes.
Persona : Développeur front-end
N’hésitez pas à ignorer cette section si vous n’êtes intéressé que par le développement React.
Ensuite, le composant Angular sera créé. Ouvrez le angular-app module (<src>/aem-sample-we-retail-journal/angular-app
) à l’aide de l’éditeur de votre choix.
Dans le angular-app
accéder à son dossier ; src
dossier. Développez le dossier de composants pour afficher les fichiers de composants d’Angular existants.
Ajoutez un nouveau dossier sous le dossier de composants nommé helloworld
. Sous la 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
. Ajouter une instruction d’importation pour importer l’Angular Component
et Input
classes. Créez un composant, en pointant le styleUrls
et templateUrl
to helloworld.component.css
et helloworld.component.html
. Enfin exporter la classe HelloWorldComponent
avec l’entrée attendue de displayMessage
.
//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 fichier JSON sérialisé de cette méthode sera displayMessage, que nous lisons maintenant dans l’application Angular.
Ouvrir helloworld.component.html
pour inclure un h1
qui imprime la balise displayMessage
property:
<h1 *ngIf="displayMessage" class="cmp-helloworld_message">
{{displayMessage}}
</h1>
Mettre à 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 la variable HelloWorldComponent
. Ajouter un HelloWorldEditConfig
qui marquera l’espace réservé dans l’éditeur d’AEM avant la configuration du composant. Enfin, ajoutez une ligne pour mapper le composant AEM au composant Angular avec le MapTo
assistance.
// 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 pour mapping.ts se trouve ici.
Mettre à jour src/app.module.ts
pour mettre à jour la variable NgModule. Ajoutez la variable HelloWorldComponent
as a déclaration qui appartient à la variable AppModule. Ajoutez également la variable HelloWorldComponent
as a entryComponent afin qu’il soit compilé et inclus dynamiquement dans l’application au fur et à mesure du traitement du modèle JSON.
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 pour AEM à l’aide de Maven :
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
Dans CRXDE-Lite open /apps/we-retail-journal/angular/clientlibs/we-retail-journal-angular/js/main.js
. Recherchez rapidement des HelloWorld in main.js
pour vérifier que le composant Angular a été inclus.
main.js est l’application d’Angular groupée. Le code n’est plus lisible à l’oeil. La commande npm run build a déclenché une version optimisée qui génère du code JavaScript compilé pouvant être interprété par les navigateurs modernes.
Accédez au modèle modifiable pour les versions React et/ou Angular :
Sélectionnez la principale Conteneur de mises en page et sélectionnez la variable Stratégie pour ouvrir sa stratégie :
Sous Propriétés > Composants autorisés, effectuez une recherche pour Custom Components. Vous devriez voir la variable Hello World , sélectionnez-le. Enregistrez vos modifications en cochant la case située dans le coin supérieur droit.
Après l’enregistrement, le HelloWorld en tant que composant autorisé dans Conteneur de mises en page.
Seuls AEM 6.5 et AEM 6.4.5 prennent en charge la fonction de modèle modifiable de l’éditeur de ressources. Si vous utilisez AEM 6.4, vous devez configurer manuellement la stratégie pour les composants autorisés via 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 mises en page:
Accédez aux pages Angular ou React :
Recherchez le Hello World et faites glisser et déposez le composant Hello World sur la page.
L’espace réservé doit s’afficher.
Sélectionnez le composant et ajoutez un message dans la boîte de dialogue, par exemple "World" (Monde) ou "Your Name" (Votre nom). Enregistrez les modifications.
Notez que la chaîne "Hello" est toujours précédée du message. Cela est le résultat de la logique dans la variable HelloWorld.java
Sling Model.
Solution terminée pour le composant HelloWorld
Erreur : Erreur lors de l’importation du We.Retail Journal dans Eclipse pour les exécutions d’objectifs 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 la fin du tutoriel.
Erreur: le module React, react-app
, ne se crée pas correctement lors d’une génération Maven.
Résolution : Essayez de supprimer la variable node_modules
sous le dossier response-app. Exécutez à nouveau la commande Apache Maven. mvn clean install -PautoInstallSinglePackage
à partir de la racine du projet.
Si une dépendance AEM n’est pas satisfaite, dans l’un des AEM Gestionnaire de modules ou dans la variable Console web d’AEM (Console Felix), cela indique que SPA fonction d’éditeur 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 ont été mises à jour helloworld
n’est pas affiché lorsque je le fais glisser sur la page. Je peux voir le composant dans l’interface utilisateur d’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 la bibliothèque cliente sur l’instance d’AEM locale. AEM tente de mettre en cache de grandes bibliothèques clientes afin d’être efficace. Parfois, l’invalidation manuelle du cache est 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 à la page React/Angular et actualisez-la.