Extensão de Colchetes AEM

Visão geral

A extensão AEM Brackets fornece um fluxo de trabalho suave para editar componentes AEM e bibliotecas de clientes e usa o poder do Colchetes editor de código, que dá acesso a arquivos e camadas do Photoshop a partir do editor de código. A fácil sincronização fornecida pela extensão (sem a necessidade de Maven ou File Vault) aumenta a eficiência do desenvolvedor e também ajuda desenvolvedores de front-end com conhecimento limitado em AEM a participar de projetos. Essa extensão também fornece suporte para o Linguagem de modelo HTML (HTL), que elimina a complexidade do JSP para tornar o desenvolvimento de componentes mais fácil e seguro.

Recursos

As principais características da extensão de colchetes 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.
• Autocompletar de código HTL para expressões e data-sly-* instruções em bloco.

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

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

Instalação

Colchetes

A extensão AEM Brackets é compatível com a versão 1.0 ou superior do Brackets.

Baixe a versão mais recente do Brackets em colchetes.io.

A extensão

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

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

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

   

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

Depois que a extensão for instalada, você poderá começar a desenvolver componentes do AEM abrindo uma pasta de pacote de conteúdo no seu sistema de arquivos com o Brackets.

O projeto deve conter pelo menos:

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

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

Entre parênteses' Arquivo escolha Abrir pasta… e escolha a opção jcr_root ou a pasta do projeto principal.

Configurações do projeto

Para sincronizar seu conteúdo de e para uma instância de desenvolvimento AEM, é necessário definir as Configurações do projeto. Isso pode ser feito acessando o 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 (manter 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)

Sincronização de conteúdo

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

Sincronização Automatizada De Arquivos Alterados

Isso só sincronizará as alterações entre Colchetes e 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 Exportar para o servidor ou Importar do servidor opções podem ser acessadas.

Sincronização completa do pacote de conteúdo

No AEM menu, a caixa Exportar pacote de conteúdo ou Importar pacote de conteúdo As opções 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 abre a caixa de diálogo Status da sincronização, que lista todos os status de cada arquivo sincronizado.

Edição do código HTL

A extensão Colchetes AEM também apresenta preenchimento automático para facilitar a gravação de atributos e expressões HTL.

Preenchimento automático do atributo

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

Preenchimento automático da expressão

Em uma expressão ${}, os 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 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ódigo Brackets também é um projeto de código aberto, hospedado no GitHub pela Adobe Systems Incorporated organização:

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

Sinta-se à vontade para contribuir!