The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of information from the user interaction. This separation facilitates development and the changing of parts independently. In general, when you are implementing the information architecture of an application, it consists of more than one page. Apps are composed of several pages. Based on user interaction, the user will navigate from one view to multiple related views. An example of this is as follows: the user will navigate from an overview view to one or more views where other related types of information are displayed.
The sap.m.App
SAPUI5 supports this pattern by providing the control, sap.m.App. The default type of transition when navigating is "slide". Other predefined options are "fade", "flip", and "show".
The figure illustrates the technical design of the sap.m.App control. sap.m.App inherits the navigation capabilities from the sap.m.NavContainer control. Although the sap.m.App control provides functionality for navigation, it is not recommended that you use this approach for productive applications (see routing).
Typical MVC Approach
The separation of concerns is also a very important concept, even when it comes to implementing SAPUI5 views.
Watch this video to know more about a typical MVC approach.
The index.html File
The starting point of each SAPUI5 application is the index.html file.
The index.html file contains the SAPUI5-bootstrapping implementation. The SAPUI5 bootstrap script in your page initialize SAPUI5 runtime automatically as soon as the script is loaded and executed by the browser. The html-body contains all the necessary implementation details for loading the SAPUI5-component using the namespace.
The App.view.xml File
Each application contains a view implementation that contains the sap.m.App as the central control. This view is shown right after the application has been loaded on the client. As you can see in the following figure, the App.view.xml file contains a sap.ui.core.mvc.View control. The control itself only contains the sap.m.App control with an assigned id.
The description is as follows:
- The App view only contains the empty App tag (1).
- The App view is specified in the Application Descriptor (manifest.json) as the root View that will be opened.
- The pages will be added automatically into the App control according to the current URL by the router.
- The router identifies the App control by means of the id.
- The displayBlock="true" prevents vertical scrollbars appearing with Views that are set to 100% height (2).
Example Page of Carrier.view.xml
As already discussed, it is good practice to separate the different aspects of our application in different view implementations. The following figure shows you a view implementation related to displaying a list of carriers provided by an OData-service.
sap.m.Page provides a basic container for a mobile application screen.
sap.m.Page provides an aggregation with the name content. The aggregation takes to 0..n controls. In the implementation above, an sap.m.Table control is added to the content aggregation for the purposes of displaying a list of entities from the entity set CarrierCollection.