AEM Brackets Extension aem-brackets-extension

Ökning overview

AEM Brackets Extension ger ett smidigt arbetsflöde för att redigera AEM komponenter och klientbibliotek och utnyttjar kraften i kodredigeraren Brackets som ger åtkomst till Photoshop-filer och -lager inifrån kodredigeraren. Den enkla synkronisering som tillägget ger (ingen Maven eller filvalv krävs) ökar utvecklarens effektivitet och hjälper även gränssnittsutvecklare med begränsade AEM att delta i projekt. Det här tillägget har också stöd för HTML Template Language (HTL), vilket gör JSP-komponenten enklare och säkrare.

chlimage_1-53

Funktioner features

De viktigaste funktionerna i AEM Brackets Extension är:

  • Automatisk synkronisering av ändrade filer till AEM.
  • Manuell dubbelriktad synkronisering av filer och mappar.
  • Fullständig innehållspaketsynkronisering av projektet.
  • HTML-kodkomplettering för uttryck och data-sly-* blocksatser.

Brackets innehåller dessutom många användbara funktioner för AEM teckensnittsutvecklare:

  • Photoshop filstöd för att extrahera information från en PSD-fil, som lager, mått, färger, teckensnitt, texter och så vidare.
  • Kodtips från PSD för att enkelt återanvända den extraherade informationen i koden.
  • Stöd för CSS-preprocessorer, som LESS och SCSS.
  • Och hundratals tillägg som täcker mer specifika behov.

Installation installation

Parenteser brackets

AEM Brackets Extension har stöd för Brackets version 1.0 eller senare.

Hämta den senaste Brackets-versionen från brackets.io.

Tillägget the-extension

Så här installerar du tillägget:

  1. Öppna Brackets. I menyn Arkiv väljer du Extension Manager…

  2. Ange AEM i sökfältet och sök efter AEM Brackets Extension.

    chlimage_1-54

  3. Klicka på Installera.

  4. Stäng dialogrutan och Extension Manager när installationen är klar.

Komma igång getting-started

Innehållspaketprojektet the-content-package-project

När tillägget har installerats kan du börja utveckla AEM komponenter genom att öppna en innehållspaketmapp från filsystemet med hakparenteser.

Projektet måste innehålla minst

  1. en jcr_root-mapp (till exempel myproject/jcr_root)

  2. en filter.xml-fil (till exempel myproject/META-INF/vault/filter.xml). Mer information om strukturen för filen filter.xml finns i Workspace-filterdefinitionen.

Välj Öppna mapp… på menyn Arkiv i hakparenteser och välj antingen mappen jcr_root eller den överordnade projektmappen.

NOTE
Om du inte har ett eget projekt med ett innehållspaket kan du prova HTL TodoMVC-exemplet. På GitHub klickar du på Hämta ZIP, extraherar filerna lokalt och öppnar mappen jcr_root i Brackets enligt instruktionerna ovan. Följ sedan stegen nedan för att konfigurera projektinställningarna och överför slutligen hela paketet till AEM utvecklingsinstans genom att göra ett Exportera innehållspaket enligt anvisningarna längre ned i avsnittet Fullständig synkronisering av innehållspaket.
Efter de här stegen bör du kunna komma åt URL:en /content/todo.html för din AEM-utvecklingsinstans och du kan börja göra ändringar i koden i hakparenteser och se hur ändringarna synkroniserades direkt till AEM-servern när du har gjort en uppdatering i webbläsaren.

Projektinställningar project-settings

Om du vill synkronisera ditt innehåll till och från en AEM utvecklingsinstans måste du definiera dina projektinställningar. Detta kan du göra genom att gå till menyn AEM och välja Projektinställningar…

chlimage_1-55

Med projektinställningarna kan du definiera följande:

  1. Server-URL (till exempel http://localhost:4502)
  2. Om servrar som inte har ett giltigt HTTPS-certifikat ska tolereras (håll inte markerat om det inte krävs)
  3. Användarnamnet som används för att synkronisera innehåll (till exempel admin)
  4. Användarens lösenord (till exempel admin)

Synkroniserar innehåll synchronizing-content

Tillägget AEM Brackets ger följande typer av innehållssynkronisering för filer och mappar som tillåts av filtreringsreglerna som definieras i filter.xml:

Automatisk synkronisering av ändrade filer automated-synchronization-of-changed-files

Detta synkroniserar endast ändringar från hakparenteser till AEM, men inte tvärtom.

Manuell dubbelriktad synkronisering manual-bidirectional-synchronization

I projektutforskaren öppnar du snabbmenyn genom att högerklicka på en fil eller mapp och alternativen Exportera till server eller Importera från server är tillgängliga.

chlimage_1-56

NOTE
Om den markerade posten ligger utanför mappen jcr_root inaktiveras sammanhangsbaserade menyposter för Exportera till server och Importera från server.

Fullständig synkronisering av innehållspaket full-content-package-synchronization

På menyn AEM kan du synkronisera hela projektet med servern med alternativen Exportera innehållspaket eller Importera innehållspaket.

chlimage_1-57

Synkroniseringsstatus synchronization-status

I AEM Brackets Extension finns en meddelandeikon i verktygsfältet till höger om Brackets-fönstret, som anger status för den senaste synkroniseringen:

  • grön - alla filer har synkroniserats
  • blue - en synkroniseringsåtgärd pågår
  • gult - vissa av filerna synkroniserades inte
  • röd - ingen av filerna synkroniserades

Om du klickar på meddelandeikonen öppnas dialogrutan Synkroniseringsstatus med en lista över all status för varje synkroniserad fil.

chlimage_1-58

NOTE
Endast innehåll som markerats som inkluderat av filtreringsreglerna från filter.xml synkroniseras, oavsett vilken synkroniseringsmetod som används.
Dessutom stöds .vltignore-filer för att utesluta innehåll från synkronisering till och från databasen.

Redigera HTML-kod editing-htl-code

AEM Brackets Extension innehåller även vissa funktioner för automatisk komplettering som underlättar skrivandet av HTML-attribut och -uttryck.

Automatisk komplettering av attribut attribute-auto-completion

  1. I ett HTML-attribut skriver du sly. Attributet har fyllts i automatiskt till data-sly-.
  2. Markera HTL-attributet i listrutan.

Automatisk komplettering av uttryck expression-auto-completion

Inom ett uttryck ${} slutförs gemensamma variabelnamn automatiskt.

Mer information more-information

AEM Brackets Extension är ett öppen källkodsprojekt som hanteras av GitHub av Adobe Marketing Cloud -organisationen, under Apache-licensen, version 2.0:

Kodredigeraren Brackets är också ett öppen källkodsprojekt som hanteras av GitHub av Adobe Systems Incorporated -organisationen:

Du kan bidra!

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2