on 07-11-2013 1:29 PM
Hi ,
I'm a beginner to SAPUI5 and was trying out some stuff.....
I am unable to navigate between two pages could someone help me out with this...
here is my code....
sap.ui.jsview("myfirstmobile.MobileView", {
getControllerName : function() {
return "myfirstmobile.MobileView";
},
createContent : function(oController) {
// var app = new sap.m.App({initialPage:"idMobileView1"});
this.setHeight("100%");
var flexbox=new sap.m.FlexBox({direction:"Column"});
flexbox.addItem( new sap.m.Input({placeholder:"Enter UserName"}));
flexbox.addItem( new sap.m.Input({placeholder:"Enter Password"}));
flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:alert("are you sure")}));
// flexbox.addItem(alert("hi"));
flexbox.setAlignItems("Center");
flexbox.setJustifyContent("Center");
var page1 =new sap.m.Page("page1",{
title: "LOG IN",
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content:flexbox,
showNavButton: true,
navButtonTap:function(){
this.app.to("page2");
}
});
var page2 =new sap.m.Page("page2",{
title:"CALCULATOR",
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content:[]
} );
app.addPage(page1).addPage(page2);
return app;
}
});
I've also tried using second page in a separate view...but its not working...
Regards,
Prathik
Hi Prathik,
You could use your current code without any views (so code directly in your index.html under your var app = ... statement) and get it to work by changing two things...
from:
flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:alert("are you sure")}));to:
flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:function(){alert("are you sure");}}));
from:
this.app.to("page2");
to:
app.to("page2");
Alternatively you could create two views and return one m.Page from each of your createContent methods, then within the event handler for navButtonTap you can refer to the view ID when calling the app.to method
Hope this helps.
Cheers,
Ian
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
just to be sure it's clear, the first option mentioned above would mean that your index.html file would have code similar to the following between your <script></script> tags
var app = new sap.m.App("myApp",{initialPage:"page1"});
var flexbox=new sap.m.FlexBox({direction:"Column"});
flexbox.addItem( new sap.m.Input({placeholder:"Enter UserName"}));
flexbox.addItem( new sap.m.Input({placeholder:"Enter Password"}));
flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:function(){alert("are you sure");}}));
flexbox.setAlignItems("Center");
flexbox.setJustifyContent("Center");
var page1 =new sap.m.Page("page1",{
title: "LOG IN",
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content:flexbox,
showNavButton: true,
navButtonTap:function(){
app.to("page2");
}
});
var page2 =new sap.m.Page("page2",{
title:"CALCULATOR",
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content:[]
} );
app.addPage(page1).addPage(page2);
app.placeAt("content");
and the second option something like this...
index.html between your <script></script> tags:
sap.ui.localResources("myfirstmobile");
var app = new sap.m.App("myApp",{initialPage:"idMobileView1"});
var page1 = sap.ui.view({id:"idMobileView1", viewName:"myfirstmobile.MobileView", type:sap.ui.core.mvc.ViewType.JS});
var page2 = sap.ui.view({id:"idMobileView2", viewName:"myfirstmobile.MobileView2", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page1).addPage(page2);
app.placeAt("content");
MobileView createContent:
var flexbox=new sap.m.FlexBox({direction:"Column"});
flexbox.addItem( new sap.m.Input({placeholder:"Enter UserName"}));
flexbox.addItem( new sap.m.Input({placeholder:"Enter Password"}));
flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:function(){alert("are you sure");}}));
flexbox.setAlignItems("Center");
flexbox.setJustifyContent("Center");
var page1 =new sap.m.Page("page1",{
title: "LOG IN",
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content:flexbox,
showNavButton: true,
navButtonTap:function(){
app = sap.ui.getCore().byId("myApp");
app.to("idMobileView2");
}
});
return page1;
MobileView2 createContent:
return new sap.m.Page("page2",{
title:"CALCULATOR",
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content:[]
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.