Einführung zur Anpassung von AEM Forms Workspace

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

Arten von Anpassungen

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:

• Erscheinungsbild der Benutzeroberfläche
• Funktionalität mithilfe semantischer Anpassungen
• Wiederverwenden von HTML-Komponenten in anderen Anwendungen

Änderungen an der Benutzeroberfläche

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.

Grundlagen zum Stylesheet

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

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:

• Erstellen Sie eine CSS-Datei.
• Fügen Sie diesem CSS Stilelemente hinzu. Weitere Informationen finden Sie unter Grundlagen zu CSS-Stilen .
• 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. Spezifische Beispiele für CSS-bezogene Anpassungen finden Sie in den entsprechenden Hilfethemen am Ende dieses Artikels.

Bild

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:

• WebDAV installieren und konfigurieren
• Fügen Sie neue Bilder hinzu.
• Fügen Sie neue Stile hinzu, die den hinzugefügten Bildern entsprechen.
• 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. Spezifische Beispiele für bildbezogene Anpassungen finden Sie in den entsprechenden Hilfethemen am Ende dieses Artikels.

HTML-Vorlage

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:

• Erstellen Sie in einem vom Benutzer erstellten Ordner Kopien der erforderlichen Standarddateien.
• Fügen Sie neue Vorlagen im benutzerdefinierten Ordner hinzu.
• Nehmen Sie relevante Aktualisierungen an den kopierten Dateien vor, z. B. den Pfad der neuen Vorlage.

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.

Semantische Änderungen

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:

• Erstellen Sie in einem vom Benutzer erstellten Ordner Kopien der entsprechenden Standarddateien.
• Fügen Sie im benutzerdefinierten Ordner neue Modelle und Ansichten hinzu.
• Nehmen Sie relevante Aktualisierungen vor, z. B. Aktualisieren von Pfaden neu hinzugefügter Modelle und Ansichten in den standardmäßigen JavaScript-Dateien.
• Minimieren Sie das Paket zur Leistungsoptimierung.

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 .

Wiederverwendbare Komponenten

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

SDK-Paket

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:

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

WS-Inhalt

• client-pkg:

  • src - Enthält Artefakte, die zum Erstellen von CRX-Knoten erforderlich sind.
  • pom.xml - Skript zum Erstellen von Bereitstellungspaketen für verschiedene Profile WS-Bereitstellungspaket

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

        • initializer - Enthält initializer.js , das zum Initialisieren von Backbone-Ansichten und -Modellen verwendet wird, die in AEM Forms Workspace verwendet werden.
        • models - Enthält Backbone-Modelle aller Komponenten, die in AEM Forms Workspace vorhanden sind.
        • 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 erfolgen ü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 Browsergebietsschema zu ermitteln.

    • html.jsp

    • GET.jsp

CRX-Paket

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.

Ship-Profil

Befehl

• 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

• 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 Browsergebietsschema zu ermitteln.

• Index - Enthält .content.xml

• profile - Enthält offline.jsp.

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

Debug-Profil

Befehl

• mvn clean -P Debug install on client-pkg
• Die Befehlsausführung des Debug-Profils funktioniert nur auf 64-Bit-JVM.

WS-Inhalt

• 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 Browsergebietsschema zu ermitteln.

• Index - Enthält .content.xml

• profile - Enthält offline.jsp.

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

Entwicklungsprofil

Befehl

mvn clean -P Dev install on client-pkg

WS-Inhalt

• 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 Browsergebietsschema zu ermitteln.

• Index - Enthält .content.xml

• profile - Enthält offline.jsp.

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml