Extensão de Colchetes AEM aem-brackets-extension
Visão geral overview
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 features
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 installation
Colchetes brackets
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 the-extension
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.
Introdução getting-started
O projeto do pacote de conteúdo the-content-package-project
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 dofilter.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.
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./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.Configurações do projeto project-settings
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 o seguinte:
- O URL do servidor (por exemplo,
http://localhost:4502
) - Tolerar servidores que não tenham um certificado HTTPS válido (manter desmarcado, a menos que necessário)
- O nome de usuário usado para sincronizar conteúdo (por exemplo,
admin
) - A senha do usuário (por exemplo,
admin
)
Sincronização de conteúdo synchronizing-content
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 automated-synchronization-of-changed-files
Isso só sincronizará as alterações entre Colchetes e a instância AEM, mas nunca o contrário.
Sincronização Bidirecional Manual manual-bidirectional-synchronization
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.
jcr_root
pasta, a variável Exportar para o servidor e Importar do servidor as entradas de menu contextuais estão desativadas.Sincronização completa do pacote de conteúdo full-content-package-synchronization
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 synchronization-status
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.
filter.xml
serão sincronizados, independentemente do método de sincronização usado..vltignore
os arquivos são suportados para excluir conteúdo da sincronização para e do repositório.Edição do código HTL editing-htl-code
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 attribute-auto-completion
- Em um atributo HTML, digite
sly
. O atributo é preenchido automaticamente paradata-sly-
. - Selecione o atributo HTL na lista suspensa.
Preenchimento automático da expressão expression-auto-completion
Em uma expressão ${}
, os nomes de variáveis comuns são preenchidos automaticamente.
Mais informações more-information
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!