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-listbox 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]]" attr-for-selected="name" selected-attribute="visible">
<nuxeo-slot slot="PAGES" model="[[actionContext]]"></nuxeo-slot>
<nuxeo-home name="home" tasks="[[tasks]]"></nuxeo-home>
<nuxeo-browser name="browse" id="browser" document="[[currentDocument]]" selected-tab="" clipboard="[[clipboard]]"></nuxeo-browser>
<nuxeo-search-results name="search" id="searchResults" search-form="[[searchForm]]"></nuxeo-search-results>
...
</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, on nuxeo-home, when clicking a recently viewed document, it will call the navigateTo method
this.navigateTo('browse', detail.doc.path);
defined on Nuxeo.RoutingBehavior. 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