Extensão dos colchetes AEM

Visão geral

A Extensão de colchetes de AEM fornece um fluxo de trabalho suave para editar AEM componentes e bibliotecas clientes, e aproveita o poder do editor de códigos do 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 AEM limitado 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.

chlimage_1-53

Recursos

Os principais recursos da Extensão de colchetes de 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.
  • Conclusão do código HTL para declarações de expressões e data-sly-* bloqueio.

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

  • Suporte a arquivos 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 suportes AEM suporta os suportes 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. Digite AEM na barra de pesquisa e procure AEM extensão de colchetes.

    chlimage_1-54

  3. Clique em Instalar.

  4. Feche a caixa de diálogo e a 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á start o desenvolvimento de componentes AEM abrindo uma pasta de pacote de conteúdo do seu 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 daWorkspace.

No menu Arquivo de colchetes, escolha Abrir pasta… e selecione a jcr_root pasta ou a pasta do projeto pai.

Observação

Se você não tiver um projeto próprio com um pacote de conteúdo, experimente o exemplo 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 sua instância de desenvolvimento 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 ser capaz de acessar o /content/todo.html URL na instância de desenvolvimento AEM e pode 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 AEM, é necessário definir as Configurações do projeto. Isso pode ser feito indo para o menu AEM e escolhendo Configurações do projeto…

chlimage_1-55

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 de 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 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.

chlimage_1-56

Observação

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.

chlimage_1-57

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 de sincronização que lista de todo o status de cada arquivo sincronizado.

chlimage_1-58

Observação

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 suportes de AEM também apresenta alguns recursos de autocompletar para facilitar a escrita de atributos HTL e expressões.

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.

Autocompletar de Expressão

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

Mais informações

A AEM Brackets Extension é um projeto open-source, hospedado no GitHub pela organização da Adobe Marketing Cloud , sob a licença do Apache, versão 2.0:

O editor de códigos do Brackets também é um projeto de código aberto, hospedado no GitHub pela organização da Adobe Systems Incorporated :

Sinta-se à vontade para contribuir!

Nesta página