Shell and ComponentContainer - wridgeu/wridgeu.github.io GitHub Wiki
Instantiation like in UI5 Overview
Shell : "The Shell control can be used as root element of applications. It can contain an App or a SplitApp control. [...]"
ComponentContainer: "Container that embeds a UIComponent in a control tree."
Which file takes care of what?
- Index.html: Shell -> ComponentContainer
- Component.js: rootElement -> rootView
This way we create the Shell and the ComponentContainer ourselves and place them into our HTML Body-Tag.
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({ height: "100%", name: "someName" })
}).placeAt("content");
});
</script>The Body-Tag:
<body class="sapUiBody" id="content"></body>After having done that, we create our rootElement (sap.m.App) within our Component.js in which we then put our rootView (from the manifest.json).
//simplified Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
], function(UIComponent) {
"use strict";
return UIComponent.extend("namespace.testapp.Component", {
metadata: {
manifest: "json"
},
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
},
//create rootElement 'App'
createContent: function(){
return new sap.m.App({id: "someId"});
}
});
});