Estensione Brackets AEM

Panoramica

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

Funzioni

Le caratteristiche principali dell'estensione Brackets AEM 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 espressioni e istruzioni per blocchi data-sly-* .

Inoltre, Brackets viene fornito con molte funzioni utili per AEM sviluppatori di font-end:

• Supporto file Photoshop per estrarre informazioni da un file PSD, come livelli, misure, colori, caratteri, testi, ecc.
• Suggerimenti sul codice dal PSD, per riutilizzare facilmente queste informazioni estratte nel codice.
• Supporto preprocessore CSS, come LESS e SCSS.
• E centinaia di estensioni aggiuntive che soddisfano esigenze più specifiche.

Installazione

Parentesi graffa

L'estensione Brackets AEM supporta la versione 1.0 o successiva di Brackets.

Scarica la versione più recente di Brackets da brackets.io.

Estensione

Per installare l'estensione procedi come segue:

1. Parentesi aperte. Nel menu File, selezionare Extension Manager…

2. Inserisci AEM nella barra di ricerca e cerca AEM Estensione parentesi.

   

3. Fare clic su Installa.

4. Chiudi la finestra di dialogo e l’Extension Manager al termine dell’installazione.

Guida introduttiva

Progetto Content-Package

Dopo aver installato l’estensione, puoi iniziare a sviluppare componenti AEM aprendo una cartella di pacchetti di contenuti dal file system con Brackets.

Il progetto deve contenere almeno:

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

2. un file filter.xml (ad es. myproject/META-INF/vault/filter.xml); per ulteriori dettagli sulla struttura del file filter.xml, consulta la Definizione del filtro area di lavoro.

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

Impostazioni progetto

Per sincronizzare il contenuto con e da un’istanza di sviluppo AEM, devi definire le impostazioni del progetto. Per farlo, vai al menu AEM e scegli Impostazioni progetto….

Le impostazioni del progetto consentono di definire:

1. L’URL del server (ad esempio http://localhost:4502)
2. È possibile tollerare i server privi di un certificato HTTPS valido (mantieni deselezionato, se necessario)
3. Nome utente utilizzato per la sincronizzazione del contenuto (ad esempio admin)
4. Password dell’utente (ad esempio admin)

Sincronizzazione del contenuto

L'estensione Brackets AEM fornisce 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

Questo sincronizzerà solo le modifiche da Brackets all'istanza AEM, ma mai 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 sul server o Importa dal server.

Sincronizzazione completa del pacchetto di contenuti

Nel menu AEM, le opzioni Export Content Package o Import Content Package consentono di sincronizzare l'intero progetto con il server.

Stato sincronizzazione

L'estensione Brackets AEM presenta un'icona di notifica nella barra degli strumenti a destra della finestra Brackets, che indica lo stato dell'ultima sincronizzazione:

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

Facendo clic sull’icona di notifica si aprirà la finestra di dialogo Rapporto stato sincronizzazione in cui viene visualizzato l’elenco di tutti gli stati per ogni file sincronizzato.

Modifica del codice HTL

L’estensione AEM Brackets dispone anche di un certo completamento automatico per facilitare la scrittura di attributi ed espressioni HTL.

Completamento automatico attributi

1. In un attributo HTML, digita sly. L’attributo viene completato automaticamente in data-sly-.
2. Seleziona 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 Brackets AEM è un progetto open source ospitato su GitHub dall’organizzazione Adobe Marketing Cloud, con la licenza Apache, versione 2.0:

• Archivio del codice: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Licenza Apache, versione 2.0: https://www.apache.org/licenses/LICENSE-2.0.html

L’editor di codice Brackets è anche un progetto open source ospitato su GitHub dall’organizzazione Adobe Systems Incorporated :

• Archivio del codice: https://github.com/adobe/brackets

Sentiti libero di contribuire!