Show Menu
ARGOMENTI×

Estensione AEM Bracket

Panoramica

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

Funzioni

Le caratteristiche principali di AEM Brackets Extension sono:
  • Sincronizzazione automatizzata dei file modificati nell’istanza di sviluppo di AEM.
  • Sincronizzazione bidirezionale manuale di file e cartelle.
  • Sincronizzazione completa del pacchetto di contenuti del progetto.
  • Completamento codice HTL per espressioni e istruzioni data-sly-* di blocco.
Inoltre, le parentesi quadre contengono molte utili funzioni per gli sviluppatori di font AEM:
  • Supporto per 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 Brackets supporta la versione 1.0 o successiva.
Scaricate la versione più recente di Brackets da brackets.io .

Estensione

Per installare l’estensione procedere come segue:
  1. Aprite Le Parentesi. Nel menu File , selezionate Extension Manager.
  2. Immettete AEM nella barra di ricerca e cercate AEM Brackets Extension .
  3. Fate clic su Installa .
  4. Al termine dell’installazione, chiudete la finestra di dialogo e Extension Manager.

Introduzione

Il progetto Content-Package

Dopo aver installato l’estensione, potete iniziare a sviluppare componenti AEM aprendo una cartella di pacchetto di contenuti dal file system con le parentesi quadre.
Il progetto deve contenere almeno:
  1. una jcr_root cartella (ad esempio myproject/jcr_root )
  2. un filter.xml file (ad esempio myproject/META-INF/vault/filter.xml ); per ulteriori dettagli sulla struttura del filter.xml file, vedere la definizione del filtro Workspace.
Nel menu File parentesi quadre, scegliete Apri cartella... e scegliete la jcr_root cartella o la cartella di progetto principale.
Se non disponete di un progetto con un pacchetto di contenuti, potete provare l’esempio aem-sightly-sample-todomvcHTL TodoMVC. In GitHub, fate clic su Scarica ZIP , estraete i file localmente e, come indicato sopra, aprite la jcr_root cartella in Bracket. Seguite quindi i passaggi indicati di seguito per impostare le impostazioni del progetto e, infine, caricare l’intero pacchetto nell’istanza di sviluppo di AEM, eseguendo un pacchetto di esportazione dei contenuti come indicato più in basso nella sezione Sincronizzazione pacchetto di contenuti completi.
Dopo questa procedura, devi essere in grado di accedere all’ /content/todo.html URL nell’istanza di sviluppo di AEM e puoi iniziare a modificare il codice in Bracket per vedere come, dopo aver effettuato un aggiornamento nel browser Web, le modifiche siano state immediatamente sincronizzate con il server AEM.

Impostazioni progetto

Per sincronizzare il contenuto con e da un’istanza di sviluppo AEM, è necessario definire le impostazioni del progetto. A tale scopo, dal menu AEM scegliete Impostazioni progetto.
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

AEM Brackets Extension fornisce i seguenti tipi di sincronizzazione del contenuto per file e cartelle consentiti dalle regole di filtro definite in filter.xml :

Sincronizzazione Automatica Dei File Modificati

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

Sincronizzazione bidirezionale manuale

In Esplora progetti, aprite il menu contestuale facendo clic con il pulsante destro del mouse su un file o una cartella, quindi è possibile accedere alle opzioni Esporta sul server o Importa dal server .
Se la voce selezionata è all'esterno della jcr_root cartella, le voci di menu contestuali Esporta nel server e Importa dal server sono disattivate.

Sincronizzazione completa dei pacchetti 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.

Stato sincronizzazione

AEM Brackets Extension 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.
Solo il contenuto contrassegnato come incluso dalle regole di filtro filter.xml verrà sincronizzato, indipendentemente dal metodo di sincronizzazione utilizzato.
Inoltre, .vltignore i file sono supportati per escludere il contenuto dalla sincronizzazione con e dall’archivio.

Modifica del codice HTL

L’estensione AEM Brackets offre 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 è 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

AEM Brackets Extension è 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!