Show Menu
TÓPICOS×

Guia de componentes da comunidade

O guia Community Components é uma ferramenta de desenvolvimento interativo para o quadro de componentes sociais (SCF) . Fornece uma lista dos componentes AEM Communities disponíveis ou dos recursos mais complexos criados de 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 o desenvolvimento essencial relacionado a cada componente, consulte Recurso 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á ou não conectado
  • Se conectado, os privilégios atribuídos ao membro
  • Se o SRP padrão, JSRP , está ou não 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:
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 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 sobre criação, consulte o guia rápido para criar páginas .
Se não estiver familiarizado com o AEM, consulte a documentação sobre manuseio Manuseio básico básico.

Página Inicial

O guia fornece uma lista de componentes SCF disponíveis para visualização e protótipo 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 na lista ao lado esquerdo da página.
O corpo principal da guia exibe:
  1. Título: O nome do componente selecionado
  2. Bibliotecas do cliente: Uma lista de uma ou mais categorias obrigató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.
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 da caixa de diálogo são descritas na seção Communities Components (Componentes de comunidades) para autores.
Para o guia Componentes da comunidade, algumas configurações de diálogo do componente são sobrepostas com o 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 :
  • 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.
Lembre-se de que, se o SRP for deixado como padrão para JSRP , o UGC inserido na instância de publicação estará visível somente na publicação e *não será visível do console de 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 aquelas necessárias para 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 (Clientlibs para componentes de comunidades).

Representação

Na instância do autor, em que 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 os usuários da demonstração.

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.

Ativação da personalizaçã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 scg:showIde propriedade deve ser adicionada ao nó do 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
  2. Selecionar o jcr:content nó 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
  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 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.