Hi,
I am practicing example from book "Getting Started with SAP UI5" . I am unable to display the layout even though I copy same code from book. Please guide me if i miss any ?? Below is the code
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"
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("zui5_solution_theming");
var view = sap.ui.view({id:"idtheming1", viewName:"zui5_solution_theming.theming", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
theming.View.js
sap.ui.jsview("zui5_musterloesung_theming.theming", {
/**
* 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 zui5_musterloesung_theming.theming
*/
getControllerName : function() {
return "zui5_musterloesung_theming.theming";
},
/**
* 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 zui5_musterloesung_theming.theming
*/
createContent : function(oController) {
// Layout
var oMatrix = new sap.ui.commons.layout.MatrixLayout({
layoutFixed : true,
width : '800px',
columns : 4,
widths : [ '200px', '200px', '200px', '200px', ]
});
// Buttons to switch Theme
var oButton_sg = new sap.ui.commons.Button("GOLD");
oButton_sg.setText("Goldreflection Theme");
oButton_sg.attachPress(function(oEvent) {
oController.changeTheme(oEvent);
});
var oButton_sp = new sap.ui.commons.Button("PLATIN");
oButton_sp.setText("Platinum Theme");
oButton_sp.attachPress(function(oEvent) {
oController.changeTheme(oEvent);
});
var oButton_sb = new sap.ui.commons.Button("BLUE");
oButton_sb.setText("Blue Crystal");
oButton_sb.attachPress(function(oEvent) {
oController.changeTheme(oEvent);
});
var oButton_sh = new sap.ui.commons.Button("BLACK");
oButton_sh.setText("High Contrast Black");
oButton_sh.attachPress(function(oEvent) {
oController.changeTheme(oEvent);
});
oMatrix.createRow(oButton_sg, oButton_sp, oButton_sb, oButton_sh);
// Small Form to clarify the differences
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
colSpan : 4
});
var oTV = new sap.ui.commons.TextView({
text : 'Contact',
design : sap.ui.commons.TextViewDesign.H1
});
oCell.addContent(oTV);
oMatrix.createRow(oCell);
var oLabel = new sap.ui.commons.Label({
text : 'Name'
});
var oTF = new sap.ui.commons.TextField({
editable : false,
value : 'Doe',
width : '200px'
});
oLabel.setLabelFor(oTF);
oCell = new sap.ui.commons.layout.MatrixLayoutCell();
oMatrix.createRow(oLabel, oTF, oCell, oCell);
oLabel = new sap.ui.commons.Label({
text : 'First name'
});
oTF = new sap.ui.commons.TextField({
editable : false,
value : 'John',
width : '200px'
});
oLabel.setLabelFor(oTF);
oMatrix.createRow(oLabel, oTF);
oLabel = new sap.ui.commons.Label({
text : 'Street, HouseNumber'
});
oTF = new sap.ui.commons.TextField({
editable : true,
value : 'Sample Street',
width : '150px'
});
oLabel.setLabelFor(oTF);
var oTF2 = new sap.ui.commons.TextField({
editable : true,
value : '1',
width : '50px',
maxLength : 5
});
// multiple controls within one cell
oCell = new sap.ui.commons.layout.MatrixLayoutCell();
oCell.addContent(oTF);
oCell.addContent(oTF2);
oMatrix.createRow(oLabel, oCell);
oLabel = new sap.ui.commons.Label({
text : 'City'
});
oTF = new sap.ui.commons.TextField({
editable : true,
value : 'Sample City',
width : '200px'
});
oLabel.setLabelFor(oTF);
oMatrix.createRow(oLabel, oTF);
oLabel = new sap.ui.commons.Label({
text : 'Country'
});
oCB = new sap.ui.commons.TextField({
editable : true,
value : 'Germany',
width : '200px'
});
oLabel.setLabelFor(oCB);
oMatrix.createRow(oLabel, oCB);
oLabel = new sap.ui.commons.Label({
text : 'Birthday'
});
oDP = new sap.ui.commons.DatePicker({
editable : true,
yyyymmdd : 19990909
});
oLabel.setLabelFor(oDP);
oCell = new sap.ui.commons.layout.MatrixLayoutCell();
oMatrix.createRow(oLabel, oDP, oCell, oCell);
return oMatrix;
}
});
theming.Controller.js
sap.ui.controller("zui5_musterloesung_theming.theming", {
changeTheme : function(oEvent) {
var sTheme = oEvent.getSource().getId();
switch(sTheme)
{
case "GOLD":
sTheme = "sap_goldreflection";
break;
case "PLATIN":
sTheme = "sap_platinum";
break;
case "BLUE":
sTheme = "sap_bluecrystal";
break;
case "BLACK":
sTheme = "sap_hcb";
break;
}
sap.ui.getCore().applyTheme(sTheme);
},
/**
* 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 zui5_musterloesung_theming.theming
*/
// onInit: function() {
//
// },
/**
* 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 zui5_musterloesung_theming.theming
*/
// 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 zui5_musterloesung_theming.theming
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_musterloesung_theming.theming
*/
// onExit: function() {
//
// }
});