Example project added

webapp/Component.js

@@ -0,0 +1,22 @@
+sap.ui.define([
+	"sap/ui/core/UIComponent"
+], function (UIComponent) {
+	"use strict";
+
+	return UIComponent.extend("sap.ui.demo.nav.Component", {
+
+		metadata: {
+			manifest: "json"
+		},
+
+		init: function () {
+			// call the init function of the parent
+			UIComponent.prototype.init.apply(this, arguments);
+
+			// create the views based on the url/hash
+			this.getRouter().initialize();
+		}
+
+	});
+
+});

webapp/controller/App.controller.js

@@ -0,0 +1,35 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("sap.ui.demo.nav.controller.App", {
+
+		onInit: function () {
+			// This is ONLY for being used within the tutorial.
+			// The default log level of the current running environment may be higher than INFO,
+			// in order to see the debug info in the console, the log level needs to be explicitly
+			// set to INFO here.
+			// But for application development, the log level doesn't need to be set again in the code.
+			jQuery.sap.log.setLevel(jQuery.sap.log.Level.INFO);
+
+			var oRouter = this.getRouter();
+
+			oRouter.attachBypassed(function (oEvent) {
+				var sHash = oEvent.getParameter("hash");
+				// do something here, i.e. send logging data to the backend for analysis
+				// telling what resource the user tried to access...
+				jQuery.sap.log.info("Sorry, but the hash '" + sHash + "' is invalid.", "The resource was not found.");
+			});
+
+			oRouter.attachRouteMatched(function (oEvent){
+				var sRouteName = oEvent.getParameter("name");
+				// do something, i.e. send usage statistics to backend
+				// in order to improve our app and the user experience (Build-Measure-Learn cycle)
+				jQuery.sap.log.info("User accessed route " + sRouteName + ", timestamp = " + new Date().getTime());
+			});
+		}
+
+	});
+
+});

webapp/controller/BaseController.js

@@ -0,0 +1,28 @@
+sap.ui.define([
+	"sap/ui/core/mvc/Controller",
+	"sap/ui/core/routing/History"
+], function (Controller, History) {
+	"use strict";
+
+	return Controller.extend("sap.ui.demo.nav.controller.BaseController", {
+
+		getRouter : function () {
+			return sap.ui.core.UIComponent.getRouterFor(this);
+		},
+
+		onNavBack: function (oEvent) {
+			var oHistory, sPreviousHash;
+
+			oHistory = History.getInstance();
+			sPreviousHash = oHistory.getPreviousHash();
+
+			if (sPreviousHash !== undefined) {
+				window.history.go(-1);
+			} else {
+				this.getRouter().navTo("appHome", {}, true /*no history*/);
+			}
+		}
+
+	});
+
+});

webapp/controller/Home.controller.js

@@ -0,0 +1,25 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("sap.ui.demo.nav.controller.Home", {
+
+		onDisplayNotFound : function (oEvent) {
+			// display the "notFound" target without changing the hash
+			this.getRouter().getTargets().display("notFound", {
+				fromTarget : "home"
+			});
+		},
+
+		onNavToEmployees : function (oEvent){
+			this.getRouter().navTo("employeeList");
+		},
+
+		onNavToEmployeeOverview : function (oEvent) {
+			this.getRouter().navTo("employeeOverview");
+		}
+
+	});
+
+});

webapp/controller/NotFound.controller.js

@@ -0,0 +1,33 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("sap.ui.demo.nav.controller.NotFound", {
+
+		onInit: function () {
+			var oRouter, oTarget;
+
+			oRouter = this.getRouter();
+			oTarget = oRouter.getTarget("notFound");
+			oTarget.attachDisplay(function (oEvent) {
+				this._oData = oEvent.getParameter("data");	// store the data
+			}, this);
+		},
+
+		// override the parent's onNavBack (inherited from BaseController)
+		onNavBack : function (oEvent){
+			// in some cases we could display a certain target when the back button is pressed
+			if (this._oData && this._oData.fromTarget) {
+				this.getRouter().getTargets().display(this._oData.fromTarget);
+				delete this._oData.fromTarget;
+				return;
+			}
+
+			// call the parent's onNavBack
+			BaseController.prototype.onNavBack.apply(this, arguments);
+		}
+
+	});
+
+});

webapp/controller/employee/Employee.controller.js

@@ -0,0 +1,63 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("sap.ui.demo.nav.controller.employee.Employee", {
+
+		onInit: function () {
+			var oRouter = this.getRouter();
+
+			oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);
+
+			// Hint: we don't want to do it this way
+			/*
+			 oRouter.attachRouteMatched(function (oEvent){
+				 var sRouteName, oArgs, oView;
+
+				 sRouteName = oEvent.getParameter("name");
+				 if (sRouteName === "employee"){
+				 	this._onRouteMatched(oEvent);
+				 }
+			 }, this);
+			 */
+
+		},
+
+		_onRouteMatched : function (oEvent) {
+			var oArgs, oView;
+			oArgs = oEvent.getParameter("arguments");
+			oView = this.getView();
+
+			oView.bindElement({
+				path : "/Employees(" + oArgs.employeeId + ")",
+				events : {
+					change: this._onBindingChange.bind(this),
+					dataRequested: function (oEvent) {
+						oView.setBusy(true);
+					},
+					dataReceived: function (oEvent) {
+						oView.setBusy(false);
+					}
+				}
+			});
+		},
+
+		_onBindingChange : function (oEvent) {
+			// No data for the binding
+			if (!this.getView().getBindingContext()) {
+				this.getRouter().getTargets().display("notFound");
+			}
+		},
+
+		onShowResume : function (oEvent) {
+			var oCtx = this.getView().getBindingContext();
+
+			this.getRouter().navTo("employeeResume", {
+				employeeId : oCtx.getProperty("EmployeeID")
+			});
+		}
+
+	});
+
+});

webapp/controller/employee/EmployeeList.controller.js

@@ -0,0 +1,21 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("sap.ui.demo.nav.controller.employee.EmployeeList", {
+
+		onListItemPressed : function(oEvent){
+			var oItem, oCtx;
+
+			oItem = oEvent.getSource();
+			oCtx = oItem.getBindingContext();
+
+			this.getRouter().navTo("employee",{
+				employeeId : oCtx.getProperty("EmployeeID")
+			});
+
+		}
+	});
+
+});

webapp/controller/employee/Resume.controller.js

@@ -0,0 +1,80 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController",
+	"sap/ui/model/json/JSONModel"
+], function (BaseController, JSONModel) {
+	"use strict";
+	var _aValidTabKeys = ["Info", "Projects", "Hobbies", "Notes"];
+
+	return BaseController.extend("sap.ui.demo.nav.controller.employee.Resume", {
+
+		onInit: function () {
+			var oRouter = this.getRouter();
+
+			this.getView().setModel(new JSONModel(), "view");
+			oRouter.getRoute("employeeResume").attachMatched(this._onRouteMatched, this);
+
+		},
+
+		_onRouteMatched : function (oEvent) {
+			var oArgs, oView, oQuery;
+
+			oArgs = oEvent.getParameter("arguments");
+			oView = this.getView();
+
+			oView.bindElement({
+				path : "/Employees(" + oArgs.employeeId + ")",
+				events : {
+					change: this._onBindingChange.bind(this),
+					dataRequested: function (oEvent) {
+						oView.setBusy(true);
+					},
+					dataReceived: function (oEvent) {
+						oView.setBusy(false);
+					}
+				}
+			});
+
+			oQuery = oArgs["?query"];
+			if (oQuery && _aValidTabKeys.indexOf(oQuery.tab) > -1){
+				oView.getModel("view").setProperty("/selectedTabKey", oQuery.tab);
+				// support lazy loading for the hobbies and notes tab
+				if (oQuery.tab === "Hobbies" || oQuery.tab === "Notes"){
+					// the target is either "resumeTabHobbies" or "resumeTabNotes"
+					this.getRouter().getTargets().display("resumeTab" + oQuery.tab);
+				}
+			} else {
+				// the default query param should be visible at all time
+				this.getRouter().navTo("employeeResume", {
+					employeeId : oArgs.employeeId,
+					query: {
+						tab : _aValidTabKeys[0]
+					}
+				},true /*no history*/);
+			}
+		},
+
+		_onBindingChange : function (oEvent) {
+			// No data for the binding
+			if (!this.getView().getBindingContext()) {
+				this.getRouter().getTargets().display("notFound");
+			}
+		},
+
+		/**
+		 * We use this event handler to update the hash in case a new tab is selected.
+		 * @param oEvent
+		 */
+		onTabSelect : function (oEvent){
+			var oCtx = this.getView().getBindingContext();
+
+			this.getRouter().navTo("employeeResume", {
+				employeeId : oCtx.getProperty("EmployeeID"),
+				query: {
+					tab : oEvent.getParameter("selectedKey")
+				}
+			},true /*without history*/);
+		}
+
+	});
+
+});

webapp/controller/employee/overview/EmployeeOverview.controller.js

@@ -0,0 +1,10 @@
+sap.ui.define([
+	"sap/ui/demo/nav/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+
+	return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverview", {
+
+	});
+
+});