- Entwicklerhandbuch - Übersicht
- Einführung für Entwickler
- Erste Schritte bei der Entwicklung von AEM Sites – WKND-Tutorial
- Grundlegende AEM-Konzepte
- Struktur der Touch-optimierten Benutzeroberfläche von AEM
- Konzepte der Touch-optimierten Benutzeroberfläche von AEM
- AEM-Entwicklung – Richtlinien und Best Practices
- Verwendung Client-seitiger Bibliotheken
- Entwicklung und Seitenvergleich
- Editor-Einschränkungen
- Das CSRF Protection Framework
- Datenmodellierung – Modell von David Nuescheler
- Beitragen zu AEM
- Sicherheit
- Referenzmaterialien
- Erstellen einer vollständig vorgestellten Website (klassische Benutzeroberfläche)
- Designs und der Designer (klassische Benutzeroberfläche)
- Plattform
- Sling-Schnellübersicht
- Verwenden von Sling-Adaptern
- Tag-Bibliotheken
- Vorlagen
- Verwenden des Sling Resource Merger in AEM
- Überlagerungen
- Benennungskonventionen
- Erstellen einer neuen Feld-Komponente in der Granite-Benutzeroberfläche
- Query Builder
- Tagging
- Anpassen der vom Fehler-Handler angezeigten Seiten
- Benutzerdefinierte Knotentypen
- Hinzufügen von Schriftarten für das Grafik-Rendering
- Verbindung mit SQL-Datenbanken
- Externalisieren von URLs
- Erstellen und Verarbeiten von Aufträgen für die Abladung
- Konfigurieren der Verwendung von Cookies
- Anleitung für den programmgesteuerten Zugriff auf das AEM-JCR
- Integrieren von Diensten mit der JMX-Konsole
- Entwickeln des Bulk Editors
- Entwickeln von Berichten
- E-Commerce
- Komponenten
- Kernkomponenten
- Stilsystem
- Komponentenübersicht
- AEM-Komponenten – Grundlagen
- Entwickeln von AEM-Komponenten
- Entwickeln von AEM-Komponenten – Codebeispiele
- JSON-Exporter für Content Services
- Aktivieren eines JSON-Exports für eine Komponente
- Bildeditor
- Decoration-Tag
- Verwenden von Bedingungen zum Ausblenden
- Konfigurieren mehrerer Editoren für Bearbeitung im Kontext
- Entwicklermodus
- Testen der Benutzeroberfläche
- Komponenten für Inhaltsfragmente
- Ermitteln von Seiteninformationen im JSON-Format
- Internationalisierung
- Komponenten der klassischen Benutzeroberfläche
- Headless-Experience-Management
- Headless und Hybrid mit AEM
- Aktivieren eines JSON-Exports für eine Komponente
- Single Page Applications
- Einführung in SPAs und exemplarische Anleitung
- SPA-WKND-Tutorial
- Erste Schritte mit SPA in AEM - React
- Erste Schritte mit SPA in AEM - Angular
- Implementieren einer Reaktionskomponente für SPA
- Einzelheiten zu SPAs
- SPA-Editor – Überblick
- Entwickeln von SPAs für AEM
- SPA-Blueprint
- SPA-Seitenkomponente
- Zuordnung dynamischer Modelle zu Komponenten für SPAs
- SPA-Modell-Routing
- SPA- und Adobe Experience Platform Launch-Integration
- Single Page Applications (SPAs) und Server-seitiges Rendering
- SPA-Referenzmaterial
- HTTP-API
- Inhaltsfragmente
- Experience Fragments
- Grundlagen zu Inhaltsfragmenten und Content Services in AEM
- Entwicklungstools
- Entwicklungstools
- AEM-Modernisierungs-Tools
- Dialogfeldeditor
- Dialogfeldkonvertierungs-Tool
- Entwickeln mit CRXDE Lite
- Verwalten von Paketen mithilfe von Maven
- Entwickeln von AEM-Projekten mit Eclipse
- Erstellen von AEM-Projekten mit Apache Maven
- Entwicklung von AEM-Projekten mit IntelliJ IDEA
- Vewenden des VLT-Tools
- Verwendung des Proxyservertools
- AEM Brackets-Erweiterung
- AEM Developer Tools for Eclipse
- AEM Repo Tool
- Personalisierung
- Erweitern von AEM
- Anpassung des Seiten-Authorings
- Anpassen der Konsolen
- Anpassen von Ansichten von Seiteneigenschaften
- Konfigurieren Sie Ihre Seite für die Massenbearbeitung von Seiteneigenschaften
- Anpassen und Erweitern von Inhaltsfragmenten
- Erweitern von Workflows
- Erweitern des Multi-Site-Managers
- Tracking und Analytics
- Cloud Services
- Erstellen benutzerspezifischer Erweiterungen
- Forms
- Integrieren von Diensten mit der JMX-Konsole
- Entwickeln des Bulk Editors
- Erweitern der klassischen Benutzeroberfläche
- Testen
- Planung
- Welche Testumgebungen sind erforderlich?
- Definieren von Testfällen
- Testen – wann und mit wem?
- Zusammenstellen des Testplans
- Tracking von Ergebnissen und Bereitstellung von Feedback
- Test- und Tracking-Tools
- Akzeptanz und Abnahme
- Die nächste Version …
- Checklisten
- Tough Day
- Testen der Benutzeroberfläche
- Best Practices
- Best Practices - Überblick
- AEM Entwicklungsrichtlinien und Best Practices
- Best Practices für die Entwicklung
- Inhaltsarchitektur
- Software-Architektur
- We.Retail-Referenzimplementierung
- We.Retail-Referenzimplementierung
- Testen von Inhaltsfragmenten in We.Retail
- Testen von Kernkomponenten in We.Retail
- Testen bearbeitbarer Vorlagen in We.Retail
- Ausprobieren von responsivem Layout in We.Retail
- Testen der globalisierten Site-Struktur von We.Retail
- Testen von Experience Fragments in We.Retail
- Tipps zum Programmieren
- Fallstricke beim Programmieren
- OSGi-Bundles
- JCR-Integration
- Codebeispiele
- Fehlerbehebung bei langsamen Abfragen
- Mobiles Web
Designs und der Designer
In diesem Artikel wird beschrieben, wie Sie eine Website basierend auf der klassischen Benutzeroberfläche erstellen. Adobe empfiehlt, die neuesten AEM-Technologien für Ihre Websites zu nutzen, wie ausführlich im Artikel Erste Schritte bei der Entwicklung von AEM Sites beschrieben.
Der Designer wird verwendet, um ein Design für Ihre Website mithilfe der Klassischen Benutzeroberfläche in AEM zu erstellen.
Weitere Informationen zum Webzugriff finden Sie unter AEM und Richtlinien für barrierefreien Webzugang.
Verwenden des Designers
Ihr Design kann im Abschnitt designs der Registerkarte Tools definiert werden:
Hier erstellen Sie die Struktur, die zum Speichern des Designs erforderlich ist, und laden dann die erforderlichen Cascaded Style Sheet und Bilder hoch.
Designs werden unter /apps/<your-project> gespeichert. Der Pfad zu einem Design, das für eine Website verwendet wird, wird anhand der Eigenschaft cq:designPath des Knotens jcr:content angegeben.
Alle Änderungen, die im Designmodus an einer Seite vorgenommen werden, werden unterhalb des Designknotens der Website beibehalten und automatisch auf alle Seiten mit demselben Design angewendet.
Voraussetzungen
Zur Realisierung des Design benötigen Sie:
CSS - Die Cascading Style Sheets definieren die Formate bestimmter Bereiche auf Ihren Seiten.
Bilder - Alle Bilder, die Sie für Funktionen wie Hintergründe und Schaltflächen verwenden.
Überlegungen zum Entwurf Ihrer Website
Bei der Entwicklung einer Website wird dringend empfohlen, Bilder und CSS-Dateien unter /apps/<your-project> zu speichern, damit Sie Ihre Ressourcen basierend auf dem aktuellen Design referenzieren können, wie im folgenden Snippet beschrieben.
<%= currentDesign.getPath() + "/static/img/icon.gif %>
Das obige Beispiel bietet mehrere Vorteile:
-
Je nach Designpfad verschiedener Websites erwecken Komponenten einen anderen Eindruck.
-
Die Neugestaltung der Website kann einfach durch Verweis des Designpfads auf einen anderen Knoten im Stammverzeichnis der Website von
design/v1zudesign/v2.vorgenommen werden. -
/etc/designsund/contentsind die einzigen externen URLs, die der Browser sieht, um Sie vor einem externen Benutzer zu schützen, der neugierig darüber wird, was sich unter Ihrem/appsBaum befindet. Die obigen URL-Vorteile helfen auch Ihrem Systemadministrator, bessere Sicherheitsmaßnahmen einzurichten, weil die Angriffsfläche der Assets auf wenige spezifische Orte beschränkt wird.
Materialien auf adobe.com
Ressourcen
Adobe-Konto
