Développer avec l'AEM SPA Editor - Hello World Tutorial

AVERTISSEMENT

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.

REMARQUE

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).

Lecture prérequise

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 :

  • Vidéo sur SPA Editor Feature Video - Présentation vidéo de SPA Editor et de l’application de Journal We.Retail.
  • Didacticiel React.js - Présentation du développement avec la structure React.
  • Didacticiel angulaire - Présentation du développement avec Angular

Environnement de développement local

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 :

  1. Java 11
  2. Apache Maven - 3.3.1+
  3. Node.js - 8.11.1+ et npm 5.6.0+ (npm est installé avec node.js)

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

Présentation

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éé.

Mappage des composants SPA

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.

Configuration du projet

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 projets peuvent fonctionner indépendamment du projet AEM pendant le développement frontal.
  • Les outils de création et les technologies de pointe tels que Webpack, NPM, Grunt et Gulpcontinuent d'être utilisés.
  • Pour construire pour AEM, le projet SPA est compilé et automatiquement inclus dans le projet AEM.
  • Packages AEM standard utilisés pour déployer le SPA dans l’AEM.

Présentation des artefacts et du déploiement

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.

  1. ​​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
    REMARQUE

    Le tutoriel fonctionnera avec la branche master avec la version 1.2.1-SNAPSHOT du projet.

  2. La structure suivante doit être visible :

    Structure du dossier Projet

    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.

  3. 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
    REMARQUE

    Dans ce projet, le profil Maven pour construire et assembler l'ensemble du projet est autoInstallSinglePackage

    ATTENTION

  4. Accédez à:

    L’application de Journal We.Retail doit être affichée dans l’éditeur AEM Sites.

  5. En mode Modifier, sélectionnez un composant à modifier et mettez à jour le contenu.

    Modification d’un composant

  6. 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.

    Menu Propriétés de page

  7. 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é.

    REMARQUE

    Seuls AEM 6.5 et AEM 6.4 + Service Pack 5 prennent en charge les modèles modifiables.

Présentation du développement

Développement d’une vue

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).

  1. La génération de projet AEM est appelée, ce qui déclenche à son tour la génération du projet SPA. Le Journal We.Retail utilise le module externe frontend-maven-plugin.
  2. Le projet SPA aem-clientlib-generator intègre le SPA compilé en tant que bibliothèque cliente d’un projet d’.
  3. Le projet AEM génère un module AEM, y compris le SPA compilé, ainsi que tout autre code d' de prise en charge.

Créer un composant AEM

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.

  1. 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>

  2. 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.

  3. 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" />

    Composant Hello World

    REMARQUE

    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.

  4. 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.

  5. 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>

    structure de fichiers

    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.

  6. 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" />

  7. 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:

    Structure de composants déployée dans le CRXDE Lite

Créer un modèle Sling

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é.

REMARQUE

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.

  1. Dans l’éditeur de votre choix, ouvrez le projet we-commerce-journal-commons ( <src>/aem-sample-we-retail-journal/bundles/commons).

  2. Dans le package com.adobe.cq.sample.spa.commons.impl.models :

    • Créez une nouvelle classe nommée HelloWorld.
    • Ajouter une interface d’implémentation pour com.adobe.cq.export.json.ComponentExporter.

    Assistant Nouvelle classe Java

    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;
     }
 }

  3. 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";

     ...
 }

  4. 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 {

...

  5. 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;
    }

...
    REMARQUE

    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.

  6. 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.

  7. 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'

Créer un composant de réaction

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.

REMARQUE

N'hésitez pas à sauter cette section si vous êtes intéressé par Développement angulaire.

  1. 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.

    structure du fichier composant réactionnel

  2. Ajoutez un nouveau fichier sous le dossier de composants nommé HelloWorld.js.

  3. 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';

  4. 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() {

    }
}

  5. 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;
    }
}

  6. 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;
    }
};

...

  7. À 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.

  8. 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');
...

  9. 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;
}

  10. 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');

...

  11. Déployez le code vers AEM à l’aide d’Apache Maven :

    $ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install

  12. 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.

    REMARQUE

    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.

Créer un composant angulaire

Persona : Développeur frontal

REMARQUE

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.

  1. Dans le dossier angular-app, accédez à son dossier src. Développez le dossier de composants pour vue des fichiers de composants angulaires existants.

    Structure de fichier angulaire

  2. 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

  3. 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;
}
    REMARQUE

    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.

  4. Ouvrez helloworld.component.html pour inclure une balise h1 qui imprime la propriété displayMessage :

    <h1 *ngIf="displayMessage" class="cmp-helloworld_message">
    {{displayMessage}}
</h1>

  5. 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;
}

  6. 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();
    });
});

  7. 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.

  8. 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.

  9. Déployez le code vers AEM à l’aide de Maven :

    $ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install

  10. 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.

    REMARQUE

    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.

Mise à jour du modèle

  1. Accédez au modèle modifiable pour les versions de réaction et/ou angulaire :

  2. Sélectionnez le Conteneur de mise en page principal et sélectionnez l'icône Stratégie pour ouvrir sa stratégie :

    Sélectionner la stratégie de mise en page

    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.

    Configuration de la stratégie de Conteneur de mise en page

  3. Après l’enregistrement, vous devriez voir le composant HelloWorld comme composant autorisé dans le Conteneur de mise en page.

    Composants autorisés mis à jour

    REMARQUE

    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 :

    CRXDE Lite présentant les configurations de stratégie mises à jour pour les composants autorisés dans le Conteneur de mise en page

Assemblage

  1. Accédez aux pages Angular ou React :

  2. Recherchez le composant Hello World et faites glisser et déposez le composant Hello World sur la page.

    salut monde drag + drop

    L’espace réservé doit apparaître.

    Bonjour, titulaire de la place dans le monde

  3. Sélectionnez le composant et ajoutez un message dans la boîte de dialogue, par exemple "Monde" ou "Votre nom". Enregistrez les modifications.

    composant rendu

    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.

Étapes suivantes

Solution terminée pour le composant HelloWorld

Résolution des incidents

Impossible de créer le projet dans Eclipse

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*

assistant d'erreur eclipse

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-appne 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.

Dépendances insatisfaites dans AEM

Erreur de dépendance du gestionnaire de packages

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.

Le composant ne s'affiche pas

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.

Reconstruire la bibliothèque cliente

Sur cette page