Polymerでワークフローベースのアプリケーションを構築

ほとんどの方がNuxeo REST APIとオートメーションAPIについてよくご存じで、当社のStudioでワークフローエンジンを試したことがあると思います。今日は、これらをすべて魔法の大釜に入れ、PolymerとMaterial Designとを使用して、シンプルで見やすい単一ページのアプリケーションに変換する方法を説明します。さあ、始めましょう！

Polymerアプリケーションを起動します

スケルトンを生成します

Yeomanは、生産性を維持するためのベストプラクティスとツールを定めて、新しいプロジェクトの開始をサポートします。

プロジェクトの開始には役立ちそうです。Yeomanを使用してPolymerボイラープレートを生成してみましょう。

まず、ノードとYeomanがお使いのシステムに適切にインストールされているか確認します（OSXを使用していることを想定しています）。

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

$ yo polymer

$ cd app
$ gulp serve

Nuxeo Platformのプロキシ

そのために、ファイルの処理中にプロキシを作成するためにgulpfile.jsを微調整します。

• プロキシミドルウェアモジュールをインストールし、dev dependencyとして保存します。

   $ npm install --save-dev proxy-middleware

  
  


• gulpfile.jsでサーバタスクを探し、次の行を追加します。

  // 次も参照してください： https://github.com/nuxeo/nuxeo-timeoff/blob/96d09c478bef6da38c27ae80d59dfbb877851ae7/nuxeo-timeoff-web/gulpfile.js#L255-L256
  // setup our local proxy var proxyOptions = require('url').parse('http://localhost:8080/nuxeo');
  proxyOptions.route = '/nuxeo';

  
  


• プロキシをサーバミドルウェアに追加します。

  // 次も参照してください： https://github.com/nuxeo/nuxeo-timeoff/blob/96d09c478bef6da38c27ae80d59dfbb877851ae7/nuxeo-timeoff-web/gulpfile.js#L276 middleware: [historyApiFallback(), require('proxy-middleware')(proxyOptions)],

  
  

ワークフローエンドポイントのクエリ

魔法の仕上げ

$ bower install --save nuxeo/nuxeo-elements

魔法の呪文、アブラカダブラ！

認証

nuxeo-resourceエレメント

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

データプロパティのループ

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

ワークフローをすべて表示したいわけではないので、注意してください。また、表示された項目をフィルタするDOMリピート属性フィルタを使用します。

これで完成！

もっと試してみる

Polymerのテクニック

動作

たとえば、当社の時間外のヘルパー動作で実行したように、複数のコンポーネント間の非ライフサイクルメソッドを簡単に相互化することができます。または、当社の時間外のタスクコメント動作のように、いくつかのプロパティまたはライフサイクルメソッドの共有など、さらに良いものを実行することができます。これにより、コメントを変数に保存するワークフローAPIの要求を作成する能力を有する複数のコンポーネントを持つことが可能になります。

一度記述すると、どこでも使用できる！Polymer動作メカニズムを使用する場合は、自分で考えなければなりません。

カスタムプロパティのスタイリング

目標は、ユーザ名にユニークなカラーを付けることです。ハードコーディングされたカラーの単純な配列を使用して、ユーザ名の簡単なインデックスを計算し、そのカラーを選択すれば、終わりです。しかし、もっと良いやり方があります！CSSは、Polymerに実装される可変システムを提供し、PolymerはMaterial Designで役立つカラー変数を提供します。しかし、コンポーネントのライフサイクルのために、CSSの変数はレンダリングされてからロードされた状態になり、前もってユーザ名を知ることができません。したがって、ユーザ名のカラーを計算し終わった際に、コンポーネントのスタイルを再計算する必要があります。そこで、カスタムプロパティAPIが助けに来てくれます。

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();
},