Hi All,
Just happened to try some hands on SAPUI5. Created a simple SAPUI5 application which just fetches data from public OData service Northwind into a table.
The given application can be used as a starting point to anyone who wants to have a feel of the new framework.
After due diligence, setting up the development environment. Just launched myself onto creating the application. I am pasting the source code for cross reference.
index.html
**********************
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("test16feb");
var view = sap.ui.view({id:"idTest16feb1", viewName:"test16feb.Test16feb", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
*******************************
Controller.js
*****************************
sap.ui.controller("test16feb.Test16feb", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf test16feb.Test16feb
*/
onInit: function() {
var oModelObject = new sap.ui.model.json.JSONModel();
var url = "http://services.odata.org/Northwind/Northwind.svc/Order_Details_Extendeds?$format=json";
oModelObject.loadData(url);
sap.ui.getCore().getElementById("testTbl").setModel(oModelObject);
//
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf test16feb.Test16feb
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf test16feb.Test16feb
*/
//onAfterRendering: function() {
//
},
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf test16feb.Test16feb
*/
// onExit: function() {
//
// }
});
***************************************
View.js
************************************
sap.ui.jsview("test16feb.Test16feb", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf test16feb.Test16feb
*/
getControllerName : function() {
return "test16feb.Test16feb";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf test16feb.Test16feb
*/
createContent : function(oController) {
// Create layout where UI control will be placed
var layout = new sap.ui.commons.layout.MatrixLayout('layout');
layout.setWidth('100%');
// Create table UI
var oTable = new sap.ui.table.Table("testTbl");
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "OrderID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "OrderID")
}
));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "ProductID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "ProductID")
}
));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "ProductName"}),
template: new sap.ui.commons.TextView().bindProperty("text", "ProductName")
}
));
// Data binding into table
oTable.bindRows("/value");
oTable.invalidate();
layout.createRow(oTable);
this.addContent(layout);
}
});
*******************************************
The result: