DocumentazioneAEM 6.5 LTSGuida utente

Estensione AEM Brackets aem-brackets-extension

Last update: Thu Mar 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager 6.5 LTS
  • Argomenti:

Creato per:

  • Sviluppatore

Panoramica overview

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

chlimage_1-53

Funzioni features

Le caratteristiche principali dell’estensione AEM Brackets sono:

  • Sincronizzazione automatizzata dei file modificati con l’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 data-sly-* istruzioni di blocco.

Inoltre, Brackets include molte funzioni utili per gli sviluppatori di font-end di AEM:

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

Installazione installation

Parentesi brackets

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

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

Estensione the-extension

Per installare l’estensione, procedi come segue:

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

  2. Immetti AEM nella barra di ricerca e cerca l'estensione AEM Brackets.

    chlimage_1-54

  3. Fare clic su Installa.

  4. Al termine dell’installazione, chiudi la finestra di dialogo e Extension Manager.

Guida introduttiva getting-started

Il progetto Content-Package the-content-package-project

Dopo l’installazione dell’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 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 vedi la definizione filtro Workspace.

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

NOTE
Se non disponi di un tuo progetto con un pacchetto di contenuti, puoi provare l'Esempio HTL TodoMVC. Su GitHub, fai clic su Scarica ZIP, estrai i file localmente e, come indicato in precedenza, apri la cartella jcr_root in Brackets. Quindi segui i passaggi indicati di seguito per configurare le Impostazioni progetto e infine caricare l'intero pacchetto nell'istanza di sviluppo AEM eseguendo un Esporta pacchetto contenuto come indicato più avanti nella sezione Sincronizzazione completa pacchetto contenuti.
Dopo questi passaggi, dovresti essere in grado di accedere all'URL /content/todo.html nell'istanza di sviluppo di AEM e di iniziare a modificare il codice in Brackets per vedere come, dopo aver eseguito un aggiornamento nel browser web, le modifiche sono state immediatamente sincronizzate con il server AEM.

Impostazioni progetto project-settings

Per sincronizzare i contenuti con e da un’istanza di sviluppo di AEM, devi definire le impostazioni del progetto. Per eseguire questa operazione, vai al menu AEM e scegli Impostazioni progetto…

chlimage_1-55

Le Impostazioni progetto consentono di definire quanto segue:

  1. URL del server (ad esempio, http://localhost:4502)
  2. Tollerare i server che non dispongono di un certificato HTTPS valido (mantieni deselezionato, a meno che non sia necessario)
  3. Nome utente utilizzato per la sincronizzazione del contenuto (ad esempio, admin)
  4. Password dell'utente (ad esempio, admin)

Sincronizzazione dei contenuti synchronizing-content

L'estensione AEM Brackets 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 automated-synchronization-of-changed-files

In questo modo le modifiche verranno sincronizzate solo da Brackets all’istanza di AEM, ma non viceversa.

Sincronizzazione bidirezionale manuale manual-bidirectional-synchronization

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 su server o Importa da server.

chlimage_1-56

NOTE
Se la voce selezionata si trova all'esterno della cartella jcr_root, le voci di menu contestuali Esporta su server e Importa da server sono disabilitate.

Sincronizzazione completa dei pacchetti di contenuti full-content-package-synchronization

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

chlimage_1-57

Stato di sincronizzazione synchronization-status

L’estensione AEM Brackets include 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 file non sono stati sincronizzati
  • rosso: nessuno dei file è stato sincronizzato

Facendo clic sull'icona di notifica viene visualizzata la finestra di dialogo Rapporto stato di sincronizzazione, in cui è riportato l'elenco di tutti gli stati di ciascun file sincronizzato.

chlimage_1-58

NOTE
Solo il contenuto contrassegnato come incluso dalle regole di filtro di filter.xml verrà sincronizzato, indipendentemente dal metodo di sincronizzazione utilizzato.
Sono inoltre supportati .vltignore file per escludere il contenuto dalla sincronizzazione con e dal repository.

Modifica del codice HTL editing-htl-code

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

Completamento automatico attributo attribute-auto-completion

  1. In un attributo HTML, digitare sly. Attributo completato automaticamente in data-sly-.
  2. Seleziona l’attributo HTL nell’elenco a discesa.

Completamento automatico espressione expression-auto-completion

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

Ulteriori informazioni more-information

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

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

Sentiti libero di contribuire!

recommendation-more-help
51c6a92d-a39d-46d7-8e3e-2db9a31c06a2