Extensão de suportes de AEM

Visão geral

A extensão AEM Brackets fornece um fluxo de trabalho suave para editar AEM componentes e bibliotecas de clientes e aproveita o poder do editor de código do Brackets, que dá acesso de dentro do editor de códigos a arquivos e camadas do Photoshop. A sincronização fácil oferecida pela extensão (sem Maven ou File Vault necessário) aumenta a eficiência do desenvolvedor e também ajuda desenvolvedores front-end com conhecimento de AEM limitado a participar de projetos. Essa extensão também fornece suporte para a Linguagem de modelo HTML (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 AEM Brackets 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 expressões e data-sly-* instruções de bloco.

Além disso, o Brackets tem muitos recursos úteis para desenvolvedores de fim de fonte AEM:

• Suporte ao arquivo 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 AEM Brackets oferece suporte ao Brackets versão 1.0 ou superior.

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

A extensão

Para instalar a extensão, proceda da seguinte maneira:

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

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

   

3. Clique em Instalar.

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

Introdução

O projeto do pacote de conteúdo

Após a instalação da extensão, você pode começar a desenvolver componentes AEM abrindo uma pasta de pacote de conteúdo do sistema de arquivos com o Brackets.

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 a definição de filtro do Workspace.

No menu File do Brackets, escolha Open Folder… e escolha a pasta jcr_root ou a pasta do projeto principal.

Configurações do projeto

Para sincronizar o conteúdo de e para uma instância de desenvolvimento de AEM, é necessário definir as Configurações do projeto. Isso pode ser feito indo até 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 o conteúdo (por exemplo, admin)
4. A senha do usuário (por exemplo, admin)

Sincronizar conteúdo

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

Sincronização automatizada de arquivos alterados

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

Sincronização bidirecional manual

No Explorador de Projetos, 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 AEM Brackets apresenta um ícone de notificação na barra de ferramentas à direita da janela Brackets, 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 dos arquivos não foram sincronizados
• vermelho - nenhum dos arquivos foi sincronizado

Clicar no ícone de notificação abrirá a caixa de diálogo Status da Sincronização que lista todos os status de cada arquivo sincronizado.

Editar código HTL

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

Preenchimento automático 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 de expressão

Em uma expressão ${}, nomes de variáveis comuns são preenchidos automaticamente.

Mais informações

A Extensão AEM Brackets é um projeto de código aberto, hospedado no GitHub pela organização Adobe Marketing Cloud, sob a Licença do Apache, versão 2.0:

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

O editor de código 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

Você pode contribuir!