概要
前のブログでは、Nuxeo Studioを介してJSFウィジェットとしてNuxeoプラグインにあるPolymerアプリケーションを使用する方法を説明しました。今日は、Nuxeo Studioのみを使用してカスタムPolymerアプリを作成する方法を説明します。
プラグインソリューションは、複雑な使用例を処理し、超クールな、カスタマイズされた、先進的なユーザエクスペリエンスを持つNuxeoアプリケーションを拡張するのに適しています。しかし、私はその複雑さには満足できませんでした。Studioユーザやウェブ開発者の場合、Polymerアプリケーション用でもNuxeo Packageを構築する際にJavaツールが若干必要となります。これにはかなりの余分な学習曲線を伴います。当社のコードスキャフォールディングツールは多くのことができますが、簡単な使用例の場合には、依然としてオーバヘッドが多すぎます。作業をもっと簡単にしたいと思っていました。
簡潔にするために、Polymerウィジェットやダッシュボードを一般的に「Polymerアプリ」と呼びますので、注意してください。Nuxeoアプリケーション内のウィジェットやダッシュボードとして表示されている場合でも、ここで説明するものは、独自のカプセル化されたPolymerアプリケーションですので、これは技術的に正確です。
「王国の鍵」
Nuxeo StudioでカスタムPolymerコンテンツの定義が可能な理由は、Nuxeo Content Services Platformに新規の設定をすることなく使用できるPolymerアプリがすでに組み込まれているからです。具体的には、2つのアプリケーションが組み込まれています。
許可 許可タブは、組み込みのPolymerアプリです。
アナリティクス アナリティクスタブも組み込みのPolymerアプリです。
再利用可能なリソース これらの既存の機能を利用する鍵は、XHTMLテンプレートを介してこれらのアプリの1つから必要なファイルをインポートすることです。例えば、許可タブの依存関係を使用するのに適切なインポート：
<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="">
アナリティクスタブから依存関係を使用するには、最後のラインを変更する必要があります。
<nxr:import src="/analytics/elements/elements.vulcanized.html" target="">
これらのインポートは、Nuxeo Studioを介してPolymerアプリを構築する際に必要なフレームワークをウィジェットやレイアウトのテンプレートに提供します。
この2つのインポートの違いは、利用できるPolymer要素のリストにあります。これら2つのアプリは、必要なフレームワークを提供しますが、各アプリは、独自の要素セットも持っています（「elements.vulcanized.html」ファイルで定義されています）。さらに詳しく個々の要素のリストを確認したい場合、どちらかのアプリの「elements.html」ファイルを調べることをお勧めします。これらは、サーバ上の「nuxeo.war」フォルダ内にあり、githubでもアクセスできます。
相互に接続
プラグインベースのソリューションとこのソリューションの最大の違いは、XHTMLテンプレートがPolymerアプリ用にすべてのもの（例えば、同じファイルにCSS、HTML、JavaScriptの全部）を含める必要があるかどうかです。次は、リポジトリのコンテンツ分布円グラフを表示するレイアウトの例です。
` <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> `
ご覧のように、この単一のHTMLテンプレートには、アプリの使い勝手を管理するCSS、Poliymerコンテンツを相互に接続するHTML、呼び出しでnuxeo-repository-data要素に戻されたデータを整えるJavaScriptが含まれます。
さらに具体的な例がこちらでご覧になれます。この例では、ホームの下で新しいタブとしてダッシュボードが追加されます。
お役立ち情報
どのようなウィジェットが利用できるか？
どちらかのアプリの「elements.html」ファイルを調べることをお勧めします。これらは、サーバ上の「nuxeo.war」フォルダ内、またはgithubにあります。
Ajaxタブを無効にする
Ajaxのサポートを有効にすると、JSFはDOMツリーへの破壊的な変更を行うので、PolymerアプリをJSFと統合することには注意が必要ですこうした理由から、Polymerのコンテンツが含まれているタブ用のAjaxサポートを無効にすることをお勧めします。例えば、「DomainSummary」というタブの場合、このXMLの拡張はAjaxサポートを無効にします。
<extension target="org.nuxeo.ecm.platform.actions.ActionService" point="actions"><action id="DomainSummary"><properties><property name="ajaxSupport">false</property></properties></action></extension>
もう少し詳しく知りたい場合は？
nuxeo-labs-studio-elementsを調べてください。このプラグインには、Polymer要素の拡張ライブラリ（Google Chart）があります。それを使うには、調整が必要です。
- サーバ上のプラグインをインストールする - 「/nuxeo-labs-studio-elements/elements」を指示するために、「elements.vulcanized.html」のインポートを変更する
まとめ
今年投稿したブログの多くは、Polymerとウェブコンポーネントに関するもので、私がこの分野に熱中していたことにお気づきかもしれません。確かに、Polymerでの作業は、私の職業経験からしても非常に報われるものでした。
Nuxeo Studioを介してこの技術を活用し、先端的な双方向性のコンテンツや驚くほどの柔軟性でNuxeoアプリケーションに新しい生命を吹き込むことができるので、興奮しています。
他にも、このような作業のクールなメリットには、PolymerのスキルがPolymerを使用するウェブコンポーネントベースである新しいNuxeo Web UIで作業する際に役立つことが挙げられます。Nuxeoがエキサイティングな時を迎えたのは間違いありません。</nxr:import></nxr:import></h:outputscript></h:outputscript>