Em um SPA, o componente de página não fornece os elementos HTML de seus componentes filho, mas delega isso na estrutura SPA. Esse documento explica como isso torna o componente de página de um SPA único.
O Editor de SPA é a solução recomendada para projetos que exigem renderização do cliente baseada em SPA estrutura (por exemplo, Reagir ou Angular).
O componente de página de um SPA não fornece os elementos HTML de seus componentes filho por meio de um arquivo JSP ou HTL e objetos de recurso. Esta operação é delegada no quadro SPA. A representação dos componentes filhos é buscada como uma estrutura de dados JSON (ou seja, o modelo). Os componentes SPA são adicionados à página de acordo com o modelo JSON fornecido. Dessa forma, a composição inicial do corpo do componente da página difere de seus equivalentes HTML pré-renderizados.
A resolução e o gerenciamento do modelo de página são delegados em um módulo PageModelManager
fornecido. O SPA deve interagir com o módulo PageModelManager
ao inicializar para buscar o modelo de página inicial e registrar-se para atualizações de modelo - produzido principalmente quando o autor está editando a página pelo Editor de páginas. O PageModelManager
pode ser acessado por SPA projeto como um pacote npm. Sendo um intérprete entre o AEM e o SPA, o PageModelManager
deve acompanhar o SPA.
Para permitir a criação da página, uma biblioteca de cliente chamada cq.authoring.pagemodel.messaging
deve ser adicionada para fornecer um canal de comunicação entre o SPA e o editor de página. Se o componente de página SPA herdar do componente wcm/core da página, então há as seguintes opções para disponibilizar a categoria de biblioteca do cliente cq.authoring.pagemodel.messaging
:
customfooterlibs.html
do componente da página.Não se esqueça de limitar a inclusão da categoria cq.authoring.pagemodel.messaging
ao contexto do editor de páginas.
O tipo de dados de comunicação é definido como um elemento HTML dentro do componente Página AEM usando o atributo data-cq-datatype
. Quando o tipo de dados de comunicação é definido como JSON, as solicitações de GET atingem os pontos finais do Modelo Sling de um componente. Depois que uma atualização ocorre no editor de página, a representação JSON do componente atualizado é enviada para a biblioteca do Modelo de página. A biblioteca do Modelo de página avisa o SPA de atualizações.
Componente da página SPA -body.html
<div id="page"></div>
Além de ser uma boa prática não atrasar a geração do DOM, a estrutura do SPA exige que os scripts sejam adicionados ao final do corpo.
Componente da página SPA -customfooterlibs.html
<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"></sly>
<sly data-sly-test="${wcmmode.edit || wcmmode.preview}"
data-sly-call="${clientLib.js @ categories='cq.authoring.pagemodel.messaging'}"></sly>
<sly data-sly-call="${clientLib.js @ categories='we-retail-journal-react'}"></sly>
As propriedades do recurso meta que descrevem o conteúdo SPA:
Componente da página SPA -customheaderlibs.html
<meta property="cq:datatype" data-sly-test="${wcmmode.edit || wcmmode.preview}" content="JSON"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.edit}" content="edit"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.preview}" content="preview"/>
<meta property="cq:pagemodel_root_url" data-sly-use.page="com.adobe.cq.sample.spa.journal.models.AppPage" content="${page.rootUrl}"/>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories='we-retail-journal-react'}"/>
</sly>
O seletor de modelo padrão é definido estaticamente ao solicitar a representação do Modelo Sling de um componente.
cq:wcmmode
: Modo WCM dos editores (por exemplo, página, modelo)
cq:pagemodel_root_url
: URL do modelo raiz do aplicativo. É fundamental ao acessar diretamente uma página secundária, pois o modelo de página filho é um fragmento do modelo raiz do aplicativo. Em seguida, [PageModelManager](/docs/experience-manager-65/sites-developing/spa-page-component.md)
recompõe sistematicamente o modelo inicial do aplicativo ao inserir o aplicativo a partir do ponto de entrada raiz.
cq:pagemodel_router
: Ativar ou desativar o [ModelRouter](/docs/experience-manager-65/sites-developing/spa-routing.md)
da PageModelManager
biblioteca
cq:pagemodel_route_filters
: Lista separada por vírgulas ou expressões regulares para fornecer rotas que [ModelRouter](/docs/experience-manager-65/sites-developing/spa-routing.md)
devem ser ignoradas.
Este documento usa o aplicativo do Journal We.Retail apenas para fins de demonstração. Não deve ser utilizado para qualquer trabalho de projeto.
Qualquer projeto AEM deve aproveitar o AEM Project Archetype, que suporta projetos SPA usando React ou Angular e aproveita o SPA SDK. Todos os projetos SPA no AEM devem ter por base o Maven Archetype para SPA Starter Kit.
A sincronização das sobreposições é garantida pelo mesmo Observador de mutações fornecido pela categoria cq.authoring.page
.
Quando os recursos do roteamento estiverem ativados, a suposição é que a exportação JSON do SPA contenha as diferentes rotas do aplicativo graças à exportação JSON do componente de navegação AEM. A saída JSON do componente de navegação AEM pode ser configurada na política de conteúdo da página raiz SPA por meio das duas propriedades a seguir:
structureDepth
: Número correspondente à profundidade da árvore exportadastructurePatterns
: Regex de matriz de regex correspondente à página a ser exportadaIsso pode ser mostrado no conteúdo de amostra SPA em /conf/we-retail-journal/react/settings/wcm/policies/we-retail-journal/react/components/structure/page/root
.