Hi,
I am trying to develop a small demo application with two views. I have been able to work with the First view well. But on button click, I am unable to display the second view.
My code index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->
<script>
sap.ui.localResources("sapdemo");
var app = new sap.m.App({initialPage:"idApp1"});
var page = sap.ui.view({id:"idApp1", viewName:"sapdemo.App", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application" id="content">
<!--<div id="content"></div>-->
</body>
</html>
App.view.js
sap.ui.jsview("sapdemo.App", {
/** 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 sapdemo.App
*/
getControllerName : function() {
return "sapdemo.App";
},
/** 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 sapdemo.App
*/
createContent : function(oController) {
this.app = new sap.m.App();
var login = sap.ui.xmlview("Login", "sapdemo.Login");
login.getController().Navigator = this.getControllerName();
this.app.addPage(login, true);
var main = sap.ui.xmlview("mainView", "sapdemo.mainView");
main.getController().Navigator = this.getControllerName();
this.app.addPage(main, false);
return this.app;
}
});
App.controller.js
sap.ui.controller("sapdemo.App", {
to:function (pageId, context) {
var app = this.getView().app;
// load page on demand
var login = ("Login" === pageId);
if (app.getPage(pageId, login) === null) {
var page = sap.ui.view({
id : pageId,
viewName : "sapdemo." + pageId,
type : "XML"
});
page.getController().Navigation = this;
app.addPage(page, login);
jQuery.sap.log.info("app controller > loaded page: " + pageId);
}
// show the page
app.to(pageId);
// set data context on the page
if (context) {
var page = app.getPage(pageId);
page.setBindingContext(context);
}
}
});
Login.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sapdemo.Login" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Login" id ="Login">
<content>
<VBox fitContainer="true" justifyContent="Start" alignItems="Start">
<Label id="lblLogin" text="Login" design="Bold" labelFor="inpLogin" />
<Input id="inpLogin" editable="true" value="" maxLength="50"/>
<Label id="lblPWD" text="Password" design="Bold" labelFor="inpPWD"/>
<Input id="inpPWD" type="Password" editable="true" value="" maxLength="20" />
<Button id="bntLogin" text="Login" tap="actLogin" />
</VBox>
</content>
</Page>
</core:View>
Login.controller.js
sap.ui.controller("sapdemo.Login", {
actLogin: function (evt) {
var Id = this.byId("inpLogin").getValue();
var password = this.byId("inpPWD").getValue();
//var oModel = new sap.ui.model.json.JSONModel("data/credentials.json");
//this.getView().setModel(oModel);
//oModel.loadData("data/credentials.json");
//var data = oModel.getData();
//alert(oModel.loadData());
//var data=oModel.loadData();
//alert(Id);
//alert(password);
//alert(data);
if(Id == "Ananya" && password == "password"){
alert("You have logged in!");
var context = evt.getSource().getBindingContext();
if(context!=null || context == "undefined")
this.Navigator.to("mainView", context);
else
alert("BAM!");
}else{
alert("Wrong credentials!");
}
//var context = evt.getSource().getBindingContext();
//this.nav.to("mainView", context);
}
});
mainView.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sapdemo.mainView" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="mainView" id="mainView">
<content>
<App xmlns="sap.m"
id="idMainApp"
height="100%"
width="100%"
visible="true"
defaultTransitionName=""
homeIcon=""
backgroundColor=""
backgroundImage=""
backgroundRepeat="false"
backgroundOpacity="1"
initialPage=""
navigate=""
afterNavigate=""
orientationChange="">
<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
<pages></pages> <!-- sap.ui.core.Control -->
<Label xmlns="sap.m"
id="lbl"
design="Standard"
text="Hello Welcome"
visible="true"
textAlign="Begin"
textDirection="Inherit"
width="100%"
required="false"
labelFor="">
<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
</Label>
</App>
</content>
</Page>
</core:View>
mainView.controller.js
I have not added any code for this.
Component.js
jQuery.sap.declare("SapDemo");
sap.ui.core.UIComponent.extend("SapDemo.Component", {
createContent : function() {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "SapDemo.sapdemo.App",
type : "JS",
viewData : { component : this }
});
// // Using OData model to connect against a real service
// var url = "/proxy/http/<server>:<port>/sap/opu/odata/sap/ZGWSAMPLE_SRV/";
// var oModel = new sap.ui.model.odata.ODataModel(url, true, "<user>", "<password>");
// oView.setModel(oModel);
// Using a local model for offline development
var oModel = new sap.ui.model.json.JSONModel("data/credentials.json");
oView.setModel(oModel);
// done
return oView;
}
});
On debugging, I found that the value of context in the login.controller.js is
null or undefined. I am unable to understand how to give var context = evt.getSource.getBindingSource() and make sure it has values.
Any guidance?