Gain a quick impression how things are done with Ui5Strap.
This example shows how the MVC pattern is implemented with Ui5Strap.
The app configuration defines the basic structure of the app.
{
"app" : {
"id" : "mycompany.helloworld",
"name" : "Hello World"
},
"rootNavigation" : {
"module" : "pks.ui5strap.core.NavContainer",
"initialPages" : [
"pageHelloWorld"
]
},
"pages" : [
{
"id" : "pageHelloWorld",
"viewName" : ".view.HelloWorld"
}
]
}
The controller contains the event handlers and helper functions used in the view.
/**
* Simple Controller.
*/
sap.ui.define(['pks/ui5strap/viewer/Controller'], function(Controller){
"use strict";
var controllerImpl = {
onInit : function(){
},
onPressButton : function(oEvent){
alert("Hello, world!");
}
};
//Return constructor
return Controller.extend("mycompany.helloworld.controller.HelloWorld", controllerImpl);
});
The view contains the declarative composition of controls.
<!-- XML Root Node -->
<sapUiCoreMvc:View controllerName="mycompany.helloworld.controller.HelloWorld" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<!-- START Page Content -->
<Container type="Website" class="myContainer">
<!-- Button that triggers the controller event. -->
<Button text="Say Hello" tap=".onPressButton" />
</Container>
<!-- END Page Content -->
</sapUiCoreMvc:View>