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.
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:
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
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.
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:
Selecione um componente da lista no lado esquerdo da página.
O corpo principal da guia exibe:
Título: O nome do componente selecionado
Bibliotecas do lado do cliente: Uma lista de uma ou mais categorias necessárias
Incluível: Se o componente puder ser incluído dinamicamente, o estado pode ser alternado no modo de edição do autor:
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.
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).
Se marcada, o Guia de componentes usará sling para incluir dinamicamente um componente do resourceType do nó filho (recurso não existente).
O padrão está desmarcado.
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.
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.
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.
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.
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:showIde
deve 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:
Navegue até CRXDE Lite
Por exemplo, http://localhost:4503/crx/de
Selecione o nó jcr:content
do componente
Por exemplo, /content/community-components/en/comments/jcr:content
Adicionar uma propriedade
scg:showIde
String
true
Selecione Salvar tudo
Recarregar a página Comentários no guia
http://localhost:4503/content/community-components/en/comments.html
Observe que agora há 3 guias para Modelos, CSS e Dados.
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.
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.
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.