In a previous blog, I showcased a Polymer-based chart for our Case Management Platform demo. This time around I’ll explain how that chart is used via Nuxeo Studio, i.e. how to integrate Polymer-based content and still use Nuxeo Studio for configuration. The end result is a nice looking chart in the interface:
Can we Package it in a Box?
In order to use the chart in Nuxeo, it needs to be packaged as a Nuxeo plugin (and therefore a Nuxeo Package for installation). Fortunately generator-nuxeo (our code scaffolding tool) now contains a template for creating Polymer applications. These are the basic steps to building the appropriate scaffolding:
1. Create a multi-module project
2. Create a Polymer subproject
3. Create a Nuxeo package
You can find the Nuxeo Package for our Case Management demo here. The Polymer portion of the package is defined in the nuxeo-cm-demo-elements subfolder.
Template Time!
The package also defines a JSF template to display the chart. This is the secret sauce that makes the chart usable in Nuxeo Studio. Take note of a few important bits:
<h:outputscript src="/bower_components/webcomponentsjs/webcomponents-lite.js" target="">
The above import allows the template to use Web Components.
<nxr:import src="/cm-demo-elements/elements/elements.vulcanized.html" target="">
The above import contains all of the custom Polymer elements that are needed to display the chart, including the chart itself.
`</nxr:import></h:outputscript>