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é

• https://<server>:<port>/content/community-components/en.html

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:

• Interface do usuário padrão:

  https://<server>:<port>/editor.html/content/community-components/en.html

• Interface clássica:

  https://<server>:<port>/cf#/content/community-components/en.html

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:

Páginas de componentes

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

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.

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:

Na guia Modelos:

• 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.

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

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.

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.