Adds Import of UIComponent for Routing

steps/09/README.md

@@ -41,10 +41,10 @@ Finally we call the `createContent` hook method of the component. This method cr
 
 ```ts
 import Control from "sap/ui/core/Control";
-import UIComponent from "sap/ui/core/UIComponent";
 import XMLView from "sap/ui/core/mvc/XMLView";
 import JSONModel from "sap/ui/model/json/JSONModel";
 import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough

steps/10/README.md

@@ -250,4 +250,4 @@ We can now delete our `index.ts` file, because our component is now initiated di
 
 [API Reference: `sap.ui.core.ComponentSupport`](https://sdk.openui5.org/api/sap.ui.core.ComponentSupport)
 
-[Make Your App CSP Compliant](https://sdk.openui5.org/topic/1f81a093a9f3433983dcb2ebe11cd4cd.html "CSP stands for Content Security Policy and is a security standard to prevent cross-site scripting or other code injection attacks.")
+[Make Your App CSP Compliant](https://sdk.openui5.org/topic/1f81a093a9f3433983dcb2ebe11cd4cd.html "CSP stands for Content Security Policy and is a security standard to prevent cross-site scripting or other code injection attacks.")

steps/30/README.md

@@ -233,7 +233,7 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -243,7 +243,7 @@ export default class App extends Controller {
 		…
 
     onPress(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail");
     }    
 };

steps/30/webapp/controller/InvoiceList.controller.ts

@@ -4,7 +4,7 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -32,7 +32,7 @@ export default class App extends Controller {
     }
 
     onPress(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail");
     }
 };

steps/31/README.md

@@ -92,9 +92,9 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
 import Event from "sap/ui/base/Event";
 import ObjectListItem from "sap/m/ObjectListItem";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -106,7 +106,7 @@ export default class App extends Controller {
 
     onPress(event: Event): void {
         const item = event.getSource() as ObjectListItem;
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail", {
             invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substr(1))
         });
@@ -131,7 +131,7 @@ The `bindElement` function is creating a binding context for a OpenUI5 control a
 
 ```ts
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
+import UIComponent from "sap/ui/core/UIComponent";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 
 /**
@@ -140,7 +140,7 @@ import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 

steps/31/webapp/controller/Detail.controller.ts

@@ -1,14 +1,14 @@
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
  */
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 

steps/31/webapp/controller/InvoiceList.controller.ts

@@ -4,7 +4,7 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
+import UIComponent from "sap/ui/core/UIComponent";
 import Event from "sap/ui/base/Event";
 import ObjectListItem from "sap/m/ObjectListItem";
 
@@ -35,7 +35,7 @@ export default class App extends Controller {
 
     onPress(event: Event): void {
         const item = event.getSource() as ObjectListItem;
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail", {
             invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substr(1))
         });

steps/32/README.md

@@ -34,17 +34,17 @@ If no navigation has happened before, we get a reference to the router and use t
 
 ```ts
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
  */
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 
@@ -62,7 +62,7 @@ export default class Detail extends Controller {
         if (previousHash !== undefined) {
             window.history.go(-1);
         } else {
-            const router = (this.getOwnerComponent() as Component).getRouter();
+            const router = UIComponent.getRouterFor(this);
             router.navTo("overview", {}, true);
         }
     }    

steps/32/webapp/controller/Detail.controller.ts

@@ -1,15 +1,15 @@
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
  */
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 
@@ -27,7 +27,7 @@ export default class Detail extends Controller {
         if (previousHash !== undefined) {
             window.history.go(-1);
         } else {
-            const router = (this.getOwnerComponent() as Component).getRouter();
+            const router = UIComponent.getRouterFor(this);
             router.navTo("overview", {}, true);
         }
     }

steps/32/webapp/controller/InvoiceList.controller.ts

@@ -4,9 +4,9 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
 import Event from "sap/ui/base/Event";
 import ObjectListItem from "sap/m/ObjectListItem";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -35,7 +35,7 @@ export default class App extends Controller {
 
     onPress(event: Event): void {
         const item = event.getSource() as ObjectListItem;
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail", {
             invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substr(1))
         });

steps/33/README.md

@@ -307,21 +307,21 @@ In the `onObjectMatched` method, we call the `reset` method to make it possible
 
 ```ts
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
 import MessageToast from "sap/m/MessageToast";
 import ProductRating, { ProductRating$ChangeEvent } from "../control/ProductRating";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
  */
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 
@@ -341,7 +341,7 @@ export default class Detail extends Controller {
         if (previousHash !== undefined) {
             window.history.go(-1);
         } else {
-            const router = (this.getOwnerComponent() as Component).getRouter();
+            const router = UIComponent.getRouterFor(this);
             router.navTo("overview", {}, true);
         }
     }    

steps/33/webapp/controller/Detail.controller.ts

@@ -1,19 +1,19 @@
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
 import MessageToast from "sap/m/MessageToast";
 import ProductRating, { ProductRating$ChangeEvent } from "../control/ProductRating";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
  */
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 
@@ -33,7 +33,7 @@ export default class Detail extends Controller {
         if (previousHash !== undefined) {
             window.history.go(-1);
         } else {
-            const router = (this.getOwnerComponent() as Component).getRouter();
+            const router = UIComponent.getRouterFor(this);
             router.navTo("overview", {}, true);
         }
     }

steps/33/webapp/controller/InvoiceList.controller.ts

@@ -4,9 +4,9 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
 import Event from "sap/ui/base/Event";
 import ObjectListItem from "sap/m/ObjectListItem";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -35,7 +35,7 @@ export default class App extends Controller {
 
     onPress(event: Event): void {
         const item = event.getSource() as ObjectListItem;
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail", {
             invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substr(1))
         });

steps/34/webapp/controller/Detail.controller.ts

@@ -1,19 +1,19 @@
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
 import MessageToast from "sap/m/MessageToast";
 import ProductRating, { ProductRating$ChangeEvent } from "../control/ProductRating";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
  */
 export default class Detail extends Controller {
 
     onInit(): void {
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 
@@ -33,7 +33,7 @@ export default class Detail extends Controller {
         if (previousHash !== undefined) {
             window.history.go(-1);
         } else {
-            const router = (this.getOwnerComponent() as Component).getRouter();
+            const router = UIComponent.getRouterFor(this);
             router.navTo("overview", {}, true);
         }
     }

steps/34/webapp/controller/InvoiceList.controller.ts

@@ -4,9 +4,9 @@ import { SearchField$SearchEvent } from "sap/m/SearchField";
 import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import ListBinding from "sap/ui/model/ListBinding";
-import Component from "../Component";
 import Event from "sap/ui/base/Event";
 import ObjectListItem from "sap/m/ObjectListItem";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -35,7 +35,7 @@ export default class App extends Controller {
 
     onPress(event: Event): void {
         const item = event.getSource() as ObjectListItem;
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.navTo("detail", {
             invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substr(1))
         });

steps/35/README.md

@@ -119,14 +119,14 @@ In the `Detail` controller we simply add the view model with our currency defini
 
 ```ts
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
 import MessageToast from "sap/m/MessageToast";
 import ProductRating, { ProductRating$ChangeEvent } from "../control/ProductRating";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import ResourceModel from "sap/ui/model/resource/ResourceModel";
 import JSONModel from "sap/ui/model/json/JSONModel";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -139,7 +139,7 @@ export default class Detail extends Controller {
         });
         this.getView().setModel(viewModel, "view");
 
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 		…

steps/35/webapp/controller/Detail.controller.ts

@@ -1,12 +1,12 @@
 import Controller from "sap/ui/core/mvc/Controller";
-import Component from "../Component";
 import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
 import History from "sap/ui/core/routing/History";
 import MessageToast from "sap/m/MessageToast";
 import ProductRating, { ProductRating$ChangeEvent } from "../control/ProductRating";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import ResourceModel from "sap/ui/model/resource/ResourceModel";
 import JSONModel from "sap/ui/model/json/JSONModel";
+import UIComponent from "sap/ui/core/UIComponent";
 
 /**
  * @namespace ui5.walkthrough.controller
@@ -19,7 +19,7 @@ export default class Detail extends Controller {
         });
         this.getView().setModel(viewModel, "view");
 
-        const router = (this.getOwnerComponent() as Component).getRouter();
+        const router = UIComponent.getRouterFor(this);
         router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
     }
 
@@ -39,7 +39,7 @@ export default class Detail extends Controller {
         if (previousHash !== undefined) {
             window.history.go(-1);
         } else {
-            const router = (this.getOwnerComponent() as Component).getRouter();
+            const router = UIComponent.getRouterFor(this);
             router.navTo("overview", {}, true);
         }
     }