Erstellen einer workflowbasierten Anwendung mit Polymer


Wed 10 February 2016 Von Arnaud Kervern

Die meisten von Ihnen sind sicher schon mit der Nuxeo REST API und der Automation API vertraut und ich bin sicher, dass Sie schon unsere Workflow Engine in Studio ausprobiert haben. Heute zeige ich Ihnen, wie Sie alle in einen magischen Topf werfen und mithilfe von Polymer mit Materialdesign in eine einfache und toll aussehende einseitige Anwendung verwandeln können. Los geht's.

Starten Sie die Polymer-Anwendung

Generieren Sie das Skeleton


Boilerplate, Scaffolding, CopyPasta: es gibt so viele Begriffe, um eine Anwendung neu zu starten. Heute möchte ich ein sehr häufig genutztes Tool in JavaScript-Umgebungen vorstellen: Yeoman.

Yeoman unterstützt Sie bei neuen Projekten, indem es beste Vorgehensweisen und Tools festlegt, mit denen Sie produktiv bleiben.

Das klingt nach etwas, was am Anfang sehr nützlich sein könnte. Verwenden wir es also zur Generierung des Polymer-Textbausteins.

Stellen Sie zunächst sicher, dass Node und Yeoman korrekt in Ihrem System installiert sind (vorausgesetzt, dass Sie OSX verwenden):

$ brew install node
$ npm install -g yo generator-polymer

Generieren Sie dann das Projekt:

$ yo polymer

Jetzt beginnt die Zauberei, d. h. Sie installieren alle npm- und Bower-Abhängigkeiten und starten Ihre neu generierte Anwendung:

$ cd app
$ gulp serve

TA DA! Schon können Sie mit der Anpassung Ihrer neuen Polymer-basierten Anwendung beginnen.

Proxies für die Nuxeo Platform


Da unsere Zielanwendung auf einem Nuxeo Platform-Server gehostet wird, müssen wir während der Entwicklung die Umgebung simulieren und eine Nuxeo Platform nach dem /nuxeo Pfad auf dem Bereitstellungsserver ausführen.

Dazu optimieren wir gulpfile.js etwas, um ein Proxy zu erstellen, während die Dateien übermittelt werden:


Starten Sie die Nuxeo Platform (unter http://localhost:8080/nuxeo) und führen Sie ein gulp-serve aus, um die Anwendung zu starten (unter http://localhost:5000/). Sie sollten mithilfe von http://localhost:5000/nuxeo auf die Nuxeo Platform zugreifen können.

Abfrage des Workflow-Endpunkts


Jetzt haben wir eine funktionierende Polymer-Anwendung, die mit der Nuxeo Platform und der Workflow Engine interagieren soll.

Workflow

Die Hexerei


Die Infrastruktur ist bereit und Sie können jetzt Ihren fantastischen angepassten JavaScript-Editor starten und mit dem Codieren beginnen. Zuvor fügen Sie jedoch noch die Nuxeo-Elemente zur Abhängigkeit hinzu. Dadurch können Sie unsere Komponenten für die Anfrage des Nuxeo Platform-Servers nutzen.

$ bower install --save nuxeo/nuxeo-elements

Fügen Sie die Elementliste zu app/elements/elements.html hinzu wie in unserer Beispielanwendung. Jetzt können wir Komponenten hinzufügen, um die Operation, den REST-Endpunkt, den Workflow usw. aufzurufen. Die vollständige Liste finden Sie auf unserer Online-Demoseite.

Abrakadabra!


Mit einem echten Anwendungsfall ist es immer leichter, einen Trick zu erklären. Hier habe ich genau den richtigen Anwendungsfall dafür! Öffnen Sie die Webkomponente timeoff-pending.html und ich führe Sie durch die einzelnen Schritte.

Authentifizierung?


Unser Ziel ist eine Anwendung, die innerhalb der Nuxeo Platform ausgeführt wird. Das bedeutet, dass wir zusätzlich zu unserem Authentifizierungsfilter davon ausgehen können, dass der aktuelle Benutzer mit seiner HTTP-Sitzung authentifiziert ist. Darum müssen wir uns also in dieser Konfiguration keine Sorgen machen.

nuxeo-resource-Element


Hier ein Beispiel aus dem Quellcode:

<nuxeo-resource id="nxoPending"
auto
path="workflow"
response=true></nuxeo-resource>

Dieses Element definiert eine Anfrage an den Workflow-Endpunkt mit der ID nxoPending, die die Antwort an die Dateneigenschaft bindet. Sie wird automatisch ausgeführt, wenn die Komponente geladen wird. In der Dokumentation Nuxeo Playground-Workflow-Endpunkt sehen Sie, dass in der Dateneigenschaft alle Workflow-Instanzen enthalten sind, die der aktuelle Benutzer gestartet hat.

Durchschleifen der Dateneigenschaft


Hier ist ein weiteres Beispiel aus dem Quellcode. Mithilfe der Eigenschaftsbindung wird das Vorlagenelement wiedergegeben, wenn Daten etwas enthalten und eine Schleife ausführen:

<template id="tmplentries" is="dom-repeat" items='[[data.entries]]' as="item" filter="timeOffWkf">
<div class="request flex">
<timeoff-entry data$=[[item]] id="entry
[[item.id]]"></timeoff-entry>
<div class="actions">
<button-edit-workflow class="button" on-edited="refreshTasks" workflow="[[item]]"></button-edit-workflow>
<button-delete-workflow class="button" on-deleted="refresh"
workflow-id="[[item.id]]"></button-delete-workflow>
</div>
</div>
</template>

Für jeden Eintrag wird eine timeoff-entry Komponente wiedergegeben, die den Status des aktuellen Workflows anzeigt. Und wie Sie sehen können, verwenden wir das gleiche Prinzip, um edit-workflow- und delete-workflow-Aktionen zu verarbeiten, die an den aktuellen Workflow gebunden sind.

Beachten Sie, dass wir nicht alle Workflows anzeigen möchten. Wir verwenden einen dom-repeat-Attributfilter, der das angezeigte Element filtert.

Screenshot 2016-02-05 14.30.42

Und voilà!


So können Sie eine Komponente verwenden, um einen Workflow-Endpunkt anzufordern. Alle aktuellen Benutzerinstanzen werden mithilfe einer anderen Komponente gefiltert und angezeigt. Das ist doch ein bisschen wir Zauberei, oder nicht?

Noch etwas zum Ausprobieren


Wenn Sie die Workflow-API weitere Funktionen ausführen und etwa einen Task validieren oder ablehnen möchten, können Sie sich die Komponente timeoff-pending-task oder noch eher die Komponenten timeoff-accept-task und timeoff-reject-task ansehen. Um tiefer zu gehen, erstellen Sie einen Klon unserer Beispielanwendung nuxeo-timeoff, in der Tasküberprüfung, Workflowerstellung, Content-Enricher und mehr enthalten sind.

Tricks mit Polymer


Ich möchte Ihnen einige Tricks zeigen, die vielleicht nützlich sind, wenn Sie tiefer in Polymer eintauchen.

Verhalten


Dies ist wirklich nützlich. Die Freigabe von Code mithilfe von Verhalten ist toll.

Beispielsweise können Sie leicht Nicht-Lebenszyklus-Methoden innerhalb verschiedener Komponenten gemeinsam nutzen, wie wir es in unserem Verhalten timeoff-helper gemacht haben. Oder noch besser, Sie teilen etwa einige Eigenschaften oder Lebenszyklus-Methoden wie unser Verhalten timeoff-task-comment. Dadurch ist es möglich, dass verschiedene Komponenten eine Anfrage für die Workflow-API über einen Kommentar in den Variablen vorbereiten.

Einmal schreiben, überall verwenden! Das muss Ihr Gedanke sein, wenn Sie den Polymer-Verhaltensmechanismus verwenden.

Benutzerdefinierte Eigenschaft formatieren


Die Formatierung benutzerdefinierter Eigenschaften kann nützlich sein, wenn Sie in Ihrem Format nichts hartcodieren wollen, insbesondere im Schatten-DOM. Schauen wir uns näher an, wie timeoff-entry-user die Farbe der Initialen des Benutzers bearbeitet.

Einzigartige Farbe für einen Benutzernamen

Das Ziel ist eine einzigartige Farbe für einen Benutzernamen. Wir können ein einfache Abfolge hartcodierter Farben verwenden, dann einen einfachen Index für einen Benutzernamen berechnen, die Farbe aussuchen und das war's dann. Aber wir haben etwas besseres! CSS stellt ein Variablensystem bereit, das in Polymer implementiert ist. Polymer stellt uns einige Farbvariablen bereit, die toll mit Materialdesign sind. Aufgrund des Lebenszyklus der Komponente werden die CSS-Variablen vor dem geladenen Status wiedergegeben und davor kennen wir vorher den Benutzernamen nicht. Wir müssen also den Stil der Komponente neu berechnen, wenn wir die Berechnung der Farbe des Benutzernamens abgeschlossen haben. Zu unserer Rettung kommt die API mit den benutzerdefinierten Eigenschaften.

CSS:

#badge {
background: var(--user-color);
}

JavaScript Observer:
_userChanged: function() {
// names[this.username].color contains a CSS variable name
this.customStyle['--user-color'] = this.getComputedStyleValue(names[this.username].color) + ';';
this.updateStyles();
},


Das vollständige Plug-in nuxeo-timoff ist als öffentliches Nuxeo-Paket erhältlich, wenn Sie damit herumspielen möchten. Installieren Sie es, navigieren Sie zu http://localhost:8080/nuxeo/timeoff und viel Spaß!


Etikettiert: Nuxeo Automation, Polymer, REST API, Workflow