DokumentationAEM 6.5Benutzerhandbuch

Einführung zur Anpassung von AEM Forms Workspace introduction-to-customizing-aem-form-workspace

Last update: Sun Mar 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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.

cu_customized_workspace_example

Beispiel für einen benutzerdefinierten Workspace

Arten der Anpassung types-of-customizations

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 einer der folgenden Faktoren aktualisiert:

  • Aussehen der Benutzeroberfläche
  • Funktionen mithilfe der semantischen Anpassungen
  • Wiederverwenden von HTML-Komponenten in anderen Anwendungen

Änderungen der Benutzeroberfläche user-interface-changes

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. Einzelne Beispiele für Anpassungen, einschließlich der ausführlichen Schritte, finden Sie in den jeweiligen Artikeln am Ende des Artikels.

Grundlagen des Stylesheets understanding-the-style-sheet

Bevor Sie Workspace anpassen, sollten Sie sich mit dem Standard-Stylesheet vertraut machen, 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
Header von 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
Tracking-Seite (geschlossene Prozessnamenliste)
.startPointList, .tasklist
Die Startpunktliste oder die Aufgabenliste
.startPointList .header, .tasklist .header
Der Header 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-Komponente im Header
.sortDrop dd ul
Dropdown-Komponente für Sortieraufgabe

CSS css

Das Erscheinungsbild von AEM Forms Workspace wird aus einer CSS übernommen. Durch Anpassen der CSS können Sie die Darstellungseigenschaften des Workspace ändern, z. B. Schriftarten, Farben, Branding und Layout.

Die wesentlichen Schritte für die CSS-Anpassung sind:

  • Erstellen Sie die eine CSS-Datei.
  • Fügen Sie der CSS-Datei Stilelemente hinzu. Weitere Informationen finden Sie im entsprechenden Artikel zum Thema CSS-Stile.
  • Aktualisieren Sie die betreffenden Verweise in der Datei 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. Einzelne Beispiele für CSS-Anpassungen finden Sie in den jeweiligen Hilfethemen am Ende des Artikels.

Bild image

Sie können AEM Forms Workspace anpassen, um Avatare von Benutzern 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:

  • Installieren und konfigurieren Sie WebDAV.
  • Fügen Sie neue Bilder hinzu.
  • Fügen Sie neue Stile entsprechend den hinzugefügten Bildern hinzu.
  • Stellen Sie eine Verknüpfung zu der neuen CSS-Datei in der Datei 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. Einzelne Beispiele für Bildanpassungen finden Sie in den jeweiligen Hilfethemen am Ende des Artikels.

HTML-Vorlage html-template

HTML-Vorlagen dienen dazu, das Erscheinungsbild und Layout der Benutzeroberfläche des Arbeitsbereichs zu definieren. 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:

  • Erstellen Sie in einem benutzerdefinierten Ordner die Kopien von den erforderlichen Standarddateien.
  • Fügen Sie dem benutzerdefinierten Ordner neue Vorlagen hinzu.
  • Nehmen Sie an den kopierten Dateien die entsprechenden Aktualisierungen vor, z. B. die Aktualisierung des Pfads der neuen Vorlage.

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.

Semantikänderungen semantic-changes

Verändern Sie den JavaScript Quell-Code, um die AEM Forms Workspace-Funktionen zu ändern. Änderungen in der Kernfunktion werden als Semantikänderungen bezeichnet. Ändern Sie Modelle, Ansichten und Vorlagen, die als Teil des Quell-Codes von AEM Forms Workspace bereitgestellt werden.

Die wesentlichen Schritte zur Änderung der Semantik und damit zur Änderung der Funktionen von AEM Forms Workspace sind:

  • Erstellen Sie in einem benutzerdefinierten Ordner die Kopien von den entsprechenden Standarddateien.
  • Fügen Sie dem benutzerdefinierten Ordner neue Modelle und Ansichten hinzu.
  • Nehmen Sie die erforderlichen Aktualisierungen vor, z. B. die Aktualisierung der Pfade der neu hinzugefügten Modelle und Ansichten in den Standard-JavaScript-Dateien.
  • Minimieren Sie das Paket zum Optimieren der Leistung.

Weitere grundlegende Informationen zu den Komponenten, die Teil des Quellcodes sind, finden Sie unter Beschreibung wiederverwendbarer Komponenten. Verwenden Sie für diese Anpassungen das Dev-Paket.

Wiederverwendbare Komponenten reusable-components

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.

Erstellen von AEM Forms Workspace-Code building-html-workspace-code

SDK-Paket sdk-package

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.

Es dient vor allem der Anpassung, denn es bietet Funktionen, um Folgendes zu generieren:

  • CRX-Pakete für Ship-, Debug- und Dev-Profile (siehe unten unter CRX-Pakete).
  • Minimierte Version des benutzerspezifischen Codes (für Semantikänderungen).

WS-Inhalt ws-content

  • client-pkg:

    • src – Enthält die Artefakte, die erforderlich sind, um CRX-Knoten zu erstellen.
    • pom.xml – Das Skript zum Erstellen von Bereitstellungspaketen für ein WS-Deploy-Paket mit verschiedenen Profilen

  • 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 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 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:

          • initializer - Enthält initializer.js, das zum Initialisieren der Backbone-Ansichten und -Modelle in AEM Forms Workspace verwendet wird.
          • models – Enthält Backbone-Modelle aller Komponenten in AEM Forms Workspace.
          • routes – Enthält JavaScript-Dateien und HTML-Dateien, die den Startvorgang, Aufgaben, Verfolgung und Einstellungen in AEM Forms Workspace laden.
          • services - Enthält in AEM Forms Workspace verwendete service.js. Alle Server-Aufrufe erfolge über service.js.
          • templates – Enthält alle Vorlagen, d. h. HTML-Dateien aller Ansichten in AEM Forms Workspace.
          • util – Enthält alle in AEM Forms Workspace verwendeten Dienstprogrammdateien (JavaScript).
          • views – Enthält Backbone-Ansichten aller Komponenten in AEM Forms Workspace.

        • 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:

        • de-DE - Enthält translation.json für Deutsch.
        • en-US - Enthält translation.json für Englisch.
        • fr-FR - Enthält translation.json für Französisch.
        • ja-JP - Enthält translation.json für Japanisch.
        • html.jsp - Enthält Code, um das aktuelle Browser-Gebietsschema zu ermitteln.

      • html.jsp

      • GET.jsp

CRX-Paket crx-package

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 mittels 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. Das Paket ist etwas größer als das mit dem Ship-Profil erstellte Paket. Dieses Paket fasst die meisten JavaScript-Dateien in einer JS-Datei zusammen.
Verwenden Sie dieses Profil zum Debugging.
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 sind.

Ship-Profil ship-profile

Befehl command

  • mvn clean -P Ship install auf client-pkg Ordner des Quellpakets, das an den Client geliefert wurde.
  • Befehlsausführung von Ship-Profil funktioniert nur auf einer 64-Bit-JVM.

WS-Inhalt ws-content-1

  • css - Enthält style.css, ie.css und jquery-ui.css.

  • images - Enthält alle Bilder.

  • js:

    • libs:

      • require - Enthält require.js.
      • jqueryui - Enthält jquery.ui.datepicker.ja.js.

    • runtime:

      • templates - Enthält alle Vorlagen, d. h. HTML-Dateien aller Komponenten in AEM Forms Workspace.

    • main.js (kombiniert, minimiert und verschleiert).

    • registry.js

  • libs:

    • ws - Enthält pluginPing.pdf, pdf.html und WSNextAdapter.swf.

  • Locale - Enthält .content.xml.

  • locales:

    • de-DE - Enthält translation.json für Deutsch.
    • en-US - Enthält translation.json für Englisch.
    • fr-FR - Enthält translation.json für Französisch.
    • ja-JP - Enthält translation.json für Japanisch.
    • html.jsp - Enthält Code, um das aktuelle Browser-Gebietsschema zu ermitteln.

  • Index – Enthält .content.xml

  • profile - Enthält offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Debug-Profil debug-profile

Befehl command-1

  • mvn clean -P Debug install auf client-pkg
  • Befehlsausführung von Debug-Profil funktioniert nur auf 64-Bit-JVM.

WS-Inhalt ws-content-2

  • css - Enthält style.css, ie.css und jqueri-ui.css.

  • images - Enthält alle Bilder.

  • js:

    • libs:

      • require - Enthält require.js.
      • jqueryui - Enthält jquery.ui.datepicker.ja.js.

    • runtime:

      • templates - Enthält alle Vorlagen, d. h. HTML-Dateien aller Komponenten in AEM Forms Workspace.

    • main.js (kombiniert).

    • registry.js

  • libs:

    • ws - Enthält pluginPing.pdf, pdf.html und WSNextAdapter.swf.

  • Locale - Enthält .content.xml.

  • locales:

    • de-DE - Enthält translation.json für Deutsch.
    • en-US - Enthält translation.json für Englisch.
    • fr-FR - Enthält translation.json für Französisch.
    • ja-JP - Enthält translation.json für Japanisch.
    • html.jsp - Enthält Code, um das aktuelle Browser-Gebietsschema zu ermitteln.

  • Index – Enthält .content.xml

  • profile - Enthält offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Dev-Profil dev-profile

Befehl command-2

mvn clean -P Dev-Installation auf Client-Paket

WS-Inhalt ws-content-3

  • 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:

      • initializer - Enthält initializer.js und modelcontrollerpath.js.
      • models - Enthält Modelle aller Komponenten in AEM Forms Workspace.
      • routes – Enthält JavaScript-Dateien und HTML-Dateien, die den Startvorgang, Aufgaben, Verfolgung und Einstellungen in AEM Forms Workspace laden.
      • services - Enthält die in AEM Forms Workspace verwendete service.js.
      • templates - Enthält alle Vorlagen, d. h. HTML-Dateien aller Komponenten in AEM Forms Workspace.
      • util – Enthält alle in AEM Forms Workspace verwendeten Dienstprogrammdateien (JavaScript).
      • views - Enthält Ansichten aller Komponenten in AEM Forms Workspace.

    • main.js

    • registry.js

    • router.js

  • libs:

    • ws - Enthält pluginPing.pdf, pdf.html und WSNextAdapter.swf.

  • Locale - Enthält .content.xml.

  • locales:

    • de-DE - Enthält translation.json für Deutsch.
    • en-US - Enthält translation.json für Englisch.
    • fr-FR - Enthält translation.json für Französisch.
    • ja-JP - Enthält translation.json für Japanisch.
    • html.jsp - Enthält Code, um das aktuelle Browser-Gebietsschema zu ermitteln.

  • Index – Enthält .content.xml

  • profile - Enthält offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2