Added anything needed for Step 8 of the Navigation Tutorial; Flip Tra…

…nsition & Nested Views + Binding Context
wridgeu · Mar 24, 2020 · fdea453 · fdea453
1 parent f99257a
commit fdea453
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 4 deletions.
diff --git a/webapp/controller/employee/Employee.controller.js b/webapp/controller/employee/Employee.controller.js
@@ -43,6 +43,13 @@ sap.ui.define([
 			if (!this.getView().getBindingContext()) {
 				this.getRouter().getTargets().display("notFound");
 			}
+		},
+		onShowResume: function (oEvent) {
+			var oCtx = this.getView().getElementBinding().getBoundContext();
+
+			this.getRouter().navTo("employeeResume", {
+				employeeId: oCtx.getProperty("EmployeeID")
+			});
 		}
 	});
 });
diff --git a/webapp/controller/employee/Resume.controller.js b/webapp/controller/employee/Resume.controller.js
@@ -0,0 +1,36 @@
+sap.ui.define([
+	"com/mrb/UI5-Navigation-and-Routing/controller/BaseController"
+], function (
+	BaseController
+) {
+	"use strict";
+	return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.Resume", {
+		onInit: function () {
+			var oRouter = this.getRouter();
+			oRouter.getRoute("employeeResume").attachMatched(this._onRouteMatched, 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");
+			}
+		}
+	});
+});
diff --git a/webapp/i18n/i18n.properties b/webapp/i18n/i18n.properties
@@ -18,4 +18,11 @@ formAddress=Address
 formCity=City
 formPostalCode=Postal Code
 formPhoneHome=Phone (Home)
-formCountry=Country
+formCountry=Country
+ResumeOf=Resume of
+tabInfo=Info
+tabProjects=Projects
+tabHobbies=Hobbies
+tabNotes=Notes
+FlipToResume=Flip to Resume
+FlipToResume.tooltip=See the resume of this employee
diff --git a/webapp/i18n/i18n_en.properties b/webapp/i18n/i18n_en.properties
@@ -18,4 +18,11 @@ formAddress=Address
 formCity=City
 formPostalCode=Postal Code
 formPhoneHome=Phone (Home)
-formCountry=Country
+formCountry=Country
+ResumeOf=Resume of
+tabInfo=Info
+tabProjects=Projects
+tabHobbies=Hobbies
+tabNotes=Notes
+FlipToResume=Flip to Resume
+FlipToResume.tooltip=See the resume of this employee
diff --git a/webapp/manifest.json b/webapp/manifest.json
@@ -103,6 +103,11 @@
 					"pattern": "employees/{employeeId}",
 					"name": "employee",
 					"target": "employee"
+				},
+				{
+					"pattern": "employees/{employeeId}/resume",
+					"name": "employeeResume",
+					"target": "employeeResume"
 				}
 			],
 			"targets": {
@@ -128,6 +133,12 @@
 					"viewId": "employee",
 					"viewName": "employee.Employee",
 					"viewLevel": 3
+				},
+				"employeeResume": {
+					"viewId": "resume",
+					"viewName": "employee.Resume",
+					"viewLevel": 4,
+					"transition": "flip"
 				}
 			}
 		}

diff --git a/webapp/view/employee/Employee.view.xml b/webapp/view/employee/Employee.view.xml
@@ -2,13 +2,14 @@
     xmlns="sap.m" 
     xmlns:mvc="sap.ui.core.mvc" 
     xmlns:f="sap.ui.layout.form" busyIndicatorDelay="0">
-    <Page id="employeePage" title="{i18n>EmployeeDetailsOf} {FirstName} {LastName}" showNavButton="true" navButtonPress=".onNavBack" class="sapUiResponsiveContentPadding">
+    <Page id="employeePage" title="{i18n>formEmployeeDetailsOf} {FirstName} {LastName}" showNavButton="true" navButtonPress=".onNavBack" class="sapUiResponsiveContentPadding">
         <content>
             <Panel id="employeePanel" width="auto" class="sapUiResponsiveMargin sapUiNoContentPadding">
                 <headerToolbar>
                     <Toolbar>
-                        <Title text="{i18n>EmployeeIDColon} {EmployeeID}" level="H2"/>
+                        <Title text="{i18n>formEmployeeIDColon} {EmployeeID}" level="H2"/>
                         <ToolbarSpacer />
+                        <Link text="{i18n>FlipToResume}" tooltip="{i18n>FlipToResume.tooltip}" press=".onShowResume"/>
                     </Toolbar>
                 </headerToolbar>
                 <content>

diff --git a/webapp/view/employee/Resume.view.xml b/webapp/view/employee/Resume.view.xml
@@ -0,0 +1,24 @@
+<mvc:View controllerName="com.mrb.UI5-Navigation-and-Routing.controller.employee.Resume" 
+    xmlns="sap.m" 
+    xmlns:mvc="sap.ui.core.mvc">
+    <Page title="{i18n>ResumeOf} {FirstName} {LastName}" id="employeeResumePage" showNavButton="true" navButtonPress=".onNavBack">
+        <content>
+            <IconTabBar id="iconTabBar" headerBackgroundDesign="Transparent" class="sapUiResponsiveContentPadding" binding="{Resume}">
+                <items>
+                    <IconTabFilter id="infoTab" text="{i18n>tabInfo}" key="Info">
+                        <Text text="{Information}"/>
+                    </IconTabFilter>
+                    <IconTabFilter id="projectsTab" text="{i18n>tabProjects}" key="Projects">
+                        <mvc:XMLView viewName="com.mrb.UI5-Navigation-and-Routing.view.employee.ResumeProjects"></mvc:XMLView>
+                    </IconTabFilter>
+                    <IconTabFilter id="hobbiesTab" text="{i18n>tabHobbies}" key="Hobbies">
+                        <Text text="{Hobbies}"/>
+                    </IconTabFilter>
+                    <IconTabFilter id="notesTab" text="{i18n>tabNotes}" key="Notes">
+                        <Text text="{Notes}"/>
+                    </IconTabFilter>
+                </items>
+            </IconTabBar>
+        </content>
+    </Page>
+</mvc:View>
diff --git a/webapp/view/employee/ResumeProjects.view.xml b/webapp/view/employee/ResumeProjects.view.xml
@@ -0,0 +1,4 @@
+<mvc:View xmlns="sap.m" 
+    xmlns:mvc="sap.ui.core.mvc">
+    <Text text="{Projects}"/>
+</mvc:View>