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

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

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

スケルトンを生成します

ボイラープレート、スキャフォールディング、コピペ - アプリケーションをブートストラップする多くの言葉があります。JavaScriptの世界でよく知られているツールをご紹介します。Yeoman。

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

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

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

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

それから、プロジェクトを生成します。

$ yo polymer

さて魔法をかけましょう。npmとBowerの依存関係をすべてインストールしたら、新しく生成されたアプリケーションを起動してみましょう：

$ cd app
$ gulp serve

ジャーン！これで、あなたの新しいPolymerベースのアプリケーションのカスタマイズを開始することができます。

Nuxeo Platformのプロキシ

当社のターゲットアプリケーションはNuxeo Platformサーバ内でホストされるので、開発中に、環境をシミュレートし、実行中のNuxeo Platformを開発サーバ上の/nuxeoパスの背後に維持する必要があります。

そのために、ファイルの処理中にプロキシを作成するために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)],
```

Nuxeo Platformを起動し（http://localhost:8080/nuxeo上で）、gulp serveを実行してアプリケーションを起動します（http://localhost:5000/上で）。[http://localhost:5000/nuxeo](http://localhost:5000/nuxeo)でNuxeo Platformにアクセスできます。

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

作業用のPolymerアプリケーションを備えたので、Nuxeo Platformおよびワークフローエンジンと対話したいと思います。

魔法の仕上げ

インフラストラクチャの準備ができて、素晴らしくカスタマイズされた（隣人よりも優れた）JavaScriptエディタを開いて、コーディングを開始することができます。しかしその前に、Nuxeo Platformサーバを要求するために当社のコンポーネントを使用することができますので、依存関係にnuxeo要素を追加します。

$ bower install --save nuxeo/nuxeo-elements

当社のサンプルアプリで実行したように、要素のリストをapp/elements/elements.htmlに追加します。ここで、オペレーション、RESTエンドポイント、ワークフローなどを呼び出すために、コンポーネントを追加することができます。

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

実際の使用事例を使用してトリックを説明したほうがずっと簡単なので、その事例をご紹介します！timeoff-pending.htmlウェブコンポーネントを開いて、手順を説明します。

認証

対象は、Nuxeo Platform内で実行するアプリケーションです。つまり、当社の認証フィルタのほかに、現在のユーザがすでにそのHTTPセッションで認証されていると想定できることになります。したがって、この構成において認証について心配する必要はなくなります。

nuxeo-resourceエレメント

ソースからサンプルを取り上げます。

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

この要素は、応答をデータプロパティに結合させる、id nxoPendingを有するワークフローエンドポイントに対する要求を定義します。コンポーネントがロードされたときに自動的に実行されます。Nuxeoプレイグランドワークフローエンドポイントのマニュアルでは、データプロパティには現在のユーザが起動したワークフローインスタンスがすべて含まれていることを確認することができます。

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

ソースから別のサンプルを取り上げます。データに何かが含まれていて、その上にループがある場合、プロパティ結合を使用して、テンプレート要素がレンダリングされます。

<template id="tmpl_entries" 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リピート属性フィルタを使用します。

これで完成！

このようにして、ワークフローエンドポイントを要求するコンポーネントを使用して、現在のユーザインスタンスをすべて有し、それらをフィルタリングし、他のコンポーネントを使用してそれらを表示することができます。魔法のようではないですか？

もっと試してみる

タスクの検証や拒否など、ワークフローAPIで他のことも試してみたい場合、時間外の保留タスクコンポーネントや、もっと正確には、時間外の承認タスクまたは時間外の否認タスクを確認することができます。さらに、タスクの検証、ワークフローの作成、コンテンツ拡充機能を含んでいる当社サンプルアプリケーションのnuxeo-timeoffのクローンを作成します。

Polymerのテクニック

Polymerの理解が深まってきたところで、役立つテクニックをもう少し紹介いたします。

動作

これは本当に役立ちます。動作を使用してコードを共有するのは便利です。

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

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

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

特にシャドウDOMで、ご自身のスタイルでハードコーディングする手間をかけたくない場合は、カスタムプロパティのスタイリングは役立つでしょう。時間外エントリのユーザがそのユーザのイニシャルのカラーを処理する方法を詳しく見ていきましょう。

目標は、ユーザ名にユニークなカラーを付けることです。ハードコーディングされたカラーの単純な配列を使用して、ユーザ名の簡単なインデックスを計算し、そのカラーを選択すれば、終わりです。しかし、もっと良いやり方があります！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();
},

完全にnuxeo-timoffプラグインで実行したい場合、公開のNuxeoパッケージとして利用できます。インストールし、http://localhost:8080/nuxeo/timeoffをブラウズして、お楽しみください！