O guia Componentes da comunidade é uma ferramenta de desenvolvimento interativo para o quadro de componentes sociais (SCF). Ele fornece uma lista de componentes disponíveis do AEM Communities ou os recursos mais complexos criados de vários componentes.
Juntamente com as informações básicas de cada componente, o guia permite a experimentação sobre como os componentes/recursos do SCF funcionam e como eles podem ser configurados ou personalizados.
Para obter informações sobre essências de desenvolvimento relacionadas a cada componente, consulte Fundamentos de recursos e componentes.
O guia deve ser usado 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 de acordo com:
Ao criar, 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 visualização para ativar os links.
Com a página do componente exibida no navegador, volte para o modo Editar para abrir a caixa de diálogo de edição do componente.
Para obter informações gerais sobre criação, visualize o guia rápido para a criação de páginas.
Se não estiver familiarizado com AEM, visualize a documentação em tratamento básico.
O guia fornece uma lista de componentes SCF disponíveis para pré-visualização e protótipo no lado esquerdo da página.
O Guia de componentes é exibido em uma instância do autor no modo de Edição:
Selecione um componente na lista no lado esquerdo da página.
O corpo principal da guia é exibido:
Título: O nome do componente selecionado
Bibliotecas do lado do cliente: Uma lista de uma ou mais categorias obrigatórias
Inclusive: Se o componente puder ser incluído dinamicamente, o estado poderá ser alternado no modo de edição do autor:
Componente ou recurso de exemplo: 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 listagem de componentes quando a janela do navegador for muito estreita.
Ao usar o guia em uma instância de 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 Componentes e recursos básicos da documentação, enquanto as configurações da caixa de diálogo estão descritas em Componentes das comunidades para autores.
Para o guia Componentes da comunidade , algumas configurações de diálogo de componentes são sobrepostas com o Inclusive alternar estado. 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:
Em Modelos guia :
Incluir o componente-filho com sling:include
Se estiver desmarcado, 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á o 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 recursos como um visitante do site (não conectado) e como membros com vários privilégios quando conectado.
As bibliotecas do lado do cliente (clientlibs) listadas para cada componente são obrigatório a ser referenciado 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 usado para renderizar o componente no navegador.
Para obter mais informações, visite Clientlibs para componentes do Communities.
Na instância do autor, onde um deles geralmente está conectado como administrador ou desenvolvedor, para experimentar o componente conectado como outro usuário, use a caixa de texto à esquerda do 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 o usuários de demonstração.
Quando ativado, cada componente do SCF está disponível para protótipo 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 é salva no repositório.
Para experimentar rapidamente personalizações, a scg:showIde
deve ser adicionada ao nó do JCR de conteúdo da página de componente e definida como true.
Usando o componente comments como exemplo, na instância de autor ou publicação, conectado com privilégios de administrador:
Navegue até CRXDE Lite
Por exemplo, http://localhost:4503/crx/de
Selecione o jcr:content
nó
Por exemplo, /content/community-components/en/comments/jcr:content
Adicionar uma propriedade
scg:showIde
String
true
Selecionar Salvar tudo
Recarregue 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 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á quaisquer erros ao colocar um ponto na sarjeta e marcar o texto em vermelho.
Selecione a guia CSS para ver o CSS associado ao componente.
Se um componente for composto de vários componentes, alguns CSS poderão 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 guia .
Selecione a guia Data para mostrar os dados do endpoint .social.json . Esses dados são editáveis e aplicados à instância do componente de amostra.
Erros de sintaxe podem ser marcados na guia , bem como destacados no editor.