Guia de componentes da comunidade

O guia Community Components é uma ferramenta de desenvolvimento interativo para framework de componente social (SCF). Ele fornece uma lista de componentes AEM Communities disponíveis ou os recursos mais complexos criados com vários componentes.

Juntamente com as informações básicas de cada componente, o guia permite experimentar como os componentes/recursos do SCF funcionam e como eles podem ser configurados ou personalizados.

Para obter informações sobre os recursos essenciais de desenvolvimento relacionados a cada componente, consulte Recursos e componentes essenciais.

Introdução

O guia é destinado ao uso em instalações de desenvolvimento de instâncias do autor (localhost:4502) e de publicação (localhost:4503).

O site Componentes da comunidade é acessado navegando até

As interações com os componentes das Comunidades variam, dependendo de:

  • O servidor (autor ou publicação).
  • Se o visitante do site está conectado ou não.
  • Se conectado, os privilégios atribuídos ao membro.
  • Se o SRP padrão, JSRP, está em uso.

No autor, para entrar no modo de edição, insira editor.html ou cf# como o primeiro segmento de caminho após o nome do servidor:

OBSERVAÇÃO

No modo Editar, os links em uma página não estão ativos.

Para navegar até uma página de componente, primeiro selecione o modo de Pré-visualização para ativar os links.

Com a página do componente exibida no navegador, volte ao modo de Edição para abrir a caixa de diálogo de edição do componente.

Para obter informações gerais de criação, visualização o guia rápido para criar páginas.

Se não estiver familiarizado com o AEM, visualização a documentação em manuseio básico.

Página Inicial

O guia fornece uma lista de componentes SCF disponíveis para pré-visualização e prototipagem no lado esquerdo da página.

Guia de componentes conforme exibido em uma instância do autor no modo Editar:

community-component1

Páginas de componentes

Selecione um componente da lista no lado esquerdo da página.

páginas de componentes da comunidade

O corpo principal da guia exibe:

  1. Título: O nome do componente selecionado

  2. Bibliotecas do lado do cliente: Uma lista de uma ou mais categorias necessárias

  3. Incluível: Se o componente puder ser incluído dinamicamente, o estado pode ser alternado no modo de edição do autor:

    • Se adicionado, o texto exibido é: "Esse componente é incluído por meio de seu nó par."
    • Se incluído, o texto exibido é: "Esse componente é incluído dinamicamente."
    • Se não for incluível, nenhum texto será exibido

  4. Componente de amostra ou recurso: uma instância ativa do componente ou recurso. Se um componente, ele pode ser alterado com alterações feitas nos modelos, CSS e dados fornecidos na seção da guia.

OBSERVAÇÃO

Depois de fazer uma seleção no lado esquerdo, o componente aparecerá abaixo, em vez de ao lado, da lista de componentes quando a janela do navegador for muito estreita.

Interações do autor

Ao usar o guia em uma instância do autor, é possível experimentar a configuração de um componente abrindo sua caixa de diálogo. As informações para desenvolvedores são fornecidas na seção Component and Feature Essentials da documentação, enquanto as configurações de diálogo são descritas na seção Communities Components para autores.

Para o guia Componentes da comunidade, algumas configurações da caixa de diálogo do componente são sobrepostas com o estado de alternância Includable. Para alternar entre o uso do recurso existente ou de um recurso incluído dinamicamente, no modo de edição, selecione o componente e o texto e clique em duplo para abrir a caixa de diálogo de edição:

componente da comunidade3

Na guia Modelos:

componente da comunidade4

  • Incluir o componente-filho com sling:include

    Se desmarcada, o Guia de componentes usará o recurso existente no repositório (um nó jcr que é filho de um nó par).

    • o texto exibido é: "Esse componente é incluído por meio de seu nó par."

    Se marcada, o Guia de componentes usará sling para incluir dinamicamente um componente do resourceType do nó filho (recurso não existente).

    • o texto exibido é: "Esse componente é incluído dinamicamente."

    O padrão está desmarcado.

Publicar interações

Ao usar o guia em uma instância de publicação, é possível experimentar os componentes e os recursos como um visitante do site (não conectado) e como membros com vários privilégios ao fazer logon.

OBSERVAÇÃO

Lembre-se, se o SRP for deixado como padrão para JSRP, então o UGC inserido na instância de publicação estará visível somente na publicação e não estará visível do console moderação na instância do autor.

Bibliotecas do lado do cliente

As bibliotecas do lado do cliente (clientlibs) listadas para cada componente são as necessárias a serem referenciadas quando o componente é colocado em uma página. Os clientlibs fornecem um meio de gerenciar e otimizar o download do Javascript e do CSS usados para renderizar o componente no navegador.

Para obter mais informações, visite Clientlibs for Communities Components.

Representação

Na instância do autor, onde um deles é frequentemente conectado como administrador ou desenvolvedor, para experimentar o componente conectado como outro usuário, use a caixa de texto à esquerda do botão Representar para digitar no nome de usuário ou selecionar na lista suspensa e clique no botão. Clique em Reverter para sair e encerrar a representação.

A instância de publicação não precisa representar. Basta usar o link Logon/Logout para representar vários usuários, como demo users.

Personalização

Quando ativado, cada componente SCF está disponível para prototipagem de possíveis personalizações modificando temporariamente o modelo do componente, o CSS e os dados.

Ativando a Personalização

OBSERVAÇÃO

Esta ferramenta é somente leitura. Nenhuma das edições feitas nos modelos, CSS ou dados são salvas no repositório.

Para experimentar rapidamente personalizações, a propriedade scg:showIdedeve ser adicionada ao nó JCR de conteúdo da página do componente e definida como true.

Usando o componente comments como um exemplo, na instância autor ou de publicação, conectado com privilégios de administrador:

  1. Navegue até CRXDE Lite

    Por exemplo, http://localhost:4503/crx/de

  2. Selecione o nó jcr:content do componente

    Por exemplo, /content/community-components/en/comments/jcr:content

  3. Adicionar uma propriedade

    • Nome scg:showIde
    • Tipo String
    • Valor true

  4. Selecione Salvar tudo

  5. Recarregar a página Comentários no guia

    http://localhost:4503/content/community-components/en/comments.html

  6. Observe que agora há 3 guias para Modelos, CSS e Dados.

componente da comunidade5

componente da comunidade6

Guia Modelos

Selecione a guia modelos para ver os modelos associados ao componente.

O Editor de modelos permite que as edições locais sejam compiladas e aplicadas à instância do componente de amostra na parte superior da página, sem afetar o componente no repositório.

Executar a compilação em edições locais destacará quaisquer erros ao colocar um ponto na medianiz e marcar o texto em vermelho.

Guia CSS

Selecione a guia CSS para ver o CSS associado ao componente.

Se um componente for um composto de vários componentes, alguns CSS podem ser listados em um dos outros componentes.

O Editor de CSS permite que o CSS seja modificado e aplicado à instância do componente de amostra na parte superior da página.

Uma regra pode ser selecionada para realçar as partes do DOM usando essa regra clicando em ao lado da regra na medianiz.

Guia Dados

Selecione a guia Dados para mostrar os dados do ponto de extremidade .social.json. Esses dados são editáveis e são aplicados à instância do componente de amostra.

Os erros de sintaxe podem ser marcados na medianiz, bem como destacados no editor.

Nesta página