Questa esercitazione è obsoleto. Si consiglia di seguire: Guida introduttiva all'editor di SPA AEM e all'Angular o Guida introduttiva all'editor SPA AEM e React
AEM Editor SPA supporta la modifica contestuale di un’applicazione o SPA a pagina singola. Questa esercitazione è un'introduzione SPA sviluppo da utilizzare con AEM Editor JS SDK. L’esercitazione estenderà l’app We.Retail Journal aggiungendo un componente personalizzato Hello World . Gli utenti possono completare l’esercitazione utilizzando i framework React o Angular.
La funzione Editor applicazioni a pagina singola (SPA) richiede AEM service pack 2 o successivo 6.4.
L’editor di SPA è la soluzione consigliata per i progetti che richiedono SPA rendering lato client basato su framework (ad esempio, React o Angular).
Questa esercitazione ha lo scopo di evidenziare i passaggi necessari per mappare un componente SPA a un componente AEM per abilitare la modifica nel contesto. Gli utenti che iniziano questa esercitazione devono avere familiarità con i concetti di base dello sviluppo con Adobe Experience Manager, AEM e sviluppare con i framework React of Angular. L’esercitazione tratta sia le attività di sviluppo back-end che quelle front-end.
Prima di avviare questa esercitazione, è consigliabile consultare le risorse seguenti:
Questa esercitazione è progettata per:
Adobe Experience Manager 6.5 o Adobe Experience Manager 6.4 + Service Pack 5
In questa esercitazione devono essere installate le seguenti tecnologie e strumenti:
Controllare l'installazione degli strumenti di cui sopra aprendo un nuovo terminale ed eseguendo quanto segue:
$ java -version
java version "11 +"
$ mvn -version
Apache Maven 3.3.9
$ node --version
v8.11.1
$ npm --version
6.1.0
Il concetto di base consiste nel mappare un componente SPA a un componente AEM. I componenti AEM, che eseguono lato server, esportano il contenuto sotto forma di JSON. Il contenuto JSON viene utilizzato dal SPA, che esegue lato client nel browser. Viene creata una mappatura 1:1 tra SPA componenti e un componente AEM.
Framework popolari React JS e Angular sono supportati come predefiniti. Gli utenti possono completare questa esercitazione in Angular o React, a prescindere dal framework utilizzato.
SPA sviluppo ha un piede nello sviluppo AEM e l'altro fuori. L'obiettivo è quello di consentire lo sviluppo SPA in modo indipendente e (soprattutto) agnostico per AEM.
SPA sviluppo ha un piede nello sviluppo AEM, e l'altro fuori - permettendo SPA sviluppo di avvenire in modo indipendente, e (per lo più) agnostico a AEM.
L’obiettivo di questa esercitazione è quello di estendere l’app We.Retail Journal con un nuovo componente. Per iniziare, scarica il codice sorgente per l’app We.Retail Journal e distribuisci a un AEM locale.
Scarica più recente Codice Journal We.Retail da GitHub.
Oppure duplica l’archivio dalla riga di comando:
$ git clone git@github.com:adobe/aem-sample-we-retail-journal.git
L’esercitazione funzionerà contro il maestro ramificare 1.2.1-SNAPSHOT versione del progetto.
La seguente struttura deve essere visibile:
Il progetto contiene i seguenti moduli Maven:
all
: Incorpora e installa l’intero progetto in un unico pacchetto.bundles
: Contiene due bundle OSGi: comuni e core che contengono Sling Models e altro codice Java.ui.apps
: contiene le parti /apps del progetto, ad esempio clientlibs JS e CSS, componenti, configurazioni specifiche della modalità runmode.ui.content
: contiene contenuti strutturali e configurazioni (/content
, /conf
)react-app
: Applicazione React Journal We.Retail Questo è sia un modulo Maven che un progetto webpack.angular-app
: Applicazione di Angular We.Retail Journal Questa è entrambe una Maven modulo e un progetto webpack.Apri una nuova finestra del terminale ed esegui il seguente comando per creare e distribuire l'intera app in un'istanza AEM locale in esecuzione su http://localhost:4502.
$ cd <src>/aem-sample-we-retail-journal
$ mvn -PautoInstallSinglePackage clean install
In questo progetto il profilo Maven da generare e creare il pacchetto dell’intero progetto è autoInstallSinglePackage
Accedi a:
L’app We.Retail Journal deve essere visualizzata all’interno dell’editor AEM Sites.
In Modifica , seleziona un componente da modificare ed effettua un aggiornamento al contenuto.
Seleziona la Proprietà pagina per aprire Proprietà pagina. Seleziona Modifica modello per aprire il modello della pagina.
Nell’ultima versione dell’Editor SPA, Modelli modificabili può essere utilizzato nello stesso modo delle implementazioni di Sites tradizionali. Questo verrà rivisto in seguito con il nostro componente personalizzato.
Solo AEM 6.5 e AEM 6.4 + Service Pack 5 supportano i modelli modificabili.
SPA iterazioni di sviluppo si verificano indipendentemente da AEM. Quando il SPA è pronto per essere distribuito in AEM, si verificano i seguenti passaggi di alto livello (come illustrato in precedenza).
Persona: Sviluppatore AEM
Viene creato prima un componente AEM. Il componente AEM è responsabile del rendering delle proprietà JSON lette dal componente React. Il componente AEM fornisce anche una finestra di dialogo per tutte le proprietà modificabili del componente.
Utilizzo Eclipseo altro IDE, importa il progetto Maven di We.Retail Journal.
Aggiornare il reattore pom.xml per rimuovere Apache Rat plugin. Questo plug-in controlla ogni file per assicurarsi che sia presente un’intestazione di Licenza. Per i nostri scopi non dobbiamo preoccuparci di questa funzionalità.
In 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>
In we-retail-journal-content (<src>/aem-sample-we-retail-journal/ui.apps
) creare un nuovo nodo sotto ui.apps/jcr_root/apps/we-retail-journal/components
denominato casalinga di tipo cq:Component.
Aggiungi le seguenti proprietà al casalinga componente, rappresentato in XML (/helloworld/.content.xml
) di seguito:
<?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" />
Per illustrare la funzione Modelli modificabili, è stata impostata appositamente la variabile componentGroup="Custom Components"
. In un progetto del mondo reale, è meglio ridurre al minimo il numero di gruppi di componenti, quindi un gruppo migliore sarebbe “We.Retail Journal” per far corrispondere gli altri componenti di contenuto.
Solo AEM 6.5 e AEM 6.4 + Service Pack 5 supportano i modelli modificabili.
Verrà quindi creata una finestra di dialogo per consentire la configurazione di un messaggio personalizzato per Hello World componente. Sotto /apps/we-retail-journal/components/helloworld
aggiungi un nome di nodo cq:dialog di nt:unstructured.
La cq:dialog visualizza un singolo campo di testo che persiste il testo a una proprietà denominata message. Sotto la nuova creazione cq:dialog aggiungi i seguenti nodi e proprietà, rappresentati in XML qui sotto (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 definizione del nodo XML di cui sopra crea una finestra di dialogo con un singolo campo di testo che consente all’utente di inserire un “messaggio”. Nota la proprietà name="./message"
all’interno del <message />
nodo. Questo è il nome della proprietà che verrà memorizzata nel JCR in AEM.
Verrà quindi creata una finestra di dialogo dei criteri vuota (cq:design_dialog
). La finestra di dialogo Criterio è necessaria per visualizzare il componente nell’Editor modelli. Per questo semplice caso d’uso sarà una finestra di dialogo vuota.
Sotto /apps/we-retail-journal/components/helloworld
aggiungi un nome di nodo cq:design_dialog
di nt:unstructured
.
La configurazione è rappresentata nel codice XML seguente (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" />
Distribuisci la base di codice da AEM dalla riga di comando:
$ cd <src>/aem-sample-we-retail-journal/content
$ mvn -PautoInstallPackage clean install
In CRXDE Lite convalida il componente distribuito controllando la cartella in /apps/we-retail-journal/components:
Persona: Sviluppatore AEM
Successivo a Sling Model viene creato per supportare Hello World componente. In un caso d’uso WCM tradizionale, la variabile Sling Model implementa qualsiasi logica di business e uno script di rendering lato server (HTL) effettuerà una chiamata al Sling Model. Questo mantiene lo script di rendering relativamente semplice.
Sling Models sono utilizzati anche nel caso di utilizzo SPA per implementare la logica di business lato server. La differenza è che nel SPA caso d'uso, Sling Models espone i suoi metodi come JSON serializzato.
Come best practice, gli sviluppatori devono cercare di utilizzare Componenti core AEM quando possibile. Ad esempio, i componenti core forniscono Sling Models con un output JSON "SPA-ready", che consente agli sviluppatori di concentrarsi maggiormente sulla presentazione front-end.
Nell’editor desiderato, apri le we-retail-journal-commons progetto ( <src>/aem-sample-we-retail-journal/bundles/commons
).
Nel pacchetto com.adobe.cq.sample.spa.commons.impl.models
:
HelloWorld
.com.adobe.cq.export.json.ComponentExporter.
La ComponentExporter
l'interfaccia deve essere implementata per Sling Model per essere compatibile con 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;
}
}
Aggiungi una variabile statica denominata RESOURCE_TYPE
per identificare HelloWorld tipo di risorsa del componente:
...
public class HelloWorld implements ComponentExporter {
static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";
...
}
Aggiungi le annotazioni OSGi per @Model
e @Exporter
. La @Model
l’annotazione registra la classe come Sling Model. La @Exporter
annoterà i metodi come JSON serializzato utilizzando Jackson Exporter struttura.
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 {
...
Implementare il metodo getDisplayMessage()
per restituire la proprietà JCR message
. Utilizza la Sling Model annotazione @ValueMapValue
per facilitare il recupero della proprietà message
memorizzato sotto il componente. La @Optional
l’annotazione è importante in quanto quando il componente viene aggiunto per la prima volta alla pagina, message
non verrà popolato.
Come parte della logica di business, una stringa, "Ciao", sarà preceduto dal messaggio.
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;
}
...
Nome del metodo getDisplayMessage
è importante. Quando il Sling Model è serializzato con Jackson Exporter sarà esposto come proprietà JSON: displayMessage
. La Jackson Exporter serializzerà ed esporrà tutti getter
metodi che non accettano un parametro (a meno che non siano contrassegnati in modo esplicito per l'eliminazione). Successivamente nell'app React / Angular leggeremo questo valore della proprietà e lo visualizzeremo come parte dell'applicazione.
Il metodo getExportedType
è anche importante. Valore del componente resourceType
verrà utilizzato per "mappare" i dati JSON sul componente front-end (Angular/React). Lo esploreremo nella prossima sezione.
Implementare il metodo getExportedType()
per restituire il tipo di risorsa HelloWorld
componente.
@Override
public String getExportedType() {
return RESOURCE_TYPE;
}
Il codice completo per HelloWorld.java si trova qui.
Distribuisci il codice per AEM utilizzando Apache Maven:
$ cd <src>/sample-we-retail-spa-content/bundles/commons
$ mvn -PautoInstallPackage clean install
Verifica la distribuzione e la registrazione del Sling Model passando a Stato > Modelli Sling nella console OSGi.
Dovresti vedere che la HelloWorld
Il modello Sling è associato al we-retail-journal/components/helloworld
Tipo di risorsa Sling e che è registrato come 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: Sviluppatore front-end
Quindi, verrà creato il componente React. Apri react-app modulo ( <src>/aem-sample-we-retail-journal/react-app
) mediante l’editor desiderato.
Puoi saltare questa sezione se sei interessato solo a sviluppo Angular.
Dentro react-app
passa alla cartella src corrispondente. Espandi la cartella dei componenti per visualizzare i file dei componenti React esistenti.
Aggiungi un nuovo file sotto la cartella dei componenti denominata HelloWorld.js
.
Apri HelloWorld.js
. Aggiungi un’istruzione di importazione per importare la libreria dei componenti React. Aggiungi una seconda istruzione di importazione per importare il MapTo
aiuto fornito dall'Adobe. La MapTo
helper fornisce una mappatura del componente React sul JSON del componente AEM.
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
Sotto le importazioni crea una nuova classe denominata HelloWorld
che estende il React Component
interfaccia. Aggiungi il render()
al HelloWorld
classe.
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
class HelloWorld extends Component {
render() {
}
}
La MapTo
helper include automaticamente un oggetto denominato cqModel
come parte della proprietà del componente React. La cqModel
include tutte le proprietà esposte dal Sling Model.
Ricorda Sling Model creato in precedenza contiene un metodo getDisplayMessage()
. getDisplayMessage()
è tradotto come chiave JSON denominata displayMessage
quando viene emesso.
Implementare render()
metodo di output h1
che contiene il valore di displayMessage
. JSX, un'estensione di sintassi a JavaScript, viene utilizzata per restituire il markup finale del componente.
...
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;
}
}
Implementa un metodo di configurazione di modifica. Questo metodo viene passato tramite MapTo
helper e fornisce all’editor AEM informazioni per visualizzare un segnaposto nel caso in cui il componente sia vuoto. Questo si verifica quando il componente viene aggiunto al SPA ma non è ancora stato creato. Aggiungi quanto segue sotto la HelloWorld
Classe:
...
class HelloWorld extends Component {
...
}
const HelloWorldEditConfig = {
emptyLabel: 'Hello World',
isEmpty: function(props) {
return !props || !props.displayMessage || props.displayMessage.trim().length < 1;
}
};
...
Alla fine del file, chiama il MapTo
helper, passare HelloWorld
la classe e HelloWorldEditConfig
. Viene eseguito il mapping del componente React al componente AEM in base al tipo di risorsa del componente AEM: we-retail-journal/components/helloworld
.
MapTo('we-retail-journal/components/helloworld')(HelloWorld, HelloWorldEditConfig);
Codice completato per HelloWorld.js si trova qui.
Aprire il file ImportComponents.js
. È disponibile all'indirizzo <src>/aem-sample-we-retail-journal/react-app/src/ImportComponents.js
.
Aggiungi una riga per richiedere il HelloWorld.js
con gli altri componenti nel bundle JavaScript compilato:
...
require('./components/Text');
require('./components/Image');
require('./components/HelloWorld');
...
In components
creare un nuovo file denominato HelloWorld.css
come fratelli di HelloWorld.js.
Compilare il file con le seguenti opzioni per creare uno stile di base per il HelloWorld
componente:
/* HelloWorld.css to style HelloWorld component */
.cmp-helloworld_message {
text-align: center;
color: #ff505e;
text-transform: unset;
letter-spacing: unset;
}
Riaprire HelloWorld.js
e aggiorna le istruzioni di importazione da richiedere HelloWorld.css
:
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
require('./HelloWorld.css');
...
Distribuisci il codice per AEM utilizzando Apache Maven:
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
In CRXDE-Lite open /apps/we-retail-journal/react/clientlibs/we-retail-journal-react/js/app.js
. Esegui una ricerca rapida per HelloWorld in app.js per verificare che il componente React sia stato incluso nell’app compilata.
app.js è l'app React inclusa nel pacchetto. Il codice non è più leggibile dall'uomo. La npm run build
Il comando ha attivato una build ottimizzata che restituisce JavaScript compilato che può essere interpretato dai browser moderni.
Persona: Sviluppatore front-end
Puoi saltare questa sezione se sei interessato solo allo sviluppo React.
Quindi, verrà creato il componente Angular. Apri angular-app modulo (<src>/aem-sample-we-retail-journal/angular-app
) mediante l’editor desiderato.
Dentro angular-app
passare alla cartella src
cartella. Espandi la cartella dei componenti per visualizzare i file dei componenti di Angular esistenti.
Aggiungi una nuova cartella sotto la cartella dei componenti denominata helloworld
. Sotto helloworld
aggiungi nuovi file denominati helloworld.component.css, helloworld.component.html, helloworld.component.ts
.
/angular-app
/src
/app
/components
+ /helloworld
+ helloworld.component.css
+ helloworld.component.html
+ helloworld.component.ts
Apri helloworld.component.ts
. Aggiungi un’istruzione import per importare l’Angular Component
e Input
classi. Crea un nuovo componente, puntando il styleUrls
e templateUrl
a helloworld.component.css
e helloworld.component.html
. Esportare infine la classe HelloWorldComponent
con l'input previsto di 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;
}
Se ricordi la Sling Model creato in precedenza, era presente un metodo getDisplayMessage(). Il JSON serializzato di questo metodo sarà displayMessage, che stiamo leggendo nell’app Angular.
Apri helloworld.component.html
per includere h1
tag che verrà stampato displayMessage
proprietà:
<h1 *ngIf="displayMessage" class="cmp-helloworld_message">
{{displayMessage}}
</h1>
Aggiorna helloworld.component.css
per includere alcuni stili di base per il componente.
:host-context {
display: block;
};
.cmp-helloworld {
display:block;
}
.cmp-helloworld_message {
text-align: center;
color: #ff505e;
text-transform: unset;
letter-spacing: unset;
}
Aggiorna helloworld.component.spec.ts
con il seguente banco di prova:
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();
});
});
Aggiornamento successivo src/components/mapping.ts
per includere HelloWorldComponent
. Aggiungi un HelloWorldEditConfig
contrassegna il segnaposto nell’editor AEM prima che il componente sia stato configurato. Infine, aggiungi una riga per mappare il componente AEM al componente Angular con MapTo
aiutante.
// 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);
Il codice completo per mapping.ts si trova qui.
Aggiorna src/app.module.ts
per aggiornare NgModule. Aggiungi il HelloWorldComponent
come dichiarazione che appartiene al AppModule. Aggiungi anche la HelloWorldComponent
come entryComponent in modo che venga compilato e incluso dinamicamente nell’app durante l’elaborazione del modello 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]
})
Codice completato per app.module.ts si trova qui.
Distribuisci il codice per AEM utilizzando Maven:
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
In CRXDE-Lite open /apps/we-retail-journal/angular/clientlibs/we-retail-journal-angular/js/main.js
. Esegui una ricerca rapida per HelloWorld in main.js
per verificare che il componente Angular sia stato incluso.
main.js è l’app di Angular in bundle. Il codice non è più leggibile dall'uomo. Il comando npm run build ha attivato una build ottimizzata che restituisce JavaScript compilato che può essere interpretato dai browser moderni.
Passa al Modello modificabile per le versioni React e/o Angular:
Seleziona il principale Contenitore di layout e seleziona la Criterio icona per aprire il criterio:
Sotto Proprietà > Componenti consentiti, eseguire una ricerca per Custom Components. Dovresti vedere la Hello World , selezionalo. Salva le modifiche facendo clic sulla casella di controllo nell’angolo in alto a destra.
Dopo il salvataggio, dovresti visualizzare il HelloWorld come componente consentito nel Contenitore di layout.
Solo AEM 6.5 e AEM 6.4.5 supportano la funzione Modello modificabile dell’Editor SPA. Se utilizzi AEM 6.4, dovrai configurare manualmente i criteri per i componenti consentiti tramite CRXDE Lite: /conf/we-retail-journal/react/settings/wcm/policies/wcm/foundation/components/responsivegrid/default
o /conf/we-retail-journal/angular/settings/wcm/policies/wcm/foundation/components/responsivegrid/default
CRXDE Lite mostra le configurazioni dei criteri aggiornate per Componenti consentiti in Contenitore di layout:
Passa alle pagine Angular o React:
Trova il Hello World e trascina e rilascia la Hello World nella pagina.
Viene visualizzato il segnaposto.
Seleziona il componente e aggiungi un messaggio nella finestra di dialogo, ad esempio "World" o "Your Name". Salva le modifiche.
La stringa "Ciao" è sempre preceduta dal messaggio. Questo è il risultato della logica nel HelloWorld.java
Sling Model.
Soluzione completata per il componente HelloWorld
Errore: Errore durante l'importazione del We.Retail Journal progetto in Eclipse per esecuzioni di obiettivi non riconosciute:
Execution npm install, Execution npm run build, Execution default-analyze-classes*
Risoluzione: Fare clic su Fine per risolvere i problemi in un secondo momento. Questo non dovrebbe impedire il completamento dell'esercitazione.
Errore: Il modulo React, react-app
, non viene generato correttamente durante una build Maven.
Risoluzione: Prova a eliminare node_modules
sotto la cartella react-app. Esegui nuovamente il comando Apache Maven mvn clean install -PautoInstallSinglePackage
dalla radice del progetto.
Se una dipendenza AEM non è soddisfatta, nella Gestione pacchetti AEM o Console Web AEM (Console Felix), indica che la funzione Editor SPA non è disponibile.
Errore: Anche dopo un'implementazione di successo e la verifica che le versioni compilate delle app React/Angular abbiano il helloworld
Il componente non viene visualizzato quando lo trascino sulla pagina. Il componente viene visualizzato nell’interfaccia utente AEM.
Risoluzione: Cancella la cronologia/cache del browser e/o apri un nuovo browser o utilizza la modalità in incognito. Se questo non funziona, invalida la cache della libreria client sull'istanza AEM locale. AEM tenta di memorizzare nella cache librerie client di grandi dimensioni per essere efficiente. A volte è necessario annullare manualmente la validità della cache per risolvere i problemi in cui il codice obsoleto viene memorizzato nella cache.
Passa a: http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html e fai clic su Invalidate Cache (Annulla validità cache). Torna alla pagina React/Angular e aggiorna la pagina.