When to use Shell, App, Container, Page, View, and SplitApp in SAPUI5

I recently created two SAPUI5 applications using shell-> views and appContainer-> views. Both results have the same result. I am confused when I use Shell and App, Container, Page, View and SplitApp in SAPUI5. I would like to know the differences between Shell, App, Container, Page, View and SplitApp in SAPUI5. Also, please describe the best practices for using the above containers from the experience of cheers. A diagrammatic explanation will help in understanding.

+7
shell containers view sapui5
source share
1 answer

You are right, there are many container controls, and this can be misleading. So let me give you a quick overview:

sap.m.Shell

The shell, without surprise here, is the parent container that you can use for presentations. However, unlike other containers, you can limit the width of the application for large devices. If you want to achieve this for your application, this is your control. This is an example: sap.m.Shell

sap.ui.unified.Shell

The unified shell acts as an extended parent control with additional secondary content on the left side built into the search functions at the top and much more. The unified shell looks like this:

sap.ui.unified.Shell

sap.m.App | sap.m.SplitApp

Both sap.m.App and sap.m.SplitApp are probably the most used parent controls. In fact, one of them should always be part of your mobile application, since it performs some HTML modifications to improve the performance on mobile devices (see jQuery.sap.initMobile for details). Of course, they can be a child of any Shell. They are also important as they extend sap.m.NavContainer and therefore offer navigation capabilities. For example, sap.m.App has pages aggregation. By calling to , you can simply navigate from one page to another (as soon as you use routing, this is done by the router). Sap.m.SplitApp contains two NavContainers. One for the main area and another for the details area. In addition, it offers you to manage one background in your application.

sap.m.SplitContainer

Speaking of containers, sap.m.SplitContainer should be mentioned. Basically, it offers the same features as sap.m.SplitApp, but since your application should have only one application (sap.m.App or sap.m.SplitApp), you can use this control if you want run the wizard / Detailed view as soon as you move deeper in your application.

sap.ui.core.mvc.View

A view (and all its subtypes, such as JSView, XMLView, HTMLView) reflect a single simple page or page area. Unlike all other containers, a view can be associated with a controller and allows you to implement part of the View / Controller MVC.

sap.ui.core.Fragment

Fragments are easy variations of the view. They are used as representations, and they behave similarly, but do not have a controller connected by default. However, if necessary, you can use simple objects with functions as a replacement for the controller. Snippets can be used if you have a certain part of the user interface that you want to display in another file (and possibly reuse it several times).

Examples

As for the architecture of your application, it depends on what you want to display (limited application width, Master / Detail, ...). Almost every combination is possible, but I think it is still best to have only one application object for each application. If you do not need the function of one of the shells, you can simply omit it and make your application object a top-level container. Some examples of architecture may look like this:

SplitApp or SplitContainer in sap.m.Shell

 sap.m.Shell sap.m.SplitApp sap.ui.core.view.XMLView (Master) sap.m.Page sap.ui.core.view.XMLView (Detail) sap.m.Page 

enter image description here


SplitApp or SplitContainer without shell

 sap.m.SplitApp sap.ui.core.view.XMLView (Master) sap.m.Page sap.ui.core.view.XMLView (Detail) sap.m.Page 

enter image description here


sap.m.App in sap.m.Shell

 sap.m.Shell sap.m.App sap.ui.core.view.JSView sap.m.Page 

sap.m.Shell


sap.m.App without shell

 sap.m.App sap.ui.core.view.XMLView sap.m.Page 

enter image description here

+29
source share

All Articles