Aggiungi navigazione e indirizzamento

Apri un browser e accedi ad AEM, http://localhost:4502/. La base di codice iniziale deve essere già distribuita.

Passare al Modello pagina SPA: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

Seleziona il contenitore di layout principale più esterno e fai clic sulla relativa icona Criteri. Fai attenzione a not per selezionare il Contenitore di layout non bloccato per l'authoring.

Crea un nuovo criterio denominato Struttura SPA:

In Componenti consentiti > Generale > seleziona il componente Contenitore di layout.

In Componenti consentiti > WKND SPA REACT - STRUCTURE > seleziona il componente Navigation:

In Componenti consentiti > REACT SPA WKND - Contenuto > seleziona i componenti Immagine e Testo. Dovresti aver selezionato 4 componenti totali.

Per salvare le modifiche, fai clic su Completati.

Aggiorna la pagina e aggiungi il componente Navigazione sopra il Contenitore di layout non bloccato:

Selezionare il componente Navigazione e fare clic sulla relativa icona Criteri per modificare i criteri.

Crea un nuovo criterio con Titolo criterio di Navigazione SPA.

In Proprietà:

• Impostare Directory principale di navigazione su /content/wknd-spa-react/us/en.
• Imposta Escludi livelli principali su 1.
• Deseleziona Raccogli tutte le pagine figlie.
• Impostare Annidamento struttura di spostamento su 3.

In questo modo verranno raccolti i 2 livelli di navigazione inferiori a /content/wknd-spa-react/us/en.

Dopo aver salvato le modifiche, dovresti visualizzare Navigation popolato come parte del modello:

Passare alla console Sites: http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. Seleziona la home page di React SPA WKND e fai clic su Crea > Pagina:

In Modello selezionare Pagina SPA. In Proprietà immettere Pagina 1 per il Titolo e Pagina-1 come nome.

Fai clic su Crea e nella finestra a comparsa fai clic su Apri per aprire la pagina nell'editor SPA di AEM.

Aggiungi un nuovo componente Testo al Contenitore di layout principale. Modificare il componente e immettere il testo: Pagina 1 utilizzando l'editor Rich Text e l'elemento H2.

Puoi aggiungere altri contenuti, come un’immagine.

Torna alla console AEM Sites e ripeti i passaggi precedenti, creando una seconda pagina denominata Pagina 2 di pari livello di Pagina 1.

Infine, crea una terza pagina, Pagina 3 ma come pagina secondaria di Pagina 2. Una volta completato, la gerarchia del sito avrà l’aspetto seguente:

È ora possibile utilizzare il componente Navigazione per passare a diverse aree dell’applicazione a pagina singola.

Apri la pagina all'esterno dell'editor di AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html. Utilizza il componente Navigazione per passare a visualizzazioni diverse dell'app.

Utilizza gli strumenti di sviluppo del browser per verificare le richieste di rete durante la navigazione. Le schermate seguenti vengono acquisite dal browser Google Chrome.

Dopo il caricamento della pagina iniziale, la navigazione successiva non provocherà un aggiornamento dell’intera pagina e il traffico di rete verrà ridotto al minimo quando si tornerà alle pagine visitate in precedenza.

In una nuova scheda, apri l'API del modello JSON fornita da AEM: http://localhost:4502/content/wknd-spa-react/us/en.model.json. Potrebbe essere utile utilizzare un'estensione del browser per formattare il JSON.

Questo contenuto JSON viene richiesto al primo caricamento dell’applicazione a pagina singola. La struttura esterna si presenta come segue:

{
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {},
   "/content/wknd-spa-react/us/en/home/page-2/page-3": {}
   }
}

In :children dovresti visualizzare una voce per ciascuna delle pagine create. Il contenuto di tutte le pagine si trova in questa richiesta JSON iniziale. Con il routing di navigazione, le visualizzazioni successive dell’applicazione a pagina singola vengono caricate rapidamente, in quanto il contenuto è già disponibile lato client.

Non è consigliabile caricare ALL del contenuto di un'applicazione a pagina singola nella richiesta JSON iniziale, in quanto ciò rallenterebbe il caricamento della pagina iniziale. Quindi, vediamo come viene raccolta la profondità della gerarchia delle pagine.

Passa al modello Radice applicazione a pagina singola in: http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html.

Fai clic sul menu Proprietà pagina > Criterio pagina:

Il modello Radice applicazione a pagina singola include una scheda Struttura gerarchica aggiuntiva per controllare il contenuto JSON raccolto. L'Annidamento struttura determina la profondità nella gerarchia del sito per raccogliere le pagine figlie sotto la radice. È inoltre possibile utilizzare il campo Modelli struttura per filtrare ulteriori pagine in base a un'espressione regolare.

Aggiorna Annidamento struttura in 2:

Fai clic su Fine per salvare le modifiche al criterio.

Riapri il modello JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json.

{
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {}
   }
}

Il percorso Pagina 3 è stato rimosso: /content/wknd-spa-react/us/en/home/page-2/page-3 dal modello JSON iniziale. Questo perché La pagina 3 si trova al livello 3 nella gerarchia e il criterio è stato aggiornato in modo da includere solo il contenuto con una profondità massima del livello 2.

Riapri la home page dell'applicazione a pagina singola: http://localhost:4502/content/wknd-spa-react/us/en/home.html e apri gli strumenti di sviluppo del browser.

Aggiorna la pagina per visualizzare la richiesta XHR a /content/wknd-spa-react/us/en.model.json, che è la radice SPA. In base alla configurazione della profondità della gerarchia rispetto al modello radice dell’applicazione a pagina singola creato in precedenza nell’esercitazione, vengono incluse solo tre pagine figlie. Non include Pagina 3.

Con gli strumenti per sviluppatori aperti, utilizzare il componente Navigation per passare direttamente a Pagina 3:

Si noti che è stata effettuata una nuova richiesta XHR a: /content/wknd-spa-react/us/en/home/page-2/page-3.model.json

AEM Model Manager riconosce che il contenuto JSON Pagina 3 non è disponibile e attiva automaticamente la richiesta XHR aggiuntiva.

Prova i collegamenti profondi navigando direttamente in: http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html. Inoltre, il pulsante Indietro del browser continua a funzionare.

Nell'IDE aprire il file index.js in ui.frontend/src/index.js.

/* index.js */
import { Router } from 'react-router-dom';
...
...
 ModelManager.initialize().then(pageModel => {
    const history = createBrowserHistory();
    render(
    <Router history={history}>
        <App
        history={history}
        cqChildren={pageModel[Constants.CHILDREN_PROP]}
        cqItems={pageModel[Constants.ITEMS_PROP]}
        cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
        cqPath={pageModel[Constants.PATH_PROP]}
        locationPathname={window.location.pathname}
        />
    </Router>,
    document.getElementById('spa-root')
    );
});

Si noti che App è racchiuso nel componente Router da React Router. ModelManager, fornito da AEM SPA Editor JS SDK, aggiunge le route dinamiche alle pagine AEM basate sull'API del modello JSON.

Apri il file Page.js in ui.frontend/src/components/Page/Page.js

class AppPage extends Page {
  get containerProps() {
    let attrs = super.containerProps;
    attrs.className =
      (attrs.className || '') + ' page ' + (this.props.cssClassNames || '');
    return attrs;
  }
}

export default MapTo('wknd-spa-react/components/page')(
  withComponentMappingContext(withRoute(AppPage))
);

Il componente per applicazioni a pagina singola Page utilizza la funzione MapTo per mappare Pagine in AEM a un componente per applicazioni a pagina singola corrispondente. L'utilità withRoute consente di indirizzare dinamicamente l'applicazione a pagina singola alla pagina secondaria di AEM appropriata in base alla proprietà cqPath.

Apri il componente Header.js in ui.frontend/src/components/Header/Header.js.

Aggiorna Header per racchiudere il tag <h1> in un collegamento nella home page:

  //Header.js
  import React, {Component} from 'react';
+ import {Link} from 'react-router-dom';
  require('./Header.css');

export default class Header extends Component {

    render() {
        return (
            <header className="Header">
            <div className="Header-container">
+              <Link to="/content/wknd-spa-react/us/en/home.html">
                    <h1>WKND</h1>
+              </Link>
            </div>
            </header>
        );
    }

Invece di utilizzare un tag di ancoraggio predefinito <a>, utilizziamo <Link> fornito da React Router. Se to= punta a una route valida, l'applicazione a pagina singola passerà a tale route e non eseguirà un aggiornamento di pagina intera. In questo caso è sufficiente inserire il collegamento alla home page come codice fisso per illustrare l'utilizzo di Link.

Aggiorna il test alle App.test.js alle ui.frontend/src/App.test.js.

+ import { BrowserRouter as Router } from 'react-router-dom';
  import App from './App';

  it('renders without crashing', () => {
    const div = document.createElement('div');
-   ReactDOM.render(<App />, div);
+   ReactDOM.render(<Router><App /></Router>, div);
  });

Poiché si stanno utilizzando le funzionalità di React Router all'interno di un componente statico a cui si fa riferimento in App.js, è necessario aggiornare lo unit test per tenerne conto.

Apri un terminale, individua la directory principale del progetto e implementa il progetto in AEM utilizzando le abilità Maven:

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

Passa a una delle pagine dell'applicazione a pagina singola in AEM: http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Anziché utilizzare il componente Navigation per spostarsi, utilizzare il collegamento in Header.

Tieni presente che l'aggiornamento dell'intera pagina è non attivato e che il routing dell'applicazione a pagina singola funziona.

Facoltativamente, provare con il file Header.js utilizzando un tag di ancoraggio <a> standard:

<a href="/content/wknd-spa-react/us/en/home.html">
    <h1>WKND</h1>
</a>

Questo può aiutare a illustrare la differenza tra il routing delle applicazioni a pagina singola e i normali collegamenti alle pagine web.