Guia de componentes da comunidade community-components-guide
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.
Introdução getting-started
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:
- O servidor (autor ou publicação)
- Se o visitante do site está ou não conectado
- Se estiver conectado, os privilégios atribuídos ao membro
- se o SRP padrão é ou não, JSRP, está em uso
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
-
IU Clássica:
https://<server>:<port>/cf#/content/community-components/en.html
Página Inicial home-page
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:
Páginas de componentes component-pages
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:
- 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
-
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 .
Interações do autor author-interactions
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).
- o texto exibido é: "Esse componente é incluído por meio de seu 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 texto exibido é: "Esse componente é incluído dinamicamente."
O padrão está desmarcado.
Publicar interações 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 conectado.
Bibliotecas do lado do cliente client-side-libraries
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.
Representação impersonation
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.
Personalização customization
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.
Ativação da personalização enabling-customization
Para experimentar rapidamente personalizações, a scg:showIdedeve 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:contentnóPor exemplo,
/content/community-components/en/comments/jcr:content -
Adicionar uma propriedade
- Nome
scg:showIde - Tipo
String - Valor
true
- Nome
-
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.
Guia Modelos templates-tab
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.
Guia CSS css-tab
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 .
Guia Dados data-tab
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.