This week we will take a closer look at one of the most important parts of the modern application – mobile adaptation.
In this blog post we will look at:
- Recommended SAPUI5 components
- Application layout options
- Principles of routing realization
- Performance optimization recommendations
Recommended components
We recommend using components out of sap.m library, such as:
- sap.m.App
- sap.m.Page
- sap.m.SplitApp
UI controls originating from “sap.m” automatically adapt themselves to each device’s capabilities and make the most of the available screen “real estate”, as well as providing a different behavior on a mobile device.
Recommended layout
If you have a simple one-screen application, in which it is enough to navigate from one page to another – then you simply create the required number of views and switch (navigate) between them (that is, navigation will occur in one container).
If you have a more complex application, we recommend using the sap.m.SplitApp component – is another possible root element of an SAPUI5 mobile application besides sap.m.App. It contains two NavContainers if running on tablet or desktop, and one for mobile devices. The display of master NavContainer depends on the portrait/landscape mode of the device and the mode of SplitApp. This component also allows you to work in navigation mode in a single container (property mode=”HideMode” – master area is hidden initially both in portrait and landscape). At any time, you can switch back to dual-container mode (property mode=”ShowHideMode” – master will automatically be hidden in portrait mode).
On narrow screens for phones (or tablet devices in portrait mode), the master list and the details are split into two separate pages.
The user can navigate between the list and details, and see all the available information for each area.
When we use sap.m.SplitApp:
- Once you need to review and process different items quickly with minimal navigation overhead
When don’t use sap.m.SplitApp:
- Once you need to offer complex filters for the list of items
- Once you need to see different attributes for each item in the list, and compare these values across items
- Once you want to display a single object. Do not use the master list to display different facets of the same object
Principles of routing realization
First of all, what is routing in SAPUI5?
Routing is a framework feature that allows navigation (transition) from one View (page) to another, app initialization (bootstrap) and injecting views into the application.
In SAPUI5 there are 2 general types of routing:
- single
- multiple
Routing configuration is carried out in the manifest.json file in the section “routing” and binds in the controller of the corresponding View.
In the section “routing” in the subsection “config” you need to define the general properties of routing in the application:
“config” : {
“routerClass” : “sap.m.routing.Router”,
“viewType” : “XML”,
“viewPath” : “path_to_view_folder”,
“controlId” : “main_container_id”,
“controlAggregation” : “pages”,
“transition” : “slide”,
“bypassed” : {
“target” : [ “target_name” ]
}
}
In the “routes” subsection all routings are defined:
“routes” : [
{
“pattern” : “Details”,
“name” : “Details”,
“target” : “Details”
}
],
The subsection “targets” describes which View refers to the name of the routing:
“targets“: {
“Details” : {
“viewType” : “XML”,
“transition” : “slide”,
“clearAggregation” : true,
“viewName” : “DetailPage”,
“viewLevel” : 1
},
}
The last thing to do is to initialize your routing in the controller of the corresponding View in the “onInit()” function and bind method:
onInit : function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute(“Details”).attachPatternMatched(this._onDetailsMatched, this);
},
_onDetailsMatched : function(event) {
}
To execute a routing navigation, you should call the method our of router API:
sap.ui.core.UIComponent.getRouterFor(this).navTo(“Details”);
Now, after each transition on the “Details” routing, the “_onDetailsMatched()” method will be triggered, where you can handle your bootstrap logic.
Performance optimization recommendations
- do not use timeouts ( setTimeout() )
- handle user actions using component events
- do not use “heavy” processing on the UI side (let the backend do the job)
- build the right call chain
- initialize all models in the Init() function of the Component.js file
- perform initialization by default in the standard controller functions – onInit() and onAfterRendering()
- use inheritance in CSS
- when working with methods for determining geolocation – use minimal timeout values in the properties of methods
