Modelos de página - Estáticos

Um Modelo é usado para criar uma Página e define quais componentes podem ser usados dentro do escopo selecionado. Um modelo é uma hierarquia de nós que tem a mesma estrutura que a página a ser criada, mas sem nenhum conteúdo real.

Cada modelo apresentará uma seleção de componentes disponíveis para uso.

  • Os modelos são construídos de Components;
  • Os componentes usam e permitem acesso a Widgets, e esses são usados para renderizar o Conteúdo.
OBSERVAÇÃO

Os modelos editáveis também estão disponíveis e são o tipo recomendado de modelos para maior flexibilidade e os recursos mais recentes.

Propriedades e nós secundários de um modelo

Um modelo é um nó do tipo cq:Template e tem as seguintes propriedades e nós secundários:

Nome
Tipo
Descrição
.
cq:Template Modelo atual. Um modelo é do tipo de nó cq:Template.
allowChildren Sequência de caracteres[] O caminho de um modelo que tem permissão para ser filho deste modelo.
allowParents Sequência de caracteres[] O caminho de um modelo que tem permissão para ser pai deste modelo.
allowPaths Sequência de caracteres[] O caminho de uma página que tem permissão para se basear neste modelo.
jcr:created Data Data de criação do modelo.
jcr:description Sequência de caracteres Descrição do modelo.
jcr:title Sequência de caracteres Título do modelo.
classificação Longo Classificação do modelo. Usado para exibir o modelo na interface do usuário.
jcr:content cq:PageContent Nó que contém o conteúdo do modelo.
thumbnail.png nt:file Miniatura do modelo.
icon.png nt:file Ícone do modelo.

Um modelo é a base de uma página.

Para criar uma página, o modelo deve ser copiado (node-tree /apps/<myapp>/template/<mytemplate>) para a posição correspondente na árvore do site: isso é o que acontece se uma página for criada usando a guia Sites.

Essa ação de cópia também fornece à página seu conteúdo inicial (normalmente, somente conteúdo de nível superior) e a propriedade sling:resourceType, o caminho para o componente de página que é usado para renderizar a página (tudo no nó filho jcr:content).

Como os Modelos são estruturados

Há dois aspectos a considerar:

  • a estrutura do próprio modelo
  • a estrutura do conteúdo produzido quando um modelo é usado

A estrutura de um Modelo

Um Modelo é criado em um nó do tipo cq:Template.

screen_shot_2012-02-13at63646pm

Podem ser definidas várias propriedades, em especial:

  • jcr:title - title para o modelo; aparece na caixa de diálogo ao criar uma página.
  • jcr:description - descrição do modelo; aparece na caixa de diálogo ao criar uma página.

Este nó contém um nó jcr:content (cq:PageContent) que pode ser usado como a base para o nó de conteúdo das páginas resultantes; isso faz referência, usando sling:resourceType, ao componente a ser usado para renderizar o conteúdo real de uma nova página.

screen_shot_2012-02-13at64010pm

Esse componente é usado para definir a estrutura e o design do conteúdo quando uma nova página é criada.

screen_shot_2012-02-13at64137pm

O conteúdo produzido por um Modelo

Os modelos são usados para criar páginas do tipo cq:Page (como mencionado anteriormente, uma página é um tipo especial de componente). Cada Página AEM tem um nó estruturado jcr:content. Isso:

  • é do tipo cq:PageContent
  • é um tipo de nó estruturado que contém uma definição de conteúdo definida
  • tem uma propriedade sling:resourceType para fazer referência ao componente que contém os scripts sling usados para renderizar o conteúdo

Modelos padrão

AEM vem com vários modelos padrão disponíveis prontamente. Em alguns casos, talvez você queira usar os modelos como estão. Nesse caso, é necessário garantir que o modelo esteja disponível para seu site.

Por exemplo, AEM vem com vários modelos, incluindo uma página de conteúdo e um home page.

Título Componente Local Propósito
Página Inicial homepage geometrixx O modelo de home page do Geometrixx.
Página de conteúdo contentpage geometrixx O modelo da página de conteúdo do Geometrixx.

Exibindo Modelos Padrão

Para ver uma lista de todos os modelos no repositório, proceda da seguinte maneira:

  1. No CRXDE Lite, abra o menu Ferramentas e clique em Query.

  2. Na guia Query

  3. Como Type, selecione XPath.

  4. No campo de entrada Query, digite a seguinte string:
    //element(*, cq:Template)

  5. Clique em Executar. A lista é exibida na caixa de resultados.

Na maioria dos casos, você pegará um modelo existente e desenvolverá um novo para seu próprio uso. Consulte Desenvolvimento de modelos de página para obter mais informações.

Para habilitar um modelo existente para seu site e desejar que ele seja exibido na caixa de diálogo Criar página ao criar uma página sob Sites a partir do console Sites, defina a propriedade allowPaths do nó modelo como: /content(/.*?lang=pt-BR)?

Como os modelos são aplicados

Quando os estilos são definidos na interface usando Modo de design, o design é mantido no caminho exato do nó de conteúdo para o qual o estilo está sendo definido.

ATENÇÃO

O Adobe recomenda aplicar designs somente pelo Modo Design.

A modificação de designs no CRX DE por exemplo não uma prática recomendada e a aplicação desses designs pode variar do comportamento esperado.

Se os designs só forem aplicados usando o Modo de design, as seguintes seções, Resolução do caminho de design, Árvore de decisão e Exemplo não serão aplicáveis.

Resolução do caminho de design

Ao renderizar conteúdo com base em um modelo estático, AEM tentará aplicar o design e os estilos mais relevantes ao conteúdo com base em uma transversal da hierarquia de conteúdo.

AEM determina o estilo mais relevante para um nó de conteúdo na seguinte ordem:

  • Se houver um design para o caminho completo e exato do nó de conteúdo (como quando o design é definido no Modo de design), use esse design.
  • Se houver um design para o nó de conteúdo do pai, use esse design.
  • Se houver um design para qualquer nó no caminho do nó de conteúdo, use esse design.

Nos dois últimos casos, se houver mais de um design aplicável, use o mais próximo do nó de conteúdo.

Árvore de decisão

Esta é uma representação gráfica da lógica Resolução do Caminho de Design.

design_path_resolution

Exemplo

Considere uma estrutura de conteúdo simples da seguinte maneira, na qual um design pode se aplicar a qualquer um dos nós:

/root/branch/leaf

A tabela a seguir descreve como AEM escolherá um design.

Encontrar Design Para
Existem Designs Para
Design escolhido
Comentário
leaf

root

branch

leaf

leaf A correspondência mais exata é sempre feita.
leaf

root

branch

branch Volte para a correspondência mais próxima na árvore.
leaf root root Se tudo o resto falhar, veja o que resta.
branch branch branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

Se não houver uma correspondência exata, pegue a que estiver na árvore.

A suposição é que isso sempre será aplicável, mas mais para cima na árvore pode ser muito específico.

Desenvolvendo modelos de página

AEM modelos de página são simplesmente modelos usados para criar novas páginas. Eles podem conter o mínimo ou tanto conteúdo inicial quanto necessário, sendo sua função criar as estruturas de nó iniciais corretas, com as propriedades necessárias (principalmente sling:resourceType) definidas para permitir a edição e a renderização.

Criando um novo modelo (com base em um modelo existente)

É necessário dizer que um novo modelo pode ser criado completamente do zero, mas geralmente um modelo existente será copiado e atualizado para economizar tempo e esforço. Por exemplo, os modelos dentro do Geometrixx podem ser usados para ajudá-lo a começar.

Para criar um novo modelo com base em um modelo existente:

  1. Copie um modelo existente (de preferência, com uma definição o mais próxima possível do que você deseja obter) para um novo nó.

    Normalmente, os modelos são armazenados em /apps/<nome-do-site>/models/<nome-do-modelo>.

    OBSERVAÇÃO

    A lista dos modelos disponíveis depende do local da nova página e das restrições de posicionamento especificadas em cada modelo. Consulte Disponibilidade do modelo.

  2. Altere jcr:title do novo nó de modelo para refletir sua nova função. Você também pode atualizar o jcr:description, se apropriado. Certifique-se de alterar a disponibilidade do modelo da página, conforme apropriado.

    OBSERVAÇÃO

    Se quiser que seu modelo seja exibido na caixa de diálogo Criar página ao criar uma página sob Sites a partir do console Sites, defina a propriedade allowedPaths do nó de modelo como: /content(/.*?lang=pt-BR)?

    chlimage_1-88

  3. Copie o componente no qual o modelo se baseia (isso é indicado pela propriedade sling:resourceType do nó jcr:content no modelo) para criar uma nova instância.

    Geralmente, os componentes são armazenados em /apps/<nome-do-site>/components/<nome-do-componente>.

  4. Atualize jcr:title e jcr:description do novo componente.

  5. Substitua thumbnail.png se quiser que uma nova imagem em miniatura seja mostrada na lista de seleção do modelo (tamanho 128 x 98 px).

  6. Atualize o nó sling:resourceType do modelo jcr:content para fazer referência ao novo componente.

  7. Faça outras alterações na funcionalidade ou design do modelo e/ou seu componente subjacente.

    OBSERVAÇÃO

    As alterações feitas no nó /apps/<site>/models/<nome-modelo> afetarão a instância do modelo (como na lista de seleção).
    As alterações feitas no nó /apps/<site>/components/<nome-do-componente> afetarão a página de conteúdo criada quando o modelo for usado.

    Agora você pode criar uma página em seu site usando o novo modelo.

OBSERVAÇÃO

A biblioteca do cliente do editor assume a presença da namespace cq.shared nas páginas de conteúdo e, se ela não estiver presente, o erro do JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined resultará.
Todas as páginas de conteúdo de amostra contêm cq.shared, portanto, qualquer conteúdo baseado nelas inclui automaticamente cq.shared. No entanto, se você decidir criar suas próprias páginas de conteúdo do zero sem baseá-las no conteúdo de amostra, deverá incluir a namespace cq.shared.
Consulte Usando bibliotecas do lado do cliente para obter mais informações.

Disponibilizando um Modelo Existente

Este exemplo ilustra como permitir que um modelo seja usado para determinados caminhos de conteúdo. Os modelos que estão disponíveis para o autor da página ao criar novas páginas são determinados pela lógica definida em Disponibilidade do modelo.

  1. No CRXDE Lite, navegue até o modelo que deseja usar para a sua página, por exemplo, o modelo de boletim.

  2. Altere a propriedade allowedPaths e outras propriedades usadas para disponibilidade do modelo. Por exemplo, allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*?lang=pt-BR)? significa que este modelo é permitido em qualquer caminho em /content/geometrixx-outdoors.

    chlimage_1-89

Nesta página