Details
-
Epic
-
Resolution: Done
-
High
-
None
-
None
-
Hybrid app (front) components
Description
Some technical details. First the page structure is something like:
<html> <head> <!-- stuff here --> </head> <body> <ez-platform-ui-app> <ez-navigation-hub active-zone-class="ez-active-zone" matched-link-class="ez-matched-link" active-zone="content" matched-link-url="/proto/location/view/43"> <!-- some server side generated HTML --> </ez-navigation-hub> <div id="app-content"> <ez-toolbar id="discovery" visible> <!-- server side generated code --> <ez-browse select-location-id="42">Browse</ez-browse> </ez-toolbar> <!-- there might be other(s) ez-toolbar(s) --> <ez-server-side-content class="ez-platformui-main-content"> <!-- this tag is different on different page, we will most likely have ez-dashboard, ez-content-edit, ez-trash, ... --> <!-- but they'll probably share some behavior--> <!-- server side generated code --> </ez-server-side-content> </div> </ez-platform-ui-app> </body> </html>
each custom element (starting with ez-) represents a component with specific responsibilities.
Components
App
- Enhance navigation
- tracks click on links and form submit and transforms that into an AJAX request to update the page (including the page title)
- manipulates the browser History so that back and forth buttons are working normally
- (in the prototype but out of the scope of this EPIC) handle browseToContent event (coming from YUI based component to transform PlatformUI 1.x navigation to 2.x)
- (in the prototype but out of the scope of this EPIC) handle contentDiscover event to run the UDW
- (in the prototype but out of the scope of this EPIC) handle click on button with run-udw class to run the UDW
Navigation hub
This component heavily relies on its HTML content. Basically, the editor can click on zones to display links in this zone and of course the editor can also use links to navigate in the app. The update triggered by the navigation can update the active-zone and matched-link-url attributes and the component should react to those updates to highlight the corresponding zone and link.
Toolbar
This is a quite simple component. A toolbar can be visible or hidden. This is handled by the visible attribute.
It contains at least a <ez-browse> custom element which allows to run the UDW to browse to a given Content item.
Main content
The actual logic in the main content custom elements and how it is shared between elements is to be defined. But the very first step is to make sure that when viewing a Content item, the main content element is ez-content-view, when displaying the dashboard is the main content is ez-dashboard and so on. Note, on very simple pages, the main content could also be a regular div.
Deliverable
The deliverable is a running, tested and documented frontend components. Based on it, new features (routes + toolbar(s) + links) can be added to the hybrid UI