Guia de componentes da comunidade community-components-guide

O guia Componentes da Comunidade é uma ferramenta de desenvolvimento interativa para a estrutura do componente social (SCF). Ele fornece uma lista de componentes disponíveis das Comunidades Adobe Experience Manager (AEM) ou os recursos mais complexos criados com vários componentes.

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

Para obter informações sobre os fundamentos de desenvolvimento relacionados a cada componente, consulte Recursos e Componentes Essenciais.

Introdução getting-started

O guia deve ser usado em instalações de desenvolvimento de instâncias de autor (localhost:4502) e instâncias de publicação (localhost:4503).

O site Componentes da comunidade é acessado navegando até

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

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:

Página inicial home-page

O guia fornece uma lista de componentes SCF disponíveis para visualização e protótipo no lado esquerdo da página.

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

da comunidade

Páginas de componentes component-pages

Selecione um componente na lista do lado esquerdo da página.

O corpo principal do guia é exibido:

Interações do autor author-interactions

Ao usar o guia em uma instância do autor, é possível executar a configuração de um componente abrindo a 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 da caixa de diálogo são descritas na seção Componentes de Comunidades para autores.

Para o guia Componentes da Comunidade, algumas configurações da caixa de diálogo de componentes são sobrepostas ao estado de alternância Incluível. 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 incluível e clique duas vezes para abrir a caixa de diálogo de edição:

Na guia Modelos:

Interações do Publish publish-interactions

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

Bibliotecas do lado do cliente client-side-libraries

As bibliotecas do lado do cliente (clientlibs) listadas para cada componente são aquelas necessárias para serem referenciadas quando o componente for colocado em uma página. As 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 para Componentes de Comunidades.

Representação impersonation

Na instância do autor, onde geralmente há um usuário 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 o nome de usuário ou selecione 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 os usuários de demonstração.

Personalização customization

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

Habilitando a personalização enabling-customization

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

Usando o componente de comentários como exemplo, na instância do autor ou de publicação, conectada com privilégios de administrador:

Guia Modelos templates-tab

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

O Editor de modelo permite que 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á os erros ao colocar um ponto na medianiz e marcar o texto como vermelho.

Guia CSS css-tab

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

Se um componente for composto por 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 que usam essa regra clicando ao lado da regra na medianiz.

Guia Dados data-tab

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 e destacados no editor.