Integrieren von Arbeitsbereichskomponenten von AEM Forms in Web-Anwendungen integrating-aem-forms-workspace-components-in-web-applications
Sie können AEM Forms Workspace verwenden Komponenten in Ihrer eigenen Webanwendung. Die folgende Beispielimplementierung verwendet Komponenten aus einem AEM Forms Workspace-Entwicklungspaket, das auf einer CRX™-Instanz installiert ist, um eine Webanwendung zu erstellen. Passen Sie die unten stehende Lösung an Ihre spezifischen Anforderungen an. In der Beispielimplementierung werden die Komponenten UserInfo
, FilterList
und TaskList
innerhalb eines Webportals wiederverwendet.
-
Melden Sie sich in der CRXDE Lite-Umgebung unter
https://[server]:[port]/lc/crx/de/
an. Stellen Sie sicher, dass AEM Forms Workpace Dev-Paket installiert ist. -
Erstellen Sie einen Pfad
/apps/sampleApplication/wscomponents
. -
Kopieren Sie CSS, Bilder, js/libs, js/runtime und js/registry.js
- von
/libs/ws
- nach
/apps/sampleApplication/wscomponents
.
- von
-
Erstellen Sie eine Datei "demomain.js"im Ordner /apps/sampleApplication/wscomponents/js . Kopieren Sie den Code aus /libs/ws/js/main.js in demomain.js.
-
Entfernen Sie in demomain.js den Code zum Initialisieren des Routers und fügen Sie den folgenden Code hinzu:
code language-none require(['initializer','runtime/util/usersession'], function(initializer, UserSession) { UserSession.initialize( function() { // Render all the global components initializer.initGlobal(); }); });
-
Erstellen Sie einen Knoten unter „/content“ mit dem Namen
sampleApplication
und dem Typnt:unstructured
. Fügen Sie in den Eigenschaften dieses Knotenssling:resourceType
vom Typ String und dem WertsampleApplication
hinzu. Fügen Sie der Zugriffsteuerungsliste dieses Knotens den EintragPERM_WORKSPACE_USER
hinzu, um jcr:read-Zugriff zuzulassen. Fügen Sie außerdem in der Zugriffssteuerungsliste von/apps/sampleApplication
einen Eintrag fürPERM_WORKSPACE_USER
hinzu, der „jcr:read privileges“ erlaubt. -
Aktualisieren Sie in
/apps/sampleApplication/wscomponents/js/registry.js
die Pfade/lc/libs/ws/
zu/lc/apps/sampleApplication/wscomponents/
für die Vorlagenwerte. -
Fügen Sie in die JSP-Datei Ihrer Portal-Startseite unter
/apps/sampleApplication/GET.jsp
den folgenden Code ein, um die erforderlichen Komponenten innerhalb des Portals aufzunehmen.code language-as3 <script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></script> <div class="UserInfoView gcomponent" data-name="userinfo"></div> <div class="filterListView gcomponent" data-name="filterlist"></div> <div class="taskListView gcomponent" data-name="tasklist"></div>
Schließen Sie auch die CSS-Dateien ein, die für die AEM Forms Workspace-Komponenten erforderlich sind.
note note NOTE Jede Komponente wird beim Rendern zum Komponenten-Tag (mit Klasse gcomponent) hinzugefügt. Stellen Sie sicher, dass Ihre Startseite diese Tags enthält. Weitere Informationen zu diesen Basissteuerungstags finden Sie in der Datei von AEM Forms Workspace html.jsp
. -
Um die Komponenten anzupassen, können Sie die vorhandenen Ansichten für die erforderliche Komponente wie folgt erweitern:
code language-as3 define([ ‘jquery’, ‘underscore’, ‘backbone’, ‘runtime/views/userinfo'], function($, _, Backbone, UserInfo){ var demoUserInfo = UserInfo.extend({ //override the functions to customize the functionality render: function() { UserInfo.prototype.render.call(this); // call the render function of the super class … //other tasks … } }); return demoUserInfo; });
-
Ändern Sie das Portal-CSS, um das Layout, die Positionierung und den Stil der erforderlichen Komponenten im Portal zu konfigurieren. Sie möchten beispielsweise die Hintergrundfarbe für dieses Portal schwarz halten, um die Komponente userInfo gut anzuzeigen. Sie können dies tun, indem Sie die Hintergrundfarbe in
/apps/sampleApplication/wscomponents/css/style.css
wie folgt ändern:code language-as3 body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }