AEM Brackets-Erweiterung

Übersicht

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 Unterstützung für die HTML Template Language (HTL), wodurch die Komplexität von JSP entfällt, um die Komponentenentwicklung einfacher und sicherer zu machen.

Funktionen

Die Hauptmerkmale der AEM Brackets-Erweiterung sind:

• Automatisierte Synchronisierung geänderter Dateien mit der AEM Entwicklungsinstanz.
• Manuelle bidirektionale Synchronisation von Dateien und Ordnern.
• Vollständige Inhaltspaketsynchronisierung des Projekts.
• HTL-Code-Abschluss für Ausdrücke und data-sly-* -Blockanweisungen.

Zusätzlich bietet Brackets viele nützliche Funktionen für AEM-Frontend-Entwickler:

• Photoshop-Dateiunterstützung zum Extrahieren von Informationen aus einer PSD-Datei, wie Schichten, Maße, Farben, Schriftarten, Texte usw.
• Codehinweise aus der PSD, um diese extrahierten Informationen im Code einfach wiederzuverwenden.
• CSS-Präprozessor-Unterstützung, wie LESS und SCSS.
• Und Hunderte zusätzlicher Erweiterungen, die spezifischere Anforderungen abdecken.

Installation

Brackets

Die AEM Brackets-Erweiterung unterstützt Brackets Version 1.0 oder höher.

Laden Sie die neueste Brackets-Version von herunter. brackets.io.

Die Erweiterung

Um die Erweiterung zu installieren, gehen Sie wie folgt vor:

1. Öffnen Sie Brackets. Wählen Sie im Menü Datei den Extension Manager…

2. Geben Sie AEM in die Suchleiste ein und suchen Sie nach AEM Brackets-Erweiterung.

   

3. Klicken Sie auf Installieren.

4. Schließen Sie das Dialogfeld und den Extension Manager nach Abschluss der Installation.

Erste Schritte

Das Content-Package-Projekt

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:

1. a jcr_root Ordner (z. B. myproject/jcr_root)

2. a filter.xml Datei (z. B. myproject/META-INF/vault/filter.xml); Weitere Informationen zur Struktur der filter.xml Datei finden Sie unter Definition von Workspace-Filtern.

Im Menü Datei von Brackets wählen Sie Ordner öffnen… und wählen Sie entweder den Ordner jcr_root oder den übergeordneten Projektordner.

Projekteinstellungen

Um Ihren Inhalt mit einer AEM-Entwicklungsinstanz zu synchronisieren, müssen Sie Ihre Projekteinstellungen definieren. Gehen Sie dazu zum AEM Menü und Auswahl Projekteinstellungen…

Die Projekteinstellungen erlauben die Definition von Folgendem:

1. Die Server-URL (z. B. http://localhost:4502)
2. Ob Server ohne gültiges HTTPS-Zertifikat toleriert werden sollen (deaktivieren Sie diese Option, falls nicht erforderlich)
3. Benutzername, der für die Synchronisierung von Inhalten verwendet wird (z. B. admin)
4. Das Kennwort des Benutzers (z. B. admin)

Synchronisieren von Inhalten

Die AEM Brackets-Erweiterung bietet die folgenden Arten der Inhaltssynchronisierung für Dateien und Ordner, die durch die in filter.xml:

Automatisierte Synchronisierung von geänderten Dateien

Diese synchronisiert nur Änderungen von Brackets mit der AEM-Instanz, aber niemals umgekehrt.

Manuelle bidirektionale Synchronisierung

Öffnen Sie im Projekt-Explorer das Kontextmenü, indem Sie mit der rechten Maustaste auf eine beliebige Datei oder einen beliebigen Ordner klicken, und Export auf Server oder Import von Server -Optionen aufgerufen werden.

Vollständige Content-Package-Synchronisierung

Im AEM Menü, Inhaltspaket exportieren oder Inhaltspaket importieren -Optionen ermöglichen die Synchronisierung des gesamten Projekts mit dem Server.

Synchronisierungsstatus

Die AEM Brackets-Erweiterung verfügt über ein Benachrichtigungssymbol in der Symbolleiste rechts im Fenster „Brackets“, das den Status der letzten Synchronisierung angibt:

• grün - alle Dateien wurden erfolgreich synchronisiert
• blau - eine Synchronisierung wird ausgeführt
• gelb - einige der Dateien wurden nicht synchronisiert
• rot - keine Dateien wurden synchronisiert

Wenn Sie auf das Benachrichtigungssymbol klicken, wird das Dialogfeld „Synchronisierungsstatusbericht“ geöffnet, das den Status aller synchronisierten Dateien anzeigt.

Bearbeiten von HTL-Code

Die AEM Brackets-Erweiterung bietet auch eine automatische Vervollständigung, um das Schreiben von HTL-Attributen und -Ausdrücken zu vereinfachen.

Automatische Vervollständigung von Attributen

1. Geben Sie in einem HTML-Attribut sly ein. Das Attribut wird automatisch zu data-sly- - vervollständigt.
2. Wählen Sie das HTL-Attribut in der Dropdown-Liste aus.

Automatische Vervollständigung von Ausdrücken

Innerhalb eines Ausdrucks ${}, werden allgemeine Variablennamen automatisch vervollständigt.

Weitere Informationen

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:

• Code-Repository: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Apache-Lizenz, Version 2.0: https://www.apache.org/licenses/LICENSE-2.0.html

Der Brackets-Code-Editor ist auch ein Open-Source-Projekt, das auf GitHub vom Adobe Systems Incorporated -Organisation:

• Code-Repository: https://github.com/adobe/brackets

Sie können gern dazu beitragen!

Ressourcen für Business.Adobe.com

Multichannel Communication Cms Cloud Targeted Content Web Content Management Content Management Content Management System