SPA-editor-project

Verzeker een geval van AEM plaatselijk op haven 4502 loopt.

Van de terminal van de bevellijn verifieert dat Maven geïnstalleerd is:

$ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home

Voer de onderstaande opdracht Maven uit vanuit de map aem-guides-wknd-spa om het project te maken en te implementeren in AEM:

$ mvn -PautoInstallSinglePackage clean install

Als het gebruiken van AEM 6.x:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

De veelvoudige modules van het project zouden moeten worden opgesteld en aan AEM worden opgesteld.

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

Het Gemaakt profiel autoInstallSinglePackage compileert de individuele modules van het project en stelt één enkel pakket aan de instantie van AEM op. Door gebrek wordt dit pakket opgesteld aan een instantie van AEM die plaatselijk op haven 4502 loopt en met de geloofsbrieven van admin:admin.

Navigeer aan Package Manager op uw lokale instantie van AEM: http://localhost:4502/crx/packmgr/index.jsp.

Er moeten drie pakketten worden weergegeven voor wknd-spa-angular.all , wknd-spa-angular.ui.apps en wknd-spa-angular.ui.content .

Alle aangepaste code die nodig is voor het project, wordt in deze pakketten gebundeld en in de AEM-runtime geïnstalleerd.

Er moeten ook verschillende pakketten worden weergegeven voor spa.project.core en core.wcm.components . Dit zijn gebiedsdelen automatisch inbegrepen door archetype. Meer informatie over de Componenten van de Kern van AEM kan hierworden gevonden.

Navigeer aan de Sites console: http://localhost:4502/sites.html/content.

De WKND SPA omvat een basissitestructuur met een land, taal en homepage. Deze hiërarchie is gebaseerd op de standaardwaarden van het archetype voor language_country en isSingleCountryWebsite . Deze waarden kunnen worden beschreven door de beschikbare eigenschappenbij te werken wanneer het produceren van een project.

Open de pagina us > en > WKND SPA Angular Home Page door de pagina te selecteren en op de knop Edit op de menubalk te klikken:

Er is al een component Text toegevoegd aan de pagina. U kunt deze component op dezelfde manier bewerken als elke andere component in AEM.

Voeg een extra Text -component aan de pagina toe.

U ziet dat de ontwerpervaring vergelijkbaar is met die van een traditionele AEM Sites-pagina. Momenteel is een beperkt aantal componenten beschikbaar die kunnen worden gebruikt. Tijdens de zelfstudie wordt meer toegevoegd.

Klik in Page Editor op het menu Page Information > View as Published :

Dit zal een nieuw lusje met de vraagparameter ?wcmmode=disabled openen die effectief de redacteur van AEM uitzet: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Bekijk de bron van de pagina. U ziet dat de tekstinhoud Hello World of een van de andere inhoud niet is gevonden. In plaats daarvan ziet u HTML als volgt:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
    ...
</body>
...

clientlib-angular.min.js is de Angular SPA die op de pagina wordt geladen en die verantwoordelijk is voor het renderen van de inhoud.

waar komt de inhoud uit?

Terugkeer aan het lusje: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Open de de ontwikkelaarshulpmiddelen van browser en inspecteer het netwerkverkeer van de pagina tijdens verfrissen zich. Bekijk de XHR verzoeken:

Er zou een verzoek aan http://localhost:4502/content/wknd-spa-angular/us/en.model.jsonmoeten zijn. Dit bevat alle inhoud, die in JSON wordt geformatteerd, die SPA zal drijven.

In een nieuw lusje, open http://localhost:4502/content/wknd-spa-angular/us/en.model.json

De aanvraag en.model.json vertegenwoordigt het inhoudsmodel waarop de toepassing wordt gebaseerd. Controleer de JSON-uitvoer en u moet het fragment kunnen vinden dat de Text -component(en) vertegenwoordigt.

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
},
...

In het volgende hoofdstuk zullen wij inspecteren hoe de inhoud JSON van de Componenten van AEM aan de Componenten van het KUUROORD wordt in kaart gebracht om de basis van de ervaring van de Redacteur van AEM te vormen SPA.

NOTE

Het kan handig zijn een browserextensie te installeren om de JSON-uitvoer automatisch op te maken.