Shell

Introduction

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 headerTypes 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.

Example

The example shows the possibilities of the shell. Real application surely are much more complex.

API Documentation

See API documentation