Estensione AEM parentesi graffe

Panoramica

L'estensione AEM Brackets offre un flusso di lavoro fluido per la modifica AEM componenti e librerie client e sfrutta la potenza dell'editor di codici Brackets, che permette di accedere ai file e ai livelli Photoshop dall'editor di codice. La semplice sincronizzazione fornita dall'estensione (non è richiesto Maven o File Vault) aumenta l'efficienza degli sviluppatori e aiuta gli sviluppatori front-end con AEM limitata conoscenza a partecipare ai progetti. Questa estensione fornisce anche il supporto per il HTML Template Language (HTL), che elimina la complessità della JSP per rendere lo sviluppo dei componenti più semplice e sicuro.

chlimage_1-53

Funzioni

Le caratteristiche principali dell'estensione AEM parentesi sono:

  • Sincronizzazione automatizzata dei file modificati nell'istanza di sviluppo AEM.
  • Sincronizzazione bidirezionale manuale di file e cartelle.
  • Sincronizzazione completa del pacchetto di contenuti del progetto.
  • Completamento del codice HTL per le espressioni e le istruzioni di blocco data-sly-*.

Inoltre, Bracket include molte funzionalità utili per AEM sviluppatori di font-end:

  • Supporto di file Photoshop per estrarre informazioni da un file PSD, come livelli, misure, colori, font, testi, ecc.
  • Suggerimenti per il codice dal file PSD, per riutilizzare facilmente le informazioni estratte nel codice.
  • Supporto preprocessore CSS, come LESS e SCSS.
  • E centinaia di ulteriori estensioni che coprono esigenze più specifiche.

Installazione

Parentesi

L’estensione AEM parentesi quadre supporta le parentesi quadre versione 1.0 o successiva.

Scaricate la versione più recente di Bracket da brackets.io.

Estensione

Per installare l’estensione procedere come segue:

  1. Aprite Le Parentesi. Nel menu File, selezionare Extension Manager…

  2. Immettere AEM nella barra di ricerca e cercare AEM Estensione parentesi quadre.

    chlimage_1-54

  3. Fare clic su Installa.

  4. Chiudere la finestra di dialogo e Extension Manager al termine dell'installazione.

Guida introduttiva

Il progetto Content-Package

Dopo aver installato l’estensione, potete iniziare a sviluppare AEM componenti aprendo una cartella di pacchetto di contenuti dal file system con parentesi quadre.

Il progetto deve contenere almeno:

  1. una cartella jcr_root (ad esempio myproject/jcr_root)

  2. un file filter.xml (ad esempio myproject/META-INF/vault/filter.xml); per ulteriori dettagli sulla struttura del file filter.xml, vedere la definizione del filtro dell'area di lavoro.

Nel menu File delle parentesi quadre, scegliere Apri cartella… e scegliere la cartella jcr_root o la cartella di progetto principale.

NOTA

Se non disponete di un progetto personalizzato con un pacchetto di contenuti, potete provare l'esempio HTL TodoMVC. In GitHub, fate clic su Scarica ZIP, estraete i file localmente e, come indicato in precedenza, aprite la cartella jcr_root in Bracket. Seguite quindi i passaggi indicati di seguito per impostare le Impostazioni progetto e, infine, caricare l'intero pacchetto nell'istanza di sviluppo AEM, eseguendo un Esporta pacchetto di contenuto come indicato più in basso nella sezione Sincronizzazione pacchetto completo.

Dopo questa procedura, è necessario poter accedere all'URL /content/todo.html nell'istanza di sviluppo AEM e iniziare a apportare modifiche al codice in Bracket, per vedere come, dopo aver effettuato un aggiornamento nel browser Web, le modifiche siano state immediatamente sincronizzate con il server di AEM.

Impostazioni progetto

Per sincronizzare il contenuto con e da un’istanza di sviluppo AEM, è necessario definire le impostazioni del progetto. A tale scopo, è possibile accedere al menu AEM e scegliere Impostazioni progetto…

chlimage_1-55

Le impostazioni progetto consentono di definire:

  1. L’URL del server (ad esempio http://localhost:4502)
  2. Consente di tollerare i server che non dispongono di un certificato HTTPS valido (lasciare deselezionato, se necessario)
  3. Nome utente utilizzato per la sincronizzazione del contenuto (ad esempio admin)
  4. La password dell'utente (ad esempio admin)

Sincronizzazione del contenuto

L'estensione AEM parentesi quadre offre i seguenti tipi di sincronizzazione del contenuto per file e cartelle consentiti dalle regole di filtro definite in filter.xml:

Sincronizzazione Automatizzata Dei File Modificati

Le modifiche verranno sincronizzate solo da Bracket all'istanza AEM, ma non viceversa.

Sincronizzazione bidirezionale manuale

In Esplora progetti, aprire il menu contestuale facendo clic con il pulsante destro del mouse su un file o una cartella, e accedere alle opzioni Esporta in server o Importa da server.

chlimage_1-56

NOTA

Se la voce selezionata è all'esterno della cartella jcr_root, le voci di menu contestuali Esporta nel server e Importa da server sono disattivate.

Sincronizzazione completa del pacchetto di contenuti

Nel menu AEM, le opzioni Esporta pacchetto di contenuti o Importa pacchetto di contenuti consentono di sincronizzare l'intero progetto con il server.

chlimage_1-57

Stato sincronizzazione

L’estensione AEM parentesi quadre dispone di un’icona di notifica nella barra degli strumenti, a destra della finestra Parentesi, che indica lo stato dell’ultima sincronizzazione:

  • verde: tutti i file sono stati sincronizzati correttamente
  • blue - È in corso un'operazione di sincronizzazione
  • giallo - alcuni dei file non erano sincronizzati
  • rosso - nessuno dei file è stato sincronizzato

Facendo clic sull'icona di notifica si aprirà la finestra di dialogo del rapporto Stato sincronizzazione in cui viene visualizzato l'elenco di tutti gli stati per ciascun file sincronizzato.

chlimage_1-58

NOTA

Solo il contenuto contrassegnato come incluso nelle regole di filtro di filter.xml verrà sincronizzato, indipendentemente dal metodo di sincronizzazione utilizzato.

Inoltre, i file .vltignore sono supportati per escludere il contenuto dalla sincronizzazione con e dall'archivio.

Modifica del codice HTL

L’estensione AEM parentesi quadre include anche il completamento automatico per semplificare la scrittura di attributi ed espressioni HTL.

Completamento automatico attributi

  1. In un attributo HTML, digitate sly. L'attributo viene completato automaticamente in data-sly-.
  2. Selezionate l’attributo HTL nell’elenco a discesa.

Completamento automatico espressione

All'interno di un'espressione ${}, i nomi delle variabili comuni vengono completati automaticamente.

Ulteriori informazioni

L'estensione AEM Brackets è un progetto open-source, ospitato su GitHub dall'organizzazione Adobe Marketing Cloud, con la licenza Apache, versione 2.0:

L'editor del codice Brackets è anche un progetto open-source, ospitato su GitHub dall'organizzazione Adobe Systems Incorporated:

Sentiti libero di contribuire!

In questa pagina