The Ux3 GoldReflection Shell is an application frame with navigation capabilities.
For the main content navigation worksetItems
are used. These items can have a subitems. So a two-level navigation is possible.
In the content area a control hierarchy (e.g. a MatrixLayout containing form controls) can be displayed.
In the header area some headerItems
can be used, this can be text, buttons or menu buttons.
On the left side of the shell there is a toolbar. It contains a search, inspect and feeder function which can be hidden if needed.
Additionally there other ToolPopups
can be added to have application dependent functions.
Since 1.14, if the ToolPopups added to the toolbar take more space than is available on screen, the toolbar's
width automatically increases to accomodate more items.
The bar on the right side of the screen is called pane-bar.
paneBarItems
can be added to this bar and are displayed as
clickable text. By attaching to the paneBarItemSelected
-Event, the
application can react to user interactions with these items. One example would
be to set the content of the pane associated with the clicked icon by using
setPaneContent
.
Since 1.14, if more items are added to the pane-bar than fit on screen, these additional items
will be added to a menu and a button is rendered at the bottom of the bar which gives access to
said menu.
The method setPaneContent
accepts any control-tree (control or
nested controls), and puts it into the currently active pane in place of the
current content. Please keep the reduced space of the pane in mind when adding
content to it.
The pane is automatically opened or
closed (based on its current state) when the item is clicked. Before opening of
the pane, the event paneBarItemSelected
is fired. After closing the
event paneClosed
is fired.
Please note, that the following setting may not be implemented in every theme.
The shell can be used with different design options that can be changed via the
designType
-property. The standard-design
(sap.ui.ux3.ShellDesignType.Standard
) is set as default, the other
choices are sap.ui.ux3.ShellDesignType.Light
and
sap.ui.ux3.ShellDesignType.Crystal
. Changing the designType
also influences the header (see headerType
-property), as the
standard header of the Light and Crystal designs are smaller than the one of the standard
(dark) design. The other headerType
s are currently not influenced by the
design.
When the designType is set to sap.ui.ux3.ShellDesignType.Light
or
sap.ui.ux3.ShellDesignType.Crystal
, the inverted-state of all
ToolPopup
-controls in the shell is set to false, while it is set to true
otherwise. The inverted state of the ToolPopups is overwritten, even if it was explicitly set
before.
The shell is supposed to be added to a direct child of the BODY
tag of a page and there should be no other parts of the page consuming space outside the Shell.
The example shows the possibilities of the shell. Real application surely are much more complex.