Uitbreiding AEMhaken

Overzicht

De extensie AEM Brackets biedt een vloeiende workflow voor het bewerken van AEM componenten en clientbibliotheken en maakt gebruik van de kracht van de code-editor Brackets, die toegang biedt vanuit de code-editor naar Photoshop-bestanden en -lagen. De eenvoudige synchronisatie die wordt geboden door de extensie (geen Maven of File Vault vereist) verhoogt de efficiëntie van de ontwikkelaar en helpt ontwikkelaars met beperkte AEM kennis ook om aan projecten deel te nemen. Deze extensie biedt ook enige ondersteuning voor de HTML-sjabloontaal (HTL), die de complexiteit van JSP wegneemt om de ontwikkeling van componenten eenvoudiger en veiliger te maken.

Functies

De hoofdkenmerken van de extensie AEM Brackets zijn:

• Geautomatiseerde synchronisatie van gewijzigde bestanden naar de AEM-ontwikkelingsinstantie.
• Handmatige tweerichtingssynchronisatie van bestanden en mappen.
• Volledige tevreden-pakket synchronisatie van het project.
• HTML-codevoltooiing voor expressies en data-sly-*-blokinstructies.

Bovendien zijn er veel handige functies voor AEM ontwikkelaars van lettertypen:

• Photoshop-bestandsondersteuning voor het ophalen van gegevens uit een PSD-bestand, zoals lagen, metingen, kleuren, lettertypen, tekst, enzovoort.
• Coderingstips uit de PSD om deze geëxtraheerde informatie gemakkelijk opnieuw te gebruiken in de code.
• Ondersteuning voor CSS-preprocessor, zoals LESS en SCSS.
• En honderden extra extensies die meer specifieke behoeften dekken.

Installatie

Haakjes

De extensie AEM Brackets ondersteunt versie 1.0 of hoger.

Download de nieuwste versie Brackets van brackets.io.

De extensie

Ga als volgt te werk om de extensie te installeren:

1. Open haakjes. Selecteer Extension Manager… in het menu Bestand.

2. Typ AEM in de zoekbalk en zoek Extensie AEM accolades.

   

3. Klik Installeren.

4. Sluit het dialoogvenster en de Extension Manager nadat de installatie is voltooid.

Aan de slag

Het content-package project

Nadat de extensie is geïnstalleerd, kunt u beginnen met het ontwikkelen van AEM componenten door een inhoudspakketmap te openen vanuit uw bestandssysteem met haakjes.

Het project moet ten minste het volgende bevatten:

1. a jcr_root map (bijvoorbeeld myproject/jcr_root)

2. a filter.xml bestand (bijvoorbeeld myproject/META-INF/vault/filter.xml); Zie Definitie van werkruimtefilter voor meer informatie over de structuur van het filter.xml-bestand.

Kies Map openen… in het menu Bestand en kies de map jcr_root of de bovenliggende projectmap.

Projectinstellingen

Als u de inhoud wilt synchroniseren van en naar een AEM-ontwikkelingsinstantie, moet u de projectinstellingen definiëren. Dit kan door naar AEM menu te gaan en de Montages van het Project te kiezen…

Met de projectinstellingen kunt u het volgende definiëren:

1. De server-URL (bijvoorbeeld http://localhost:4502)
2. Of servers worden getolereerd die geen geldig HTTPS-certificaat hebben (niet ingeschakeld houden, tenzij vereist)
3. De gebruikersnaam die wordt gebruikt voor het synchroniseren van inhoud (bijvoorbeeld admin)
4. Het wachtwoord van de gebruiker (bijvoorbeeld admin)

Inhoud synchroniseren

De extensie AEM Brackets biedt de volgende typen inhoudssynchronisatie voor bestanden en mappen die zijn toegestaan door de filterregels die zijn gedefinieerd in filter.xml:

Geautomatiseerde synchronisatie van gewijzigde bestanden

Hiermee worden wijzigingen alleen gesynchroniseerd van haakjes naar de AEM-instantie, maar nooit andersom.

Handmatige tweerichtingssynchronisatie

In de Ontdekkingsreiziger van het Project, open het contextafhankelijke menu door op om het even welk dossier of omslag met de rechtermuisknop te klikken, en de Uitvoer aan Server of de optie van de Invoer van Server kan worden betreden.

Volledige synchronisatie van inhoudspakketten

In het AEM menu, staan de Opties van het Pakket van de Inhoud van de Uitvoer of Inhoudspakket van de Invoer toe om het volledige project met de server te synchroniseren.

Synchronisatiestatus

De extensie AEM Brackets heeft een waarschuwingspictogram op de werkbalk rechts van het venster Brackets, waarmee de status van de laatste synchronisatie wordt aangegeven:

• groen - alle bestanden zijn gesynchroniseerd
• blauw - een synchronisatiebewerking wordt uitgevoerd
• geel - sommige bestanden zijn niet gesynchroniseerd
• rood - geen van de bestanden is gesynchroniseerd

Als u op het meldingspictogram klikt, wordt het dialoogvenster Synchronisatie-statusrapport geopend met een lijst van alle status voor elk gesynchroniseerd bestand.

HTML-code bewerken

De extensie AEM Brackets beschikt ook over enkele automatische aantekeningen waarmee het schrijven van HTML-kenmerken en -expressies wordt vergemakkelijkt.

Kenmerk automatisch aanvullen

1. Typ sly in een HTML-kenmerk. Het kenmerk wordt automatisch ingevuld bij data-sly-.
2. Selecteer het HTML-kenmerk in de vervolgkeuzelijst.

Uitdrukking automatisch aanvullen

Binnen een uitdrukking ${}, zijn de gemeenschappelijke veranderlijke namen auto-voltooid.

Meer informatie

De extensie AEM Brackets is een opensource-project dat op GitHub wordt gehost door de organisatie Adobe Marketing Cloud onder de Apache-licentie, versie 2.0:

• Codeopslagplaats: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Apache-licentie, versie 2.0: https://www.apache.org/licenses/LICENSE-2.0.html

De de coderedacteur van Brackets is ook een open-bronproject, dat op GitHub door de organisatie Adobe Systems Incorporated wordt ontvangen:

• Codeopslagplaats: https://github.com/adobe/brackets

Voel je vrij om bij te dragen!