AEM Formulararbeitsbereich bietet Funktionen zum Ändern der Darstellungssemantik und Funktionalität der Benutzeroberfläche. Die Anpassungen zum Ändern des Stils, des Layouts, der Formatierung, des Branding und der Kernfunktion werden unten beschrieben.
Beispiel für einen benutzerdefinierten Workspace
AEM Forms Workspace unterstützt viele Anpassungen, mit denen das Layout, die Darstellung, die Funktionalität und andere Aspekte der Benutzeroberfläche aktualisiert werden können. Bei den Anpassungen wird mindestens eins der folgenden Faktoren aktualisiert:
Sie können das Aussehen, Layout und andere Darstellungsfaktoren von AEM Forms Workspace ändern. Ändern Sie den Workspace durch Anpassen der CSS- und HTML-Vorlagen und JavaScript™-Dateien. Alle Standarddateien werden in der Standardinstallation bereitgestellt.
Die am häufigsten anwendbaren Schritte werden unter Generische Schritte zur Anpassung von AEM Forms Workspace beschrieben. Einzelne Beispiele für Anpassungen, einschließlich der ausführlichen Schritte, finden Sie in den jeweiligen Artikeln am Ende des Artikels.
Bevor Sie Workspace anpassen, machen Sie sich mit dem Standard-Stylesheet vertraut, das mit AEM Forms unter /libs/ws/css/style.css bereitgestellt wird.
Zur Anpassung des Workspace wird empfohlen, dass Sie sich mit dem vorhandenen Stylesheet „style.css“ im Ordner /libs/ws/css vertraut machen. Einige wichtige Komponenten werden im Folgenden beschrieben.
CSS-Element |
Geänderte Benutzeroberflächenkomponente |
---|---|
#header |
Kopfzeile des AEM Forms Workspace |
.categoryList |
Kategorienliste |
.categoryList .header |
Header der Kategorienliste |
.categories, .filters |
Platz unterhalb der Kategorienliste |
.category, .filter |
Kategorie |
.category:hover, .category.selected, .filter:hover, .filter.selected |
Ausgewählte Kategorie und Mouseover-Stil der Kategorie |
categoryListBar .tool, categoryListBar .content |
Seite für den Startprozess (geschlossene Kategorienliste) |
filterListBar .tool, filterListBar .content |
Aufgabenseite (geschlossene Filterliste) |
processNameListBar .tool, processNameListBar .content |
Seite „Verfolgung“ (geschlossene Prozessnamenliste) |
.startPointList, .tasklist |
Startpunktliste oder Aufgabenliste |
.startPointList .header, .tasklist .header |
Header einer Startpunktliste oder einer Aufgabenliste |
.startpoint.selected, .task.selected |
Ausgewählter Startpunkt oder ausgewählte Aufgabe |
.startpoint.selected .description, .task.selected .description |
Beschreibung des ausgewählten Startpunkts oder der Aufgabe |
#taskarea |
Aufgabenbereich |
#header .dropdown |
Benutzer-Dropdown-Komponente im Header |
.sortDrop dd ul |
Dropdown-Komponente für Sortieraufgabe |
Das Erscheinungsbild von AEM Forms Workspace basiert auf einem CSS. Durch Anpassen der CSS können Sie die Darstellungseigenschaften des Workspace ändern, z. B. die Schriftarten, Farben, das Branding und Layout.
Die wesentlichen Schritte für die CSS-Anpassung sind:
html.jsp
.Die genauen Schritte zur Durchführung dieser Anpassungen finden Sie unter Generische Schritte zur Anpassung von AEM Forms Workspace. Die im Lieferumfang von AEM Forms Workspace enthaltene CSS-Datei befindet sich unter /libs/ws/css/. Verwenden Sie für diese CSS-Anpassungen das Ship-Paket. Einzelne Beispiele für CSS-Anpassungen finden Sie in den jeweiligen Hilfethemen am Ende des Artikels.
Sie können den AEM Forms Workspace anpassen, um Avatare von Benutzern hinzuzufügen oder das Logo Ihres Unternehmens hinzuzufügen. Verwenden Sie für diese Anpassungen das Ship-Paket.
Die wesentlichen Schritte für die Anpassungen der Bilder sind:
html.jsp
her.Um mit dem Anpassen der Bilder in AEM Forms Workspace zu beginnen, führen Sie die Schritte Generisch für die Anpassung des AEM Forms Workspace durch. Einzelne Beispiele für Bildanpassungen finden Sie in den jeweiligen Hilfethemen am Ende des Artikels.
HTML-Vorlagen helfen beim Definieren des Erscheinungsbilds und des Layouts der Workspace-Benutzeroberfläche. Indem Sie die Standard-HTML-Vorlagen aktualisieren, können Sie das Layout der Standard-Benutzeroberfläche anpassen.
Die wesentlichen Schritte für die Anpassungen der HTML-Vorlagen sind:
Einzelne Beispiele für diese Anpassungen finden Sie in den jeweiligen Hilfethemen am Ende des Artikels. Wählen Sie je nach der anzupassenden Vorlage das Ship-Paket oder das Dev-Paket.
Um die AEM Forms Workspace-Funktionalität zu ändern, ändern Sie den JavaScript-Quellcode. Änderungen in der Kernfunktion werden als Semantikänderungen bezeichnet. Ändern Sie Modelle, Ansichten und Vorlagen, die als Teil des Quellcodes von AEM Forms Workspace bereitgestellt werden.
Die wichtigsten Schritte zum Durchführen semantischer Änderungen zur Änderung der Funktionen von AEM Forms Workspace sind:
Weitere grundlegende Informationen zu den Komponenten, die Teil des Quellcodes sind, finden Sie unter Beschreibung wiederverwendbarer Komponenten. Für diese Anpassungen verwenden Sie das Dev-Paket.
Da AEM Forms Workspace eine komponentenbasierte Software ist, kann sie einfach angepasst und wiederverwendet werden. Integrieren Sie mühelos die Workspace-Komponenten in Ihre Webanwendungen.
Weitere konzeptionelle Informationen finden Sie unter Beschreibung der wiederverwendbaren Komponenten und Anweisungen zur Verwendung der Komponenten finden Sie unter Integrieren von AEM Forms Workspace-Komponenten in Webanwendungen.
Das Paket enthält den Quellcode von AEM Forms Workspace. Das Paket ist unter [LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip
verfügbar.
Es dient vor allem für Anpassungen, denn es bietet Funktionen um Folgendes zu generieren:
client-pkg:
client-html:
assembly - Enthält zip.xml, das vom Skript zum Erstellen des AEM Forms Workspace SDK verwendet wird.
src/main/webapp -
css - Enthält Stylesheets für AEM Forms Workspace.
images - Enthält die Bilder, die in AEM Forms Workspace verwendet werden.
js:
libs – Enthält alle Drittanbieterbibliotheken, die in AEM Forms Workspace verwendet werden.
licenses – Enthält Lizenzen für HTML- und JS-Dateien sowie den Code, der als Präfix für diese Lizenzen dient und sie den entsprechenden Quelldateien zuordnet.
minifier - Wird für Kombination, Minimierung und Verschleierung von benutzerdefiniertem JavaScript-Code verwendet.
resourcejs_optimizer - Wird für Kombination, Minimierung und Verschleierung von JavaScript-Quellen verwendet.
resource_generator – Wird für die Generierung von register.js und modelcontrollerpath.js verwendet.
runtime:
main.js
router.js
libs/ws: pdf.html und pluginPing.pdf werden zum Laden von PDF forms in AEM Forms Workspace verwendet und WSNextAdapter.swf wird verwendet, um SWF-Formulare und Guides in AEM Forms Workspace zu laden.
locales:
html.jsp
GET.jsp
Das CRX-Paket kann auf dem CRX™-Repository bereitgestellt werden. Sie ist unter [LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip
verfügbar.
Dieses Paket kann mithilfe der drei folgenden Profile erstellt werden, die nachstehend beschrieben werden.
Profil | Beschreibung | Nutzung |
---|---|---|
Ship-Profil | Dieses Profil erstellt ein CRX-Paket der kleinstmöglichen Größe mithilfe der Minimierung. Dieses Paket ist das effizienteste. Alle JavaScript™-Dateien werden zusammengefasst und zu einer JS-Datei minimiert. | Verwenden Sie dieses Profil, wenn keine weiteren Semantikänderungen in den JS-Dateien erforderlich sind. |
Debug-Profil | Dieses Profil erstellt ein mitteleffizientes CRX-Paket. Die Größe des Pakets ist etwas größer als die Größe eines Pakets, das mit dem Ship-Profil erstellt wird. Dieses Paket fasst die meisten JavaScript-Dateien in einer JS-Datei zusammen. | Verwenden Sie dieses Profil für das Debuggen. |
Dev-Profil | Dieses Profil erstellt ein CRX-Paket der größtmöglichen Größe. Alle JavaScript-Dateien sind separat verfügbar, wie im SDK-Paket. | Verwenden Sie dieses Profil, wenn Semantikänderungen notwendig sin. |
css - Enthält style.css, ie.css und jqueri-ui.css.
images - Enthält alle Bilder.
js:
libs:
runtime:
main.js (kombiniert, minimiert und verschleiert).
registry.js
libs:
Locale - Enthält .content.xml.
locales:
Index - Enthält .content.xml.
profile - Enthält offline.jsp .
GET.jsp
html.jsp
content.xml
_rep_policy.xml
css - Enthält style.css, ie.css und jqueri-ui.css.
images - Enthält alle Bilder.
js:
libs:
runtime:
main.js (kombiniert).
registry.js
libs:
Locale - Enthält .content.xml.
locales:
Index - Enthält .content.xml.
profile - Enthält offline.jsp .
GET.jsp
html.jsp
content.xml
_rep_policy.xml
mvn clean -P Dev-Installation auf Client-Paket
css - Enthält style.css, ie.css und jqueri-ui.css.
images - Enthält alle Bilder.
js:
libs - Enthält alle in AEM Forms Workspace verwendeten Bibliotheken.
require - Enthält require.js
jqueryui - Enthält jquery.ui.datepicker.ja.js
runtime:
main.js
registry.js
router.js
libs:
Locale - Enthält .content.xml.
locales:
Index - Enthält .content.xml.
profile - Enthält offline.jsp .
GET.jsp
html.jsp
content.xml
_rep_policy.xml