In a previous blog, I explained how to use a Polymer application located in a Nuxeo plugin as a JSF widget via Nuxeo Studio. Today I’ll run through how to create a custom Polymer app using only Nuxeo Studio.
The plugin solution works well for handling complex use cases and augmenting the Nuxeo application with super cool, customized, modern user experiences. However I was unsatisfied with the complexity. For a Studio user, or a web developer, a small amount of Java tooling is necessary to build a Nuxeo Package even for a Polymer application; nonetheless this represents a significant extra learning curve. Our code scaffolding tool helps a lot, but for simple use cases it is still way too much overhead. I wanted something simpler.
Note that for the purposes of brevity I’ll refer to Polymer widgets or dashboards generically as “Polymer apps”. This is technically accurate because what I describe here, even if displayed as a widget or dashboard within a Nuxeo application, is nonetheless it’s own encapsulated Polymer application.
Keys to the Kingdom
The reason it’s possible to define custom Polymer content in Nuxeo Studio is because the Nuxeo Platform already includes some out-of-the-box Polymer apps. Specifically, there are two embedded applications.
The Permissions Tab is an embedded Polymer app:
The Analytics Tabs are also embedded Polymer apps:
The key to taking advantage of these existing features is to import the necessary files from one of these apps via your XHTML template. For example, to use the dependencies for the Permissions tab, the correct imports are:
<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="">
To use the dependencies from the Analytics Tabs, the last line should be changed to:
<nxr:import src="/analytics/elements/elements.vulcanized.html" target="">
These imports provide a Widget or Layout template with the necessary framework for building Polymer apps via Nuxeo Studio.
The difference between the two imports is in the list of available Polymer elements. Both apps provide the necessary framework but each app has a unique set of elements as well (defined in the “elements.vulcanized.html” file). If you’d like to dig deeper and see the list of individual elements I recommend checking out the “elements.html” file for either app. These are located within the “nuxeo.war” folder on your server, and are also accessible on github:
Wiring Things Up
What if you need a little more?
- Install the plugin on your server. - Change the import for “elements.vulcanized.html” to point to “/nuxeo-labs-studio-elements/elements”.
Most of the blogs I’ve written this year relate to Polymer and Web Components in some way so you might be thinking I’m kind of excited about it. It’s true, working with Polymer has been one of the most rewarding experiences of my career.
I’m super stoked that we are able to leverage this technology via Nuxeo Studio and breath new life into the Nuxeo application with modern, responsive content and amazing flexibility.
Another cool advantage to this kind of work is your Polymer skills will be useful for working with the new Nuxeo Web UI, which is Web Component-based using Polymer as well. We definitely live in exciting times for Nuxeo.