AEM Forms Workspace bietet Funktionen zum Ändern der Darstellung und der Funktionen 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 Arbeitsbereich
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. Die Anpassungen umfassen die Aktualisierung einer oder mehrerer der folgenden Elemente:
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 angewandten Schritte werden in Generische Schritte zur Anpassung von AEM Forms Workspace beschrieben. Spezifische Beispiele für solche Anpassungen, einschließlich der detaillierten Schritte, finden Sie in den entsprechenden Artikeln am Ende dieses Artikels.
Machen Sie sich vor dem Anpassen von Workspace mit dem Standard-Stylesheet vertraut, das unter /libs/ws/css/style.css mit AEM Forms bereitgestellt wird.
Um den Arbeitsbereich anzupassen, sollten Sie sich mit dem vorhandenen Stylesheet style.css im Ordner /libs/ws/css vertraut machen. Nachfolgend werden einige wichtige Komponenten beschrieben.
CSS-Element |
Änderung der Benutzeroberflächenkomponente |
---|---|
#Kopfzeile |
Header von AEM Forms Workspace |
.categoryList |
Kategorienliste |
.categoryList .header |
Kopfzeile der Kategorienliste |
.categories, .filters |
Platz unterhalb der Kategorienliste |
.category, .filter |
Kategorie |
.category:hover, .category.selected, .filter:hover, .filter.selected |
Ausgewählte Kategorie und Mauszeiger über die Kategorie |
categoryListBar .tool, categoryListBar .content |
Prozessseite starten (geschlossene Kategorienliste) |
filterListBar .tool, filterListBar .content |
Aufgabenseite (geschlossene Filterliste) |
processNameListBar .tool, processNameListBar .content |
Tracking-Seite (geschlossene Prozessnamenliste) |
.startPointList, .tasklist |
Die Startpunktliste oder die Aufgabenliste |
.startPointList .header, .tasklist .header |
Die Kopfzeile einer Startpunktliste oder einer Aufgabenliste |
.startpoint.selected, .task.selected |
Der ausgewählte Startpunkt oder die ausgewählte Aufgabe |
.startpoint.selected .description, .task.selected .description |
Beschreibung des ausgewählten Startpunkts oder der ausgewählten Aufgabe |
#taskarea |
Der Aufgabenbereich |
#header .dropdown |
Benutzer-Dropdown in der Kopfzeile |
.sortDrop dd ul |
Dropdown-Liste "Sortieraufgabe" |
Das Erscheinungsbild von AEM Forms Workspace wird aus einer CSS übernommen. Durch die Anpassung des CSS können Sie die Darstellungssemantik von Workspace wie Schriftarten, Farben, Branding und Layout ändern.
Die wichtigsten Schritte zur CSS-Anpassung sind:
html.jsp
.Die ausführlichen Schritte zur Umsetzung dieser Anpassungen finden Sie unter Generische Schritte zur Anpassung von AEM Forms Workspace. Die mit AEM Forms Workspace bereitgestellte CSS-Datei ist unter /libs/ws/css/ zu finden. Verwenden Sie für diese CSS-Anpassungen das Ship-Paket. Spezifische Beispiele für CSS-bezogene Anpassungen finden Sie in den entsprechenden Hilfethemen am Ende dieses Artikels.
Sie können AEM Forms Workspace anpassen, um Avatare von Benutzern oder das Logo Ihres Unternehmens hinzuzufügen. Verwenden Sie für diese Anpassungen Ship-Paket.
Die wichtigsten Schritte zur Anpassung der Bilder sind:
html.jsp
her.Um mit der Anpassung der Bilder in AEM Forms Workspace zu beginnen, führen Sie die Generischen Schritte zur Anpassung von AEM Forms Workspace aus. Spezifische Beispiele für bildbezogene Anpassungen finden Sie in den entsprechenden Hilfethemen am Ende dieses Artikels.
HTML-Vorlagen dienen dazu, das Erscheinungsbild und Layout der Benutzeroberfläche des Arbeitsbereichs zu definieren. Durch die Aktualisierung der Standard-HTML-Vorlagen können Sie die Standard-Benutzeroberfläche des Layouts anpassen.
Die wichtigsten Schritte zur Anpassung der HTML-Vorlage sind:
Spezifische Beispiele für solche Anpassungen finden Sie in den Hilfethemen am Ende dieses Artikels. Wählen Sie zwischen Ship-Paket oder Entwicklungspaket, abhängig von der anzupassenden Vorlage.
Verändern Sie den JavaScript Quell-Code, um die AEM Forms Workspace-Funktionen zu ändern. Änderungen an der Kernfunktion werden als Semantische Änderungen bezeichnet. Sie ändern Modelle, Ansichten und Vorlagen, die im Quellcode von AEM Forms Workspace bereitgestellt werden.
Die wesentlichen Schritte zur Änderung der Semantik und damit 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. Verwenden Sie für diese Anpassungen das Entwicklungspaket .
Da AEM Forms Workspace eine komponentenbasierte Software ist, lässt sich diese einfach anpassen und wiederverwenden. Integrieren Sie mühelos die Workspace-Komponenten in Ihre Webanwendungen.
Weitere grundlegende Informationen finden Sie unter der Beschreibung wiederverwendbarer Komponenten. Anweisungen zum Verwenden der Komponenten sind unter Integrieren von AEM Forms Workspace-Komponenten in Web-Anwendungen aufgeführt.
Das Paket enthält den Quellcode von AEM Forms Workspace. Das Paket ist verfügbar unter [LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip
.
Sie ist in erster Linie für Anpassungen vorgesehen, da sie folgende Funktionen bietet:
client-pkg:
client-html:
assembly – Enthält die zip.xml, die vom Skript zum Erstellen von AEM Forms Workspace SDK verwendet wird.
src/main/webapp -
css - Enthält Stylesheets für AEM Forms Workspace.
images - Enthält Bilder, die in AEM Forms Workspace verwendet werden.
js:
libs - Enthält alle Bibliotheken von Drittanbietern, die in AEM Forms Workspace verwendet werden.
licenses - Enthält Lizenzen für HTML- und JS-Dateien und -Code, um diese Lizenzen den jeweiligen Quelldateien vorzustellen.
minifier – Wird für die Kombination, Minimierung und Verschleierung des benutzerdefinierten JavaScript-Codes verwendet.
resourcejs_optimizer – Wird für die Kombination, Minimierung und Verschleierung der JavaScript-Quelle 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-Formularen in AEM Forms Workspace verwendet. 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. Diese sind verfügbar unter [LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip
.
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 kombiniert und in eine JS-Datei minimiert. | Verwenden Sie dieses Profil, wenn keine weiteren semantischen Änderungen in JS-Dateien erforderlich sind. |
Debug-Profil | Dieses Profil erstellt ein mäßig effizientes CRX-Paket. Die Größe des Pakets ist etwas größer als das mit dem Ship-Profil erstellte Paket. Dieses Paket enthält die meisten JavaScript-Dateien, die zu einer JS-Datei zusammengefasst sind. | Verwenden Sie dieses Profil zum Debugging. |
Entwicklungsprofil | Dieses Profil erstellt ein CRX-Paket der größtmöglichen Größe. Alle JavaScript-Dateien sind separat verfügbar, da sie sich im SDK-Paket befinden. | Verwenden Sie dieses Profil, wenn Sie semantische Änderungen einbinden. |
css - Enthält style.css, ie.css und jquery-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 install on client-pkg
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