Show Menu
TÓPICOS×

Extensão de colchetes AEM

Visão geral

A Extensão de colchetes de AEM fornece um fluxo de trabalho suave para editar componentes do AEM e bibliotecas de clientes, e aproveita o poder do editor de códigos Brackets , que dá acesso de dentro do editor de código a arquivos e camadas do 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 limitado de AEM a participar de projetos. Essa extensão também oferece suporte para a Linguagem de modelo HTML (HTL) , que elimina a complexidade do JSP para facilitar e proteger o desenvolvimento de componentes.

Recursos

Os principais recursos da Extensão de colchetes AEM são:
  • Sincronização automatizada de arquivos alterados para a instância de desenvolvimento do 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 declarações de data-sly-* bloco.
Além disso, o Brackets vem com muitos recursos úteis para desenvolvedores de fontes do AEM:
  • Suporte a arquivos do 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 colchetes AEM oferece suporte aos colchetes versão 1.0 ou superior.
Descarregue a versão mais recente do Brackets de churrascos.io .

A extensão

Para instalar a extensão, siga estas instruções:
  1. Abra Colchetes. No menu Arquivo , selecione Extension Manager...
  2. Insira o 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 Content-Package

Depois que a extensão for instalada, você poderá começar a desenvolver componentes do AEM abrindo uma pasta de pacote de conteúdo do sistema de arquivos com chaves.
O projeto deve conter pelo menos:
  1. uma jcr_root pasta (por exemplo, myproject/jcr_root )
  2. um filter.xml arquivo (por exemplo, myproject/META-INF/vault/filter.xml ); para obter mais detalhes sobre a estrutura do filter.xml arquivo, consulte a definição de Filtro da Workspace.
No menu Arquivo de colchetes, escolha Abrir pasta... e selecione a jcr_root pasta ou a pasta do projeto pai.
Se você não tiver um projeto próprio com um pacote de conteúdo, experimente o exemplo aem-sightly-sample-todomvc HTL TodoMVC. No GitHub, clique em Baixar ZIP , extraia os arquivos localmente e, conforme as instruções acima, abra a jcr_root pasta em Colchetes. Em seguida, siga as etapas abaixo para configurar as Configurações do projeto e, por fim, carregue o pacote inteiro para a instância de desenvolvimento do AEM, fazendo um Pacote de conteúdo de exportação, conforme instruído mais adiante na seção Sincronização completa do pacote de conteúdo.
Após essas etapas, você deve poder acessar o /content/todo.html URL na instância de desenvolvimento do AEM e começar a fazer modificações no código no Brackets e ver como, depois de fazer uma atualização no navegador da Web, as alterações foram sincronizadas imediatamente no servidor AEM.

Configurações do projeto

Para sincronizar o conteúdo de e para uma instância de desenvolvimento do 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 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 do 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.
Se a entrada selecionada estiver fora da jcr_root pasta, as entradas do menu contextual Exportar para servidor e Importar do servidor serão desativadas.

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 o projeto inteiro 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 da sincronização que lista todos os status de cada arquivo sincronizado.
Somente o conteúdo marcado como incluído pelas regras de filtragem de filter.xml será sincronizado, independentemente do método de sincronização usado.
Além disso, .vltignore os arquivos são suportados para excluir o conteúdo da sincronização para e do repositório.

Edição do código HTL

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

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 de expressão

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

Mais informações

A Extensão de colchetes de AEM é um projeto de código aberto, hospedado no GitHub pela organização da Adobe Marketing Cloud , sob a Licença do Apache, versão 2.0:
O editor de código do Brackets também é um projeto de código aberto, hospedado no GitHub pela organização Adobe Systems Incorporated :
Fique à vontade para contribuir!