Einleitung
In einem früheren Blog habe ich erklärt, wie man eine Polymer-Anwendung als JSF-Widget über Nuxeo Studio verwendet, die sich in einem Nuxeo Plug-in befindet. Heute zeige ich, wie man eine benutzerdefinierte Polymer-App ausschließlich mithilfe von Nuxeo Studio erstellt.
Die Plug-in Lösung funktioniert hervorragend bei komplexen Anwendungsfällen und erweitert die Nuxeo Anwendung mit coolen, benutzerdefinierten und modernen Nutzererfahrungen. Allerdings war ich mit der Komplexität nicht zufrieden. Für einen Anwender von Studio oder einen Webentwickler sind gewisse Java-Tools erforderlich, um ein Nuxeo Paket zu erstellen, sogar für eine Polymer-Anwendung. Allerdings stellt dies einen großen zusätzlichen Lernaufwand dar. Unser Programmiergerüst ist eine große Hilfe, aber für einfache Anwendungsfälle ist der Aufwand immer noch viel zu groß. Ich wollte eine einfachere Lösung.
Der Kürze wegen bezeichne ich Polymer-Widgets oder -Dashboards hier allgemein als “Polymer-Apps”. Technisch gesehen ist dies korrekt, denn was ich hier beschreibe ist trotz allem eine eigene abgeschlossene Polymer-App, auch wenn sie als Widget oder Dashboard innerhalb der Nuxeo-Anwendung angezeigt wird.
Der Schlüssel zum Glück
Benutzerdefinierter Polymer Content kann in Nuxeo Studio deshalb definiert werden, weil die Nuxeo Content Services Platform bereits einige serienmäßige Polymer-Apps enthält. Ich meine hier speziell zwei eingebettete Anwendungen.
Berechtigungen
Der Tab ‚Berechtigungen’ ist eine eingebettete Polymer-App:
Analytik
Die ‚Analytik’-Tabs sind ebenfalls eingebettete Polymer-Apps:
Wiederverwendbare Ressourcen
Um diese bereits bestehenden Funktionen zu nutzen, müssen die erforderlichen Dateien von einer dieser Apps über Ihre XHTML-Vorlage importiert werden. Um etwa die Abhängigkeiten für den Berechtigungs-Tab zu verwenden, muss der korrekte Import folgendermaßen aussehen:
<h:outputscript src="/bower_components/webcomponentsjs/webcomponents-lite.js" target=""><h:outputscript src="/bower_components/moment/min/moment-with-locales.min.js" target=""><nxr:import src="/permissions/elements/elements.vulcanized.html" target="">
Um die Abhängigkeiten aus den Analytik-Tabs zu verwenden, muss die letzte Zeile folgendermaßen geändert werden:
<nxr:import src="/analytics/elements/elements.vulcanized.html" target="">
Diese Importe stellen ein Widget oder eine Layout-Vorlage mit dem erforderlichen Framework bereit, um Polymer-Apps in Nuxeo Studio zu erstellen.
Der Unterschied zwischen den beiden Importen liegt im Verzeichnis der verfügbaren Polymerelemente. Beide Apps enthalten das erforderliche Framework, aber jede App besitzt auch eine einzigartige Reihe an Elementen (definiert in der Datei “elements.vulcanized.html”). Falls Sie tiefer in das Thema eintauchen und das Verzeichnis mit den einzelnen Elementen ansehen möchten, empfehle ich, die Datei “elements.html” jeder App zu überprüfen. Diese befinden sich im Ordner “nuxeo.war” auf Ihrem Server und stehen auch auf github zur Verfügung:
Verbindung der Komponenten
Der größte Unterschied zwischen dieser Lösung und der Lösung, die auf dem Plug-in basiert, ist der, dass die XHTML-Vorlage alles für die Polymer-App enthalten muss (z. B. CSS, HTML und JavaScript in der gleichen Datei). Hier ist ein Layout-Beispiel in Form eines Kreisdiagramms über die Verteilung von Content im Repository:
` <h:panelgroup layout=”block” xmlns=”http://www.w3.org/1999/xhtml" xmlns:h=”http://java.sun.com/jsf/html" xmlns:nxr=”http://nuxeo.org/nxweb/resources" style=”overflow: hidden”><h:outputscript src=”/bower_components/webcomponentsjs/webcomponents-lite.js” target=””><h:outputscript src=”/bower_components/moment/min/moment-with-locales.min.js” target=””><nxr:import src=”/analytics/elements/elements.vulcanized.html” target=””>
</nxr:import></h:outputscript></h:outputscript></h:panelgroup>
Wie Sie sehen können, enthält diese einzelne HTML-Vorlage CSS, um das Erscheinungsbild der App zu steuern; HTML, um den Polymer-Content zu verbinden; und JavaScript, um die durch die Abrufe erhaltenen Daten an das Nuxeo-Repository-Datenelement zurückzumelden.
Ein besser ausgearbeitetes Beispiel finden Sie [hier](https://github.com/nuxeo-sandbox/nuxeo-labs-studio/tree/master/home-tab-analytics). Diese Beispiel fügt ein Dashboard als neuen Tab auf des Startseite hinzu.
## Tipps
### Welche Widgets stehen zur Verfügung?
Ich empfehle Ihnen die Datei "elements.html" jeder App anzusehen. Diese befinden sich im Ordner "nuxeo.war" auf Ihrem Server oder auf github:
- [Analytik](https://github.com/nuxeo/nuxeo/blob/master/nuxeo-features/nuxeo-admin-center/nuxeo-admin-center-analytics/src/main/elements/elements.html) - [Berechtigungen](https://github.com/nuxeo/nuxeo-ui-elements/blob/master/nuxeo-ui-elements.html)
### Ajax Tabs deaktivieren
Die Integration von Polymer-Apps mit JSF kann knifflig sein, da JSF mit aktivierter Ajax-Unterstützung destruktive Änderungen am DOM-Baum vornimmt. Deshalb ist es am besten, die Ajax-Unterstützung für jeden Tab zu deaktivieren, der Polymer-Content enthält. Beispielsweise deaktiviert diese XML-Erweiterung die Ajax-Unterstützung in einem Tab mit dem Namen "DomainSummary":
``` <extension target="org.nuxeo.ecm.platform.actions.ActionService" point="actions"><action id="DomainSummary"><properties><property name="ajaxSupport">false</property></properties></action></extension>
Wie gehen Sie bei umfangreicheren Anforderungen vor?
Sehen sie sich nuxeo-labs-studio-elements an. Dieses Plug-in besitzt eine umfangreichere Bibliothek an Polymer-Elementen (einschließlich Google Chart). Nehmen Sie einfach ein paar Anpassungen vor, wenn Sie es verwenden möchten:
- Installieren Sie das Plug-in auf Ihrem Server. - Ändern Sie den Import für “elements.vulcanized.html” so, dass er auf “/nuxeo-labs-studio-elements/elements” verweist.
Fazit
Die meisten meiner Blogs, die ich dieses Jahr geschrieben habe, befassen sich in irgendeiner Weise mit Polymer und Web Components. Man könnte meinen, ich wäre ein Fan davon. Das ist richtig. Die Arbeit mit Polymer war eine der lohnendsten Erfahrungen meiner Karriere.
Ich bin absolut begeistert, dass wir diese Technologie über Nuxeo Studio nutzen können und der Nuxeo-Anwendung mit modernem, reaktivem Content und einer überragenden Flexibilität neues Leben einhauchen können.
Ein weiterer toller Vorteil dieser Arbeit ist der, dass Ihre Polymerkenntnisse nützlich für die Arbeit mit der neuen Nuxeo Web UI sein werden, die auf Web Component basiert und ebenfalls Polymer verwendet. Nuxeo erlebt definitiv aufregende Zeiten.</nxr:import></nxr:import></h:outputscript></h:outputscript>