DocumentazioneAEM 6.4Guida allo sviluppo

Estensione Bracket AEM aem-brackets-extension

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Developer
CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Panoramica overview

L’estensione Brackets AEM fornisce un flusso di lavoro fluido per la modifica AEM componenti e librerie client e sfrutta la potenza del Parentesi editor di codice, che consente l'accesso 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 supporto per Linguaggio dei modelli di HTML (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 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 data-sly-* istruzioni block.

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

  • Supporto di file Photoshop per estrarre informazioni da un file PSD, come livelli, misure, colori, caratteri, testi, ecc.
  • Suggerimenti sul codice da 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 installation

Parentesi brackets

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

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

Estensione the-extension

Per installare l'estensione procedi come segue:

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

  2. Invio AEM nella barra di ricerca e cerca Estensione Bracket AEM.

    chlimage_1-54

  3. Fai clic su Installa.

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

Guida introduttiva getting-started

Progetto Content-Package the-content-package-project

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. a jcr_root (ad esempio myproject/jcr_root)

  2. a filter.xml file (ad esempio myproject/META-INF/vault/filter.xml); per maggiori dettagli sulla struttura del filter.xml consultare il Definizione del filtro Workspace.

In parentesi" File menu, scegli Apri cartella… e scegli la jcr_root o la cartella del progetto principale.

NOTE
Se non hai un progetto personalizzato con un pacchetto di contenuti, puoi provare la Esempio di HTL TodoMVC. Su GitHub, fai clic su Scarica ZIP, estrai i file localmente e, come indicato in precedenza, apri la jcr_root in Brackets. Quindi segui i passaggi seguenti per impostare il Impostazioni progetto e infine carica l'intero pacchetto nella tua istanza di sviluppo AEM facendo un Esporta pacchetto di contenuti come indicato più avanti nella sezione Sincronizzazione completa del pacchetto di contenuti .
Dopo questi passaggi, dovresti essere in grado di accedere al /content/todo.html URL sull'istanza di sviluppo AEM e puoi iniziare a apportare modifiche al codice in Brackets e vedere come, dopo aver effettuato un aggiornamento nel browser web, le modifiche sono state immediatamente sincronizzate con il server AEM.

Impostazioni progetto project-settings

Per sincronizzare il contenuto con e da un’istanza di sviluppo AEM, devi definire le impostazioni del progetto. Questo può essere fatto andando al AEM menu e scelta Impostazioni progetto…

chlimage_1-55

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 dei contenuti synchronizing-content

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 automated-synchronization-of-changed-files

Questo sincronizzerà solo le modifiche da Brackets all'istanza AEM, ma mai viceversa.

Sincronizzazione bidirezionale manuale manual-bidirectional-synchronization

In Esplora progetti, apri il menu contestuale facendo clic con il pulsante destro del mouse su un file o una cartella e il Esporta nel server o Importa dal server è possibile accedere alle opzioni .

chlimage_1-56

NOTE
Se la voce selezionata è esterna al jcr_root la cartella Esporta nel server e Importa dal server le voci di menu contestuali sono disabilitate.

Sincronizzazione completa del pacchetto di contenuti full-content-package-synchronization

In AEM il menu Esporta pacchetto di contenuti o Importa pacchetto di contenuti Le opzioni consentono di sincronizzare l’intero progetto con il server.

chlimage_1-57

Stato sincronizzazione synchronization-status

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.

chlimage_1-58

NOTE
Solo il contenuto contrassegnato come incluso dalle regole di filtro da filter.xml verranno sincronizzati, 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 editing-htl-code

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

Completamento automatico attributo attribute-auto-completion

  1. In un attributo di HTML, digita sly. L’attributo viene 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 Brackets AEM è un progetto open source ospitato su GitHub da Adobe Marketing Cloud organizzazione, in base alla Licenza Apache, versione 2.0:

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

Sentiti libero di contribuire!

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e