Show Menu
THEMEN×

Erstellen und Hinzufügen von Vorlagen und Komponenten

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes clientseitiges Rendering für einzelne Seiten (z. B. React) erforderlich ist. Weitere Informationen
AEM Mobile On-Demand bietet eine vollständig konfigurierte App-Vorlage, eine Artikelvorlage und Artikelkomponenten.
Die Web.Unlimited-App ist eine Beispielvorlage, die die Shell einer vollständig konfigurierbaren und verwaltbaren AEM Mobile On-Demand-Anwendung darstellt.
Durch Auswahl dieser Beispielvorlage beim Erstellen einer neuen App wird ein Rich-Dashboard für die AEM Mobile-Funktion bereitgestellt.
Informationen zum Verwalten der Inhalte Ihrer Anwendung und mobilen App über das AEM Mobile Apps Control Center finden Sie im AEM Mobile Application Dashboard .

Erstellen von App-Vorlagen

Eine App-Vorlage wird zum Erstellen einer neuen App verwendet und dient als Sammlung von Seitenvorlagen und Komponenten, die eine Grundlage oder Grundlage einer App darstellen. Die Vorlage stempelt einige grundlegende Eigenschaften heraus, um die App auf die richtige Weise zu leiten. Im Allgemeinen erstellt ein Kunde nicht zu viele Apps.
App-Vorlagen bieten eine einfache Möglichkeit, vorhandene Designs zu nutzen, die von Entwicklern erstellt wurden und für die Erstellung neuer Apps in AEM verwendet werden.
Wenn Sie eine neue App erstellen, die auf der Vorlage einer anderen App basiert, erhalten Sie eine App mit einem Startpunkt, der der App entspricht, aus der sie erstellt wurde.
Schritte zum Erstellen einer neuen App basierend auf einer App-Vorlage:
  1. Navigieren Sie zum AEM Mobile-App-Katalog: <server-url>/aem/apps.html/content/mobileapps
  2. Wählen Sie Erstellen —> App wie unten dargestellt
Nachdem Sie eine App mit dieser Vorlage erstellt haben, können Sie Ihrer App Artikel, Banner und Sammlungen hinzufügen. Informationen zum erneuten Besuch der Erstellung von Artikeln, Bannern und Sammlungen finden Sie unter Inhaltsverwaltungsaktionen .
Alternativ können Sie auch eine App-Mustervorlage auswählen, z. B. We.Unlimited -App, die Ihnen von einem AEM-Entwickler zur Verfügung gestellt wird. Wenn Sie diese Mustervorlage für Ihre App verwenden, erhalten Sie einige Beispielartikel und Sammlungen, an denen Sie arbeiten können. Sie haben die Möglichkeit, die Mustervorlagen und Komponenten zu verwenden, die vorhandenen anzupassen oder neue zu erstellen.
Festlegen der Eigenschaft "redirectTarget "
Bei Verwendung einer der App-Vorlagen definiert der Entwickler den Inhalt der Anwendung. Der Entwickler muss jedoch wissen, wo die Anwendung in der jcr-Eigenschaft erstellt wird, und den Wert der redirectTarget -Eigenschaft.
Das redirectTarget wird im Rahmen des Erstellungsvorgangs der App berechnet und versucht, einen Pfad aufzulösen, wenn eine redirectTarget-Eigenschaft als Teil der App-Vorlage verfügbar ist und der Wert von redirectTarget als relativ definiert wird. Wenn der Vorgang zum Erstellen einer App einen relativen Wert für "redirectTarget"in der App-Vorlage findet, wird der Wert an den aufgelösten Speicherort angehängt, an dem die App erstellt wurde.
Wenn beispielsweise eine App-Vorlage ein redirectTarget mit dem Wert " language-masters/en "definiert und die App in " /content/mobileapps/fooApp "erstellt wurde, lautet der endgültige Wert für redirectTarget nach der Erstellung der App " /content/mobileapps/fooApp/language-masters/en "..

Erstellen von Inhaltsvorlagen

Jeder Entitätstyp verfügt über zwei vordefinierte Vorlagen. Diese sind:
  • Standardvorlagen: zur Inhaltserstellung mit entsprechenden Standardeigenschaften/-struktur verwendet
  • Importierte Vorlagen: zum Importieren von Inhalten aus AEM Mobile mit entsprechenden Standardeigenschaften/-Struktur

Artikelvorlagen

Der Artikel "Unbegrenzt"ist eine Beispielvorlage, die ein typisches AEM Mobile On-Demand-Artikellayout darstellt.
  1. Klicken Sie auf + in Artikel verwalten , um einen neuen Artikel zu erstellen. Sie können entweder einen unbegrenzten Artikel oder einen Rich-Text-Artikel auswählen. Die folgende Abbildung zeigt die Option, mit der Sie aus einer dieser beiden Artikelvorlagen wählen können.
  2. Klicken Sie auf Weiter , um Artikelmetadaten wie Artikelname/Titel, Beschreibung, Autor, Zusammenfassung, Abteilung, Miniaturbild, Artikelzugriff usw. zu definieren.
  3. Klicken Sie auf Weiter , um die Werbeeigenschaften auszufüllen.
  4. Klicken Sie auf Weiter , um das Artikelbild oder das Social Media-Bild einzugeben.
  5. Klicken Sie auf Weiter , um einen Link zur Sammlung zu diesem neuen Artikel auszuwählen.
  6. Klicken Sie auf Weiter , um Details zum Social Sharing einzugeben.
  7. Klicken Sie auf Erstellen , um den Vorgang zum Erstellen eines Artikels mithilfe des Beispiels abzuschließen. Sie klicken entweder auf Fertig oder auf Artikel bearbeiten, um die Eigenschaften dieses Artikels zu bearbeiten.

Hinzufügen von Komponenten zum Artikel

Nach der Erstellung kann ein Autor den Inhalt eines Artikels bearbeiten, indem er Komponenten wie Text und Bilder hinzufügt. Artikel sind eine Erweiterung der AEM-Seitenvorlagen.
Wählen Sie einen Artikel aus, den Sie bearbeiten möchten, und klicken Sie auf " Bearbeiten ", um dem Artikel Komponenten hinzuzufügen.
Wählen Sie im linken Bereich das + -Zeichen, um dem Artikel Komponenten hinzuzufügen.

Vordefinierte Vorlagen erstellen

Es gibt keine vordefinierten Artikelvorlagen. Es gibt jedoch eine Standardvorlage, die benutzerdefinierte Vorlagen erweitern sollten. Weitere Informationen finden Sie im Artikelvorlagenbeispiel der Geometrixx Unlimited App.
Zu den wichtigsten Eigenschaften, die über die normale AEM-Vorlage hinausgehen, gehören:
dps-resourceType="dps:Article"
Diese Eigenschaft stellt sicher, dass die AEM-Seite als AEM Mobile-Zielartikelseite erkannt wird.
Gemäß AEM-Vorlagen können Sie alle Standardeigenschaften oder untergeordneten Knoten zum jcr:content der Vorlage hinzufügen.

Erstellen und Hinzufügen von Komponenten

Komponenten verwenden Widgets und erlauben den Zugriff darauf. Diese werden zum Rendern des Inhalts verwendet.
Eine einfache Komponente ist im Code-Repository enthalten, dessen Quelle in AEM gefunden werden kann. Anschließend kann es auch lokal in CRXDE Lite geöffnet werden.
Für AEM Mobile werden derzeit keine vordefinierten Komponenten bereitgestellt.
Sie können Ihrer Seite Komponenten hinzufügen. Jede Komponente kann in einer AEM Mobile-App verwendet werden, wird jedoch ggf. nicht ordnungsgemäß gerendert.
Benutzerdefinierte Komponenten können jedoch nicht ordnungsgemäß exportieren und in AEM Mobile-On-Demand-Dienste hochladen, ohne dass ein benutzerdefinierter Exportinhaltssynchronisierungs-Handler zum Rendern in AEM verwendet wird.
Nachdem die Komponente zusammen mit einigen anderen Bausteinkomponenten bereits auf einer AEM-Seite enthalten war, können Sie der Seite eine weitere Komponente hinzufügen oder eine vorhandene bearbeiten.
So fügen Sie der Seite eine weitere Komponente hinzu:
  1. Wählen Sie diese Seite aus und stellen Sie sicher, dass Sie sich im Bearbeitungsmodus befinden, über das Dropdown oben rechts in der Kopfzeile des Editors
  2. Schalten Sie das Seitenbedienfeld mit dem Symbol ganz links in der Kopfzeile des Editors ein/aus
  3. Select the Components tab
  4. Ziehen Sie eine der verfügbaren Komponenten per Drag & Drop auf die Seite
So bearbeiten Sie eine vorhandene Komponente:
  1. Wählen Sie diese Seite aus und stellen Sie sicher, dass Sie sich im Bearbeitungsmodus befinden , und wählen Sie die Komponente aus
  2. Tippen Sie auf das Schraubenschlüsselsymbol, um die Komponente zu konfigurieren.
Sie können eine Komponente in AEM erstellen und dasselbe mit Entwickeln mit CRXDE Lite anpassen. Nachdem Sie die vorhandene Komponente Ihren Anforderungen entsprechend angepasst haben, können Sie sie Ihrer Seite mithilfe der Option " Bearbeiten "unter "Artikel verwalten"hinzufügen, wie in der Abbildung oben dargestellt.
Weitere Informationen finden Sie unter Best Practices für die Entwicklung von Vorlagen und Komponenten in AEM Mobile.