Web UI Routing Mechanism
The nuxeo-app.html is the very top element of the Web UI.
Its main content is composed of:
- a paper-drawer-panel which has:
- a paper-menu defining the left drawer menu buttons.
- collapsible iron-pages defining the left menu content associated to each menu button.
- a paper-header-panel defining the main content with iron-pages:
<iron-pages id="pages" selected="[[page]]" fallback-selection="error" attr-for-selected="name" selected-attribute="visible" class="flex">
...
<nuxeo-browser name="browse" id="browser" document="[[currentDocument]]" selected-tab="" clipboard="[[clipboard]]"></nuxeo-browser>
...
<nuxeo-collection-results name="collection" id="collectionResults" on-navigate="_navigateFromCollection"></nuxeo-collection-results>
<nuxeo-admin name="admin" user="[[currentUser]]" selected-tab="[[selectedAdminTab]]" entity="[[entity]]"></nuxeo-admin>
...
</iron-pages>
On iron-pages, you can see the selected attributes bound to the page property. When this page property changes its value, the iron-pages will display the content element which has the same name.
For instance, when clicking on a collection in the Collection left menu, it will call the _navigateFromCollection method:
page('/browse' + e.detail.doc.path);
defined by routing.html. It will navigate to the /browse part of the Web UI and therefore display the nuxeo-browser element in the main iron-pages which shows the clicked document.
Routing Behavior
The Nuxeo.RoutingBehavior is a behavior which provides convenient methods such as urlFor to insert inner links in the Web UI.
For instance, nuxeo-document-tree.html which is the navigation tree in the left menu uses urlFor on each tree node to navigate to the associated document.
<a href$="[[urlFor('browse', item.path)]]" class="layout horizontal">
<span><iron-icon icon="icons:chevron-left" class="flex"></iron-icon></span>
<span class="parent">[[item.title]]</span>
</a>
Another example use case of the routing mechanism are:
- the USER_MENU slot
- when adding a new search