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.
As principais características da extensão de colchetes AEM são:
data-sly-*
instruções em bloco.Além disso, o Brackets vem com muitos recursos úteis para desenvolvedores de front-end AEM:
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.
Para instalar a extensão, proceda da seguinte maneira:
Colchetes. No menu Arquivo, selecione Extension Manager…
Enter AEM na barra de pesquisa e procure Extensão de Colchetes AEM.
Clique em Instalar.
Feche a caixa de diálogo e o Extension Manager após a conclusão da instalação.
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:
a jcr_root
pasta (por exemplo, myproject/jcr_root
)
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.
Se você não tiver um projeto próprio com um pacote de conteúdo, poderá tentar o Exemplo de HTL TodoMVC. No GitHub, clique em Fazer download do ZIP, extraia os arquivos localmente e, conforme instruído acima, abra o jcr_root
pasta entre colchetes. Siga as etapas abaixo para configurar o Configurações do projeto e, por fim, faça o upload de todo o pacote para a sua instância de desenvolvimento do AEM fazendo uma Exportar pacote de conteúdo conforme instruído na seção Sincronização completa do pacote de conteúdo.
Após essas etapas, você poderá acessar a variável /content/todo.html
URL na instância de desenvolvimento do AEM e você pode começar a fazer modificações no código entre parênteses e ver como, após uma atualização no navegador da Web, as alterações foram imediatamente sincronizadas com o servidor AEM.
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:
http://localhost:4502
)admin
)admin
)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
:
Isso só sincronizará as alterações entre Colchetes e a instância AEM, mas nunca o contrário.
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.
Se a entrada selecionada estiver fora do jcr_root
pasta, a variável Exportar para o servidor e Importar do servidor as entradas de menu contextuais estão desativadas.
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.
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:
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.
Somente conteúdo marcado como incluído pelas regras de filtragem de filter.xml
serão sincronizados, independentemente do método de sincronização usado.
Além disso, .vltignore
os arquivos são suportados para excluir conteúdo da sincronização para e do repositório.
A extensão Colchetes AEM também apresenta preenchimento automático para facilitar a gravação de atributos e expressões HTL.
sly
. O atributo é preenchido automaticamente para data-sly-
.Em uma expressão ${}
, os nomes de variáveis comuns são preenchidos automaticamente.
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:
O editor de código Brackets também é um projeto de código aberto, hospedado no GitHub pela Adobe Systems Incorporated organização:
Sinta-se à vontade para contribuir!