Die AEM Brackets-Erweiterung bietet einen reibungslosen Workflow für die Bearbeitung von AEM-Komponenten und Client-Bibliotheken und nutzt die Leistungsfähigkeit des Brackets-Code-Editors, der den Zugriff auf Photoshop-Dateien und -Ebenen über den Code-Editor ermöglicht. Die durch die Erweiterung gebotene einfache Synchronisation (kein Maven oder File Vault erforderlich) erhöht die Effizienz der Entwickler und hilft auch Frontend-Entwicklern mit begrenztem AEM-Wissen, an Projekten teilzunehmen. Diese Erweiterung bietet auch einige Unterstützung für die HTML-Vorlagensprache (HTL)](https://docs.adobe.com/content/help/de/experience-manager-htl/using/overview.html), wodurch die Komplexität von JSP entfällt, um die Komponentenentwicklung einfacher und sicherer zu gestalten.[
Die Hauptmerkmale der AEM Brackets-Erweiterung sind:
data-sly-*
Blockanweisungen.Zusätzlich bietet Brackets viele nützliche Funktionen für AEM-Frontend-Entwickler:
Die AEM Brackets-Erweiterung unterstützt Brackets Version 1.0 oder höher.
Laden Sie die neueste Brackets-Version von brackets.io herunter.
Um die Erweiterung zu installieren, gehen Sie wie folgt vor:
Öffnen Sie Brackets. Wählen Sie im Menü Datei den Extension Manager…
Geben Sie AEM in die Suchleiste ein und suchen Sie nach AEM Brackets-Erweiterung.
Klicken Sie auf Installieren.
Schließen Sie das Dialogfeld und den Extension Manager nach Abschluss der Installation.
Nachdem die Erweiterung installiert wurde, können Sie mit der Entwicklung von AEM-Komponenten beginnen, indem Sie mit Brackets einen content-package-Ordner aus Ihrem Dateisystem öffnen.
Das Projekt muss mindestens enthalten:
a jcr_root
Ordner (z.B. myproject/jcr_root
)
eine filter.xml
-Datei (z. B. myproject/META-INF/vault/filter.xml
); Weitere Informationen zur Struktur der filter.xml
-Datei finden Sie in der Definition des Arbeitsbereichsfilters.
Im Menü Datei von Brackets wählen Sie Ordner öffnen… und wählen Sie entweder den Ordner jcr_root
oder den übergeordneten Projektordner.
Wenn Sie kein eigenes Projekt mit einem Inhaltspaket haben, können Sie das HTL TodoMVC Beispiel ausprobieren. Klicken Sie auf GitHub auf ZIP herunterladen, extrahieren Sie die Dateien lokal und öffnen Sie, wie oben beschrieben, den Ordner jcr_root
in Brackets. Gehen Sie dann wie folgt vor, um Projekteinstellungen einzurichten, und laden Sie dann das gesamte Paket in Ihre AEM Entwicklungsinstanz hoch, indem Sie ein Inhaltspaket exportieren ausführen, wie im Abschnitt "Synchronisierung des vollständigen Inhalts-Pakets"weiter unten beschrieben.
Nach diesen Schritten sollten Sie auf die /content/todo.html
-URL in Ihrer AEM-Entwicklungsinstanz zugreifen können. Sie können Beginn mit Codeänderungen in Klammern ausführen und sehen, wie die Änderungen nach einer Aktualisierung im Webbrowser sofort mit dem AEM synchronisiert wurden.
Um Ihren Inhalt mit einer AEM-Entwicklungsinstanz zu synchronisieren, müssen Sie Ihre Projekteinstellungen definieren. Dies können Sie tun, indem Sie im Menü AEM Projekteinstellungen… wählen.
Die Projekteinstellungen erlauben die Definition von Folgendem:
http://localhost:4502
)admin
)admin
)Die AEM Brackets Extension bietet folgende Arten der Inhaltssynchronisierung für Dateien und Ordner, die durch die in filter.xml
definierten Filterregeln zulässig sind:
Diese synchronisiert nur Änderungen von Brackets mit der AEM-Instanz, aber niemals umgekehrt.
Öffnen Sie im Project Explorer das Kontextmenü, indem Sie mit der rechten Maustaste auf eine beliebige Datei oder einen beliebigen Ordner klicken. Auf die Optionen In Server exportieren oder Aus Server importieren können Sie zugreifen.
Wenn sich der ausgewählte Eintrag außerhalb des Ordners jcr_root
befindet, sind die Kontextmenüeinträge Nach Server exportieren und Aus Server importieren deaktiviert.
Im Menü AEM können die Optionen Inhaltspaket exportieren oder Inhaltspaket importieren das gesamte Projekt mit dem Server synchronisieren.
Die AEM Brackets-Erweiterung verfügt über ein Benachrichtigungssymbol in der Symbolleiste rechts im Fenster „Brackets“, das den Status der letzten Synchronisierung angibt:
Wenn Sie auf das Benachrichtigungssymbol klicken, wird das Dialogfeld „Synchronisierungsstatusbericht“ geöffnet, das den Status aller synchronisierten Dateien anzeigt.
Nur Inhalt, der in den Filterregeln von filter.xml
als enthalten gekennzeichnet ist, wird unabhängig von der verwendeten Synchronisierungsmethode synchronisiert.
Darüber hinaus werden .vltignore
-Dateien unterstützt, um Inhalte von der Synchronisierung zum und vom Repository auszuschließen.
Die AEM Brackets-Erweiterung bietet auch eine automatische Vervollständigung, um das Schreiben von HTL-Attributen und -Ausdrücken zu vereinfachen.
sly
ein. Das Attribut wird automatisch zu data-sly-
- vervollständigt.Innerhalb eines Ausdrucks ${}
werden allgemeine Variablennamen automatisch ausgefüllt.
Die AEM Brackets-Erweiterung ist ein Open-Source-Projekt, das von Adobe Marketing Cloud unter der Apache-Lizenz Version 2.0 auf GitHub gehostet wird:
Der Brackets-Code-Editor ist auch ein Open-Source-Projekt, das auf GitHub von der Adobe Systems Incorporated Organisation gehostet wird:
Sie können gern dazu beitragen!