Extensão dos suportes AEM

Visão geral

A Extensão de colchetes de AEM fornece um fluxo de trabalho suave para editar AEM componentes e bibliotecas de clientes, e aproveita a potência do editor de códigos Colchetes, que dá acesso de dentro do editor de código a arquivos e camadas Photoshop. A sincronização fácil oferecida pela extensão (sem necessidade de Maven ou File Vault) aumenta a eficiência do desenvolvedor e também ajuda os desenvolvedores de front-end com conhecimento AEM limitado a participar de projetos. Essa extensão também oferece suporte para HTML Template Language (HTL), o que elimina a complexidade do JSP para tornar o desenvolvimento de componentes mais fácil e seguro.

Recursos

Os principais recursos da Extensão de colchetes de AEM são:

• Sincronização automatizada de arquivos alterados para a instância de desenvolvimento AEM.
• Sincronização bidirecional manual de arquivos e pastas.
• Sincronização completa do pacote de conteúdo do projeto.
• Conclusão do código HTL para instruções de bloco expressão e data-sly-*.

Além disso, o Brackets vem com muitos recursos úteis para desenvolvedores AEM de fontes:

• Suporte a arquivos Photoshop para extrair informações de um arquivo PSD, como camadas, medidas, cores, fontes, textos etc.
• Dicas de código do PSD, para reutilizar facilmente essas informações extraídas no código.
• Suporte a pré-processador CSS, como LESS e SCSS.
• E centenas de extensões adicionais que cobrem necessidades mais específicas.

Instalação

Colchetes

A extensão de suportes AEM suporta os suportes versão 1.0 ou superior.

Baixe a versão mais recente do Brackets de colchets.io.

A extensão

Para instalar a extensão, siga estas instruções:

1. Abra Colchetes. No menu Arquivo, selecione Extension Manager…

2. Digite AEM na barra de pesquisa e procure AEM Extensão de Colchetes.

   

3. Clique em Instalar.

4. Feche a caixa de diálogo e a Extension Manager após a conclusão da instalação.

Introdução

O projeto Content-Package

Depois que a extensão for instalada, você poderá start o desenvolvimento de componentes AEM abrindo uma pasta de pacote de conteúdo do seu sistema de arquivos com chaves.

O projeto deve conter pelo menos:

1. uma pasta jcr_root (por exemplo, myproject/jcr_root)

2. um arquivo filter.xml (por exemplo, myproject/META-INF/vault/filter.xml); para obter mais detalhes sobre a estrutura do arquivo filter.xml, consulte Definição do filtro da área de trabalho.

No menu de Ficheiro dos Colchetes, escolha Abrir Pasta… e selecione a pasta jcr_root ou a pasta de projeto principal.

Configurações do projeto

Para sincronizar o conteúdo de e para uma instância de desenvolvimento AEM, é necessário definir as Configurações do projeto. Isso pode ser feito indo para o menu AEM e escolhendo Configurações do projeto…

As Configurações do projeto permitem definir:

1. O URL do servidor (por exemplo, http://localhost:4502)
2. Tolerar servidores que não tenham um certificado HTTPS válido (mantenha desmarcado, a menos que necessário)
3. O nome de usuário usado para sincronizar conteúdo (por exemplo, admin)
4. A senha do usuário (por exemplo, admin)

Sincronizando conteúdo

A Extensão de colchetes de AEM fornece os seguintes tipos de sincronização de conteúdo para arquivos e pastas permitidos pelas regras de filtragem definidas em filter.xml:

Sincronização automatizada de arquivos alterados

Isso só sincronizará as alterações de Colchetes para a instância AEM, mas nunca o contrário.

Sincronização bidirecional manual

No Project Explorer, abra o menu contextual clicando com o botão direito do mouse em qualquer arquivo ou pasta e as opções Exportar para Servidor ou Importar do Servidor podem ser acessadas.

Sincronização completa do pacote de conteúdo

No menu AEM, as opções Exportar pacote de conteúdo ou Importar pacote de conteúdo permitem sincronizar todo o projeto com o servidor.

Status da sincronização

A Extensão de colchetes AEM apresenta um ícone de notificação na barra de ferramentas à direita da janela Colchetes, que indica o status da última sincronização:

• verde - todos os arquivos foram sincronizados com êxito
• azul - uma operação de sincronização está em andamento
• amarelo - alguns arquivos não foram sincronizados
• vermelho - nenhum dos arquivos foi sincronizado

Clicar no ícone de notificação abrirá a caixa de diálogo do relatório Status de sincronização que lista de todo o status de cada arquivo sincronizado.

Edição do código HTL

A Extensão de suportes de AEM também apresenta alguns recursos de autocompletar para facilitar a escrita de atributos HTL e expressões.

Autocompletar de atributo

1. Em um atributo HTML, digite sly. O atributo é preenchido automaticamente para data-sly-.
2. Selecione o atributo HTL na lista suspensa.

Conclusão automática da expressão

Em uma expressão ${}, os nomes de variáveis comuns são concluídos automaticamente.

Mais informações

A Extensão AEM Brackets é um projeto open-source, hospedado no GitHub pela organização Adobe Marketing Cloud, sob a Licença Apache, versão 2.0:

• Repositório de código: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Licença do Apache, versão 2.0: https://www.apache.org/licenses/LICENSE-2.0.html

O editor de códigos do Brackets também é um projeto de código aberto, hospedado no GitHub pela organização Adobe Systems Incorporated:

• Repositório de código: https://github.com/adobe/brackets

Sinta-se à vontade para contribuir!