hi all ,
i hv been trying from so long to navigate between pages. I have read the links but iam still unable to get it .
iam attaching a piece of code.. please help me out with this code to navigate . so that i could learn from this as iam really a very beginner here.
AppView.js
sap.ui.jsview("final.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 final.App
*/
getControllerName : function() {
return "final.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 final.App
*/
createContent : function(oController) {
var test = [];
var model = new sap.ui.model.json.JSONModel();
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM EMPTBL', [], function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++){
var Row = results.rows.item(i);
// alert(results.rows.item(i).id );
//alert(results.rows.item(i).empname );
// alert(results.rows.item(i).empcity );
var emp = {
Id : Row.id,
Empname : Row.empname,
Empcity : Row.empcity
};
test.push(emp);
var employeeList = {
empList : test
};
model.setData(employeeList);
}
});
app.setModel(model);
});
// create the UI
// create a List control
var list = new sap.m.List({
headerText:"Employee Names"
});
// bind the List items to the data collection
list.bindItems({
path : "/empList",
sorter : new sap.ui.model.Sorter("Id"),
template : new sap.m.StandardListItem({
title: "{Id}",
description: "{Empname}",
type: sap.m.ListType.Navigation,
press:function(evt){
//var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
// detailPage.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
// app.to("DetailPage");
// var bus = sap.ui.getCore().getEventBus();
return new sap.m.Page({
title: "Detail Page",
content : detailPage
});
alert("hello");
// bus.publish("nav", "to", {
//
// id : "detailPage",
// data : {
// bindingcontext : oBindingContext
// }
// });
}
})
});
return new sap.m.Page({
title: "List Page",
content : list
});
}
});
AppContoller.js
sap.ui.controller("final.App", {
onInit : function() {
// create a Database with this data
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS EMPTBL (id unique, empname, empcity)');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (001, "SALMAN", "Mumbai")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (002, "SHARUKH", "Delhi")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (003, "HRITHIK", "Mumbai")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (004, "SAIF", "Lucknow")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (005, "SHAHID", "Mumbai")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (006, "RANBIR", "Pune")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (007, "RANVEER", "JAipur")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (008, "RANDEEP", "Dharmshala")');
tx.executeSql('INSERT INTO EMPTBL (id, empname, empcity) VALUES (009, "AKSHAY", "Jalandhar")');
});
// var view = this.getView();
//
// // to avoid scrollbars on desktop the root view must be set to block display
// view.setDisplayBlock(true);
//
// var oModel = new sap.ui.model.json.JSONModel(data);
// view.setModel(oModel);
//
// // remember the App Control
//this.app = view.byId("theApp");
//
// S
// subscribe to event bus
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("nav", "to", this.navToHandler, this);
bus.subscribe("nav", "back", this.navBackHandler, this);
},
navToHandler : function(channelId, eventId, data) {
if (data && data.id) {
// lazy load view
if (this.app.getPage(data.id) === null) {
jQuery.sap.log.info("now loading page '" + data.id + "'");
this.app.addPage(sap.ui.jsview(data.id, "final." + data.id));
}
// Navigate to given page (include bindingContext)
this.app.to(data.id, data.data.context);
} else {
jQuery.sap.log.error("nav-to event cannot be processed. Invalid data: " + data);
}
},
navBackHandler : function() {
this.app.back();
}
});
DetailPageView.js
sap.ui.jsview("final.DetailPage", {
getControllerName: function() {
return "final.DetailPage";
},
/**
* Creates the UI of this View
*
* @returns {sap.ui.core.Control}
*/
createContent: function(oController) {
var oPage = new sap.m.Page({
title:"Prospecta Employee",
showNavButton:true,
navButtonText: "Employee Details",
navButtonPress : [ oController.backTriggered, oController ]
});
// create the page content structure
var oList = new sap.m.List({headerText: "Employee Details", items:
[
new sap.m.DisplayListItem({label:"ID:",value:"{/id}"}),
new sap.m.DisplayListItem({label:"EmpName:",value:{
path:"/empname",
}}),
new sap.m.DisplayListItem({label:"EmpCity:",value:"{/empcity}"}),
]});
oPage.addContent(oList);
this.addEventDelegate({
onBeforeShow: function(evt) {
this.setBindingContext(evt.data);
}
}, this); // give this (= the View) as additional parameter to make it available inside the delegate's functions as "this" object
return oPage;
}
});
DetailPageController.js
sap.ui.controller("final.DetailPage", {
backTriggered : function(evt) {
var bus = sap.ui.getCore().getEventBus();
bus.publish("nav", "back");
}
});