Header and Bootstrap
In the header, we have the HTML5 document type declaration, and a couple of meta tags. One that instructs Internet Explorer to use the newest rendering mode; for UI5 mobile this would be in preparation for future IE support, for UI5 desktop this is required to make sure IE does not use a compatibility mode. The other is to declare that the character set used in the app is UTF8 (change this if required to whatever is necessary).
We also have the UI5 bootstrap; in this example we have the so-called “standard variant”, pulling in the UI5 core from wherever it is normally served. With the bootstrap there are some data parameters. These parameters serve to load the sap.m library, so that we can specify the sap.m.Shell control later on (data-sap-ui-libs), declare the theme to be “Blue Crystal” (data-sap-ui-theme), set up the extended syntax for calculated fields in property bindings (data-sap-ui-xx-bindingSyntax) and, finally, where the resources, or artifacts, can be found (data-sap-ui-resourceroots - see below for more information on this).
The Application Startup
Once the UI5 core has been loaded in the bootstrap, we start the application on the Init event via sap.ui.getCore().attachInit. Starting our app involves instantiating an sap.ui.core.ComponentContainer and placing it inside an sap.m.Shell in the body of our HTML document. Note that we’re using the “content” id directly on the HTML element, rather than in a child
element.
The use of the Shell is to control the width of the app on the desktop. On particularly large monitors, a full-width rendering of an application would be too wide. Placing the app’s core inside a Shell container will give you appropriate left and right vertical margins.
