From 9c0c5df598ad80a5c6927f6d07ff7cea7e08a341 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Mon, 30 Jun 2025 17:11:24 +0200 Subject: [PATCH] docs: cleanup of JS code snippets --- README.md | 6 ++--- steps/05/README.md | 2 +- steps/06/README.md | 2 +- steps/07/README.md | 4 ++-- steps/08/README.md | 4 ++-- steps/09/README.md | 6 ++--- steps/10/README.md | 2 +- steps/15/README.md | 2 +- steps/16/README.md | 4 ++-- steps/17/README.md | 6 ++--- steps/20/README.md | 2 +- steps/22/README.md | 3 +-- steps/23/README.md | 4 ++-- steps/26/README.md | 29 ++++------------------- steps/27/README.md | 9 ++----- steps/28/README.md | 7 +----- steps/30/README.md | 4 ++-- steps/31/README.md | 6 ++--- steps/32/README.md | 2 +- steps/33/README.md | 22 ++++++++--------- steps/35/README.md | 4 ++-- steps/36/README.md | 6 ++--- steps/38/webapp/view/InvoiceList.view.xml | 7 ------ 23 files changed, 52 insertions(+), 91 deletions(-) diff --git a/README.md b/README.md index 52351cc5..1eba22ca 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Please edit this file as it is the primary description file for your project. Yo [![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5-typescript-walkthrough)](https://api.reuse.software/info/github.com/SAP-samples/ui5-typescript-walkthrough) -# OpenUI5 TypeScript Walkthrough +# OpenUI5 Walkthrough In this tutorial we'll introduce you to all major development paradigms of OpenUI5.
This section is relevant for TypeScript onlyWe'll also demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.
@@ -52,7 +52,7 @@ The tutorial consists of the following steps. To start, just open the first link - **[Step 11: Pages and Panels](steps/11/README.md "After all the work on the app structure it’s time to improve the look of our app. We will use two controls from the sap.m library to add a bit more "bling" to our UI. You will also learn about control aggregations in this step.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/11/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11-js.zip)
) - **[Step 12: Shell Control as Container](steps/12/README.md "Now we use a shell control as container for our app and use it as our new root element. The shell takes care of visual adaptation of the application to the device’s screen size by introducing a so-called letterbox on desktop screens.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/12/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12-js.zip)
) - **[Step 13: Margins and Paddings](steps/13/README.md "Our app content is still glued to the corners of the letterbox. To fine-tune our layout, we can add margins and paddings to the controls that we added in the previous step. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/13/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13-js.zip)
) -- **[Step 14: Custom CSS and Theme Colors](steps/14/README.md "Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html) |
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip)
) +- **[Step 14: Custom CSS and Theme Colors](steps/14/README.md "Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip)
) - **[Step 15: Nested Views](steps/15/README.md "Our panel content is getting more and more complex and now it is time to move the panel content to a separate view. With that approach, the application structure is much easier to understand, and the individual parts of the app can be reused.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/15/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15-js.zip)
) - **[Step 16: Dialogs and Fragments](steps/16/README.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/16/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16-js.zip)
) - **[Step 17: Fragment Callbacks](steps/17/README.md "Now that we have integrated the dialog, it's time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/17/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17-js.zip)
) @@ -69,7 +69,7 @@ The tutorial consists of the following steps. To start, just open the first link - **[Step 28: Integration Test with OPA](steps/28/README.md "If we want to test interaction patterns or more visual features of our app, we can also write an integration test. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28-js.zip)
) - **[Step 29: Debugging Tools](steps/29/README.md "Even though we have added a basic test coverage in the previous steps, it seems like we accidentally broke our app, because it does not display prices to our invoices anymore. We need to debug the issue and fix it before someone finds out.")** (*code remains unchanged from the previous step*) - **[Step 30: Routing and Navigation](steps/30/README.md "So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/30/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30-js.zip)
) -- **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/31/test/mockServer-cdn.html) |
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip)
) +- **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/31/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip)
) - **[Step 32: Routing Back and History](steps/32/README.md "Now we can navigate to our detail page and display an invoice, but we cannot go back to the overview page yet. We'll add a back button to the detail page and implement a function that shows our overview page again.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/32/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32-js.zip)
) - **[Step 33: Custom Controls](steps/33/README.md "In this step, we are going to extend the functionality of OpenUI5 with a custom control. We want to rate the product shown on the detail page, so we create a composition of multiple standard controls using the OpenUI5 extension mechanism and add some glue code to make them work nicely together. This way, we can reuse the control across the app and keep all related functionality in one module.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/33/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33-js.zip)
) - **[Step 34: Responsiveness](steps/34/README.md "In this step, we improve the responsiveness of our app. OpenUI5 applications can be run on phone, tablet, and desktop devices and we can configure the application to make best use of the screen estate for each scenario. Fortunately, OpenUI5 controls like the sap.m.Table already deliver a lot of features that we can use.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/34/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34-js.zip)
) diff --git a/steps/05/README.md b/steps/05/README.md index 74dcaa9a..29bcda5d 100644 --- a/steps/05/README.md +++ b/steps/05/README.md @@ -58,7 +58,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) { "use strict"; const AppController = Controller.extend("ui5.walkthrough.controller.App", { - onShowHello: function _onShowHello() { + onShowHello() { // show a native JavaScript alert alert("Hello World"); } diff --git a/steps/06/README.md b/steps/06/README.md index c48f1e2a..1ba8344d 100644 --- a/steps/06/README.md +++ b/steps/06/README.md @@ -59,7 +59,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller"], function (Me * @name ui5.walkthrough.controller.App */ const AppController = Controller.extend("ui5.walkthrough.controller.App", { - onShowHello: function _onShowHello() { + onShowHello() { MessageToast.show("Hello World"); } }); diff --git a/steps/07/README.md b/steps/07/README.md index d3311cce..d832f479 100644 --- a/steps/07/README.md +++ b/steps/07/README.md @@ -74,7 +74,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model "use strict"; const AppController = Controller.extend("ui5.walkthrough.controller.App", { - onInit: function _onInit() { + onInit() { // set data model on view const data = { recipient: { @@ -84,7 +84,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model const dataModel = new JSONModel(data); this.getView()?.setModel(dataModel); }, - onShowHello: function _onShowHello() { + onShowHello() { MessageToast.show("Hello World"); } }); diff --git a/steps/08/README.md b/steps/08/README.md index 2f697b24..99f080d8 100644 --- a/steps/08/README.md +++ b/steps/08/README.md @@ -101,7 +101,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model "use strict"; const AppController = Controller.extend("ui5.walkthrough.controller.App", { - onInit: function _onInit() { + onInit() { // set data model on view const data = { recipient: { @@ -117,7 +117,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model }); this.getView()?.setModel(i18nModel, "i18n"); }, - onShowHello: function _onShowHello() { + onShowHello() { // read msg from i18n model const recipient = this.getView()?.getModel()?.getProperty("/recipient/name"); const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle(); diff --git a/steps/09/README.md b/steps/09/README.md index 93bac191..a6fbe772 100644 --- a/steps/09/README.md +++ b/steps/09/README.md @@ -101,7 +101,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/mvc/XMLView", "sap/ui/mod metadata: { "interfaces": ["sap.ui.core.IAsyncContentCreation"] }, - init: function _init() { + init() { // call the init function of the parent UIComponent.prototype.init.call(this); // set data model @@ -119,7 +119,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/mvc/XMLView", "sap/ui/mod }); this.setModel(i18nModel, "i18n"); }, - createContent: function _createContent() { + createContent() { return XMLView.create({ "viewName": "ui5.walkthrough.view.App", "id": "app" @@ -170,7 +170,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller"], function (Me * @name ui5.walkthrough.controller.App */ const AppController = Controller.extend("ui5.walkthrough.controller.App", { - onShowHello: function _onShowHello() { + onShowHello() { // read msg from i18n model // functions with generic return values require casting const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle(); diff --git a/steps/10/README.md b/steps/10/README.md index 31357ee1..0717b4f3 100644 --- a/steps/10/README.md +++ b/steps/10/README.md @@ -205,7 +205,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"], functi "interfaces": ["sap.ui.core.IAsyncContentCreation"], "manifest": "json" }, - init: function _init() { + init() { // call the init function of the parent UIComponent.prototype.init.call(this); diff --git a/steps/15/README.md b/steps/15/README.md index 90133e31..c187ab60 100644 --- a/steps/15/README.md +++ b/steps/15/README.md @@ -66,7 +66,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co "use strict"; const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", { - onShowHello: function _onShowHello() { + onShowHello() { // read msg from i18n model const recipient = this.getView()?.getModel()?.getProperty("/recipient/name"); const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle(); diff --git a/steps/16/README.md b/steps/16/README.md index 2d405599..3f4a2889 100644 --- a/steps/16/README.md +++ b/steps/16/README.md @@ -93,10 +93,10 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co "use strict"; const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", { - onShowHello: function _onShowHello() { + onShowHello() { ... }, - onOpenDialog: async function _onOpenDialog() { + async onOpenDialog() { this.dialog ??= await this.loadFragment({ name: "ui5.walkthrough.view.HelloDialog" }); diff --git a/steps/17/README.md b/steps/17/README.md index c1fc953e..1bffdd73 100644 --- a/steps/17/README.md +++ b/steps/17/README.md @@ -73,7 +73,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co "use strict"; const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", { - onShowHello: function _onShowHello() { + onShowHello() { // read msg from i18n model const recipient = this.getView()?.getModel()?.getProperty("/recipient/name"); const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle(); @@ -81,13 +81,13 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co // show message MessageToast.show(msg); }, - onOpenDialog: async function _onOpenDialog() { + async onOpenDialog() { this.dialog ??= await this.loadFragment({ name: "ui5.walkthrough.view.HelloDialog" }); this.dialog.open(); }, - onCloseDialog: function _onCloseDialog() { + onCloseDialog() { this.byId("helloDialog")?.close(); } }); diff --git a/steps/20/README.md b/steps/20/README.md index 08a3cb0f..e8250a7d 100644 --- a/steps/20/README.md +++ b/steps/20/README.md @@ -60,7 +60,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"], fun "use strict"; const App = Controller.extend("ui5.walkthrough.controller.App", { - onInit: function _onInit() { + onInit() { const viewModel = new JSONModel({ currency: "EUR" }); diff --git a/steps/22/README.md b/steps/22/README.md index 39683e0a..31c09573 100644 --- a/steps/22/README.md +++ b/steps/22/README.md @@ -80,7 +80,7 @@ export default { sap.ui.define([], function () { "use strict"; - var __exports = { + return { statusText: function (status) { const resourceBundle = this?.getOwnerComponent()?.getModel("i18n")?.getResourceBundle(); switch (status) { @@ -95,7 +95,6 @@ sap.ui.define([], function () { } } }; - return __exports; }); ``` diff --git a/steps/23/README.md b/steps/23/README.md index 14beaa5f..a8f4052b 100644 --- a/steps/23/README.md +++ b/steps/23/README.md @@ -85,13 +85,13 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap "use strict"; const App = Controller.extend("ui5.walkthrough.controller.App", { - onInit: function _onInit() { + onInit() { const viewModel = new JSONModel({ currency: "EUR" }); this.getView()?.setModel(viewModel, "view"); }, - onFilterInvoices: function _onFilterInvoices(event) { + onFilterInvoices(event) { // build filter array const filter = []; const query = event.getParameter("query"); diff --git a/steps/26/README.md b/steps/26/README.md index c1513031..629664a1 100644 --- a/steps/26/README.md +++ b/steps/26/README.md @@ -182,7 +182,7 @@ export default { sap.ui.define(["sap/ui/core/util/MockServer"], function (MockServer) { "use strict"; - var __exports = { + return { init: function () { // create const mockServer = new MockServer({ @@ -204,7 +204,6 @@ sap.ui.define(["sap/ui/core/util/MockServer"], function (MockServer) { mockServer.start(); } }; - return __exports; }); ``` @@ -227,34 +226,14 @@ import("sap/ui/core/ComponentSupport"); ``` ```js -sap.ui.define(["../localService/mockserver"], function (__mockserver) { +sap.ui.define(["../localService/mockserver"], function (mockserver) { "use strict"; - function _interopRequireDefault(obj) { - return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj; - } - function __ui5_require_async(path) { - return new Promise(function (resolve, reject) { - sap.ui.require([path], function (module) { - if (!(module && module.__esModule)) { - module = module === null || !(typeof module === "object" && path.endsWith("/library")) ? { - default: module - } : module; - Object.defineProperty(module, "__esModule", { - value: true - }); - } - resolve(module); - }, function (err) { - reject(err); - }); - }); - } - const mockserver = _interopRequireDefault(__mockserver); // initialize the mock server +// initialize the mock server mockserver.init(); // initialize the embedded component on the HTML page - __ui5_require_async("sap/ui/core/ComponentSupport"); + sap.ui.require(["sap/ui/core/ComponentSupport"]); }); ``` diff --git a/steps/27/README.md b/steps/27/README.md index bfa66bf5..ef05919b 100644 --- a/steps/27/README.md +++ b/steps/27/README.md @@ -91,13 +91,9 @@ QUnit.test("Should return the translated texts", (assert) => { ``` ```js -sap.ui.define(["sap/ui/model/resource/ResourceModel", "ui5/walkthrough/model/formatter"], function (ResourceModel, __formatter) { +sap.ui.define(["sap/ui/model/resource/ResourceModel", "ui5/walkthrough/model/formatter"], function (ResourceModel, formatter) { "use strict"; - function _interopRequireDefault(obj) { - return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj; - } - const formatter = _interopRequireDefault(__formatter); QUnit.module("Formatting function", {}); QUnit.test("Should return the translated texts", assert => { const resourceModel = new ResourceModel({ @@ -223,7 +219,7 @@ export default { sap.ui.define([], function () { "use strict"; - var __exports = { + return { name: "QUnit test suite for UI5 TypeScript Walkthrough", defaults: { page: "ui5://test-resources/ui5/walkthrough/Test.qunit.html?testsuite={suite}&test={name}", @@ -245,7 +241,6 @@ sap.ui.define([], function () { } } }; - return __exports; }); ``` diff --git a/steps/28/README.md b/steps/28/README.md index afe14de2..72cc4232 100644 --- a/steps/28/README.md +++ b/steps/28/README.md @@ -167,13 +167,9 @@ opaTest("Should open the Hello dialog", function () { ``` ```js -sap.ui.define(["sap/ui/test/opaQunit", "./pages/HelloPanelPage"], function (opaTest, __HelloPanelPage) { +sap.ui.define(["sap/ui/test/opaQunit", "./pages/HelloPanelPage"], function (opaTest, HelloPanelPage) { "use strict"; - function _interopRequireDefault(obj) { - return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj; - } - const HelloPanelPage = _interopRequireDefault(__HelloPanelPage); const onTheHelloPanelPage = new HelloPanelPage(); QUnit.module("Navigation"); opaTest("Should open the Hello dialog", function () { @@ -248,7 +244,6 @@ sap.ui.define([], function () { } } }; - return __exports; }); ``` diff --git a/steps/30/README.md b/steps/30/README.md index 2b7445be..4d42d160 100644 --- a/steps/30/README.md +++ b/steps/30/README.md @@ -226,7 +226,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"], functi "interfaces": ["sap.ui.core.IAsyncContentCreation"], "manifest": "json" }, - init: function _init() { + init() { // call the init function of the parent UIComponent.prototype.init.call(this); @@ -290,7 +290,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap //... - onPress: function _onPress() { + onPress() { const router = UIComponent.getRouterFor(this); router.navTo("detail"); } diff --git a/steps/31/README.md b/steps/31/README.md index fe3bfa78..6a05c784 100644 --- a/steps/31/README.md +++ b/steps/31/README.md @@ -131,7 +131,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap //... - onPress: function _onPress(event) { + onPress(event) { const item = event.getSource(); const router = UIComponent.getRouterFor(this); router.navTo("detail", { @@ -188,11 +188,11 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/UIComponent"], functio "use strict"; const Detail = Controller.extend("ui5.walkthrough.controller.Detail", { - onInit: function _onInit() { + onInit() { const router = UIComponent.getRouterFor(this); router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this); }, - onObjectMatched: function _onObjectMatched(event) { + onObjectMatched(event) { this.getView().bindElement({ path: "/" + window.decodeURIComponent(event.getParameter("arguments").invoicePath), model: "invoice" diff --git a/steps/32/README.md b/steps/32/README.md index b89ac6ee..81d9faf9 100644 --- a/steps/32/README.md +++ b/steps/32/README.md @@ -76,7 +76,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/routing/History", "sap const Detail = Controller.extend("ui5.walkthrough.controller.Detail", { //... - onNavBack: function _onNavBack() { + onNavBack() { const history = History.getInstance(); const previousHash = history.getPreviousHash(); if (previousHash !== undefined) { diff --git a/steps/33/README.md b/steps/33/README.md index 046c7636..0e2be815 100644 --- a/steps/33/README.md +++ b/steps/33/README.md @@ -129,7 +129,7 @@ sap.ui.define(["sap/ui/core/Control"], function (Control) { render: (rm, control) => { } }, metadata: {}, - init: function _init() {}, + init() {}, }); ; return ProductRating; @@ -357,10 +357,10 @@ sap.ui.define(["sap/ui/core/Control", "sap/m/Label", "sap/m/Button", "sap/m/Rati } } }, - constructor: function _constructor(id, settings) { + constructor(id, settings) { Control.prototype.constructor.call(this, id, settings); }, - init: function _init() { + init() { this.setAggregation("_rating", new RatingIndicator({ value: this.getValue(), iconSize: "2rem", @@ -374,12 +374,12 @@ sap.ui.define(["sap/ui/core/Control", "sap/m/Label", "sap/m/Button", "sap/m/Rati press: this._onSubmit.bind(this) }).addStyleClass("sapUiTinyMarginTopBottom")); }, - setValue: function _setValue(value) { + setValue(value) { this.setProperty("value", value, true); this.getAggregation("_rating").setValue(value); return this; }, - reset: function _reset() { + reset() { const resourceBundle = this?.getModel("i18n")?.getResourceBundle(); this.setValue(0); this.getAggregation("_label").setDesign("Standard"); @@ -387,14 +387,14 @@ sap.ui.define(["sap/ui/core/Control", "sap/m/Label", "sap/m/Button", "sap/m/Rati this.getAggregation("_label").setText(resourceBundle.getText("productRatingLabelInitial")); this.getAggregation("_button").setEnabled(true); }, - _onRate: function _onRate(event) { + _onRate(event) { const resourceBundle = this?.getModel("i18n")?.getResourceBundle(); const value = event.getParameter("value"); this.setProperty("value", value, true); this.getAggregation("_label").setText(resourceBundle.getText("productRatingLabelIndicator", [value, event.getSource().getMaxValue()])); this.getAggregation("_label").setDesign("Bold"); }, - _onSubmit: function _onSubmit(event) { + _onSubmit(event) { const resourceBundle = this?.getModel("i18n")?.getResourceBundle(); this.getAggregation("_rating").setEnabled(false); this.getAggregation("_label").setText(resourceBundle.getText("productRatingLabelFinal")); @@ -493,18 +493,18 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/routing/History", "sap "use strict"; const Detail = Controller.extend("ui5.walkthrough.controller.Detail", { - onInit: function _onInit() { + onInit() { const router = UIComponent.getRouterFor(this); router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this); }, - onObjectMatched: function _onObjectMatched(event) { + onObjectMatched(event) { this.byId("rating").reset(); this.getView().bindElement({ path: "/" + window.decodeURIComponent(event.getParameter("arguments").invoicePath), model: "invoice" }); }, - onNavBack: function _onNavBack() { + onNavBack() { const history = History.getInstance(); const previousHash = history.getPreviousHash(); if (previousHash !== undefined) { @@ -514,7 +514,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/routing/History", "sap router.navTo("overview", {}, true); } }, - onRatingChange: function _onRatingChange(event) { + onRatingChange(event) { const value = event.getParameter("value"); const resourceBundle = this?.getView().getModel("i18n")?.getResourceBundle(); MessageToast.show(resourceBundle.getText("ratingConfirmation", [value])); diff --git a/steps/35/README.md b/steps/35/README.md index bb439629..3b83a7c6 100644 --- a/steps/35/README.md +++ b/steps/35/README.md @@ -84,7 +84,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui "interfaces": ["sap.ui.core.IAsyncContentCreation"], "manifest": "json" }, - init: function _init() { + init() { // call the init function of the parent UIComponent.prototype.init.call(this); @@ -196,7 +196,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/core/routing/History", "sap "use strict"; const Detail = Controller.extend("ui5.walkthrough.controller.Detail", { - onInit: function _onInit() { + onInit() { const viewModel = new JSONModel({ currency: "EUR" }); diff --git a/steps/36/README.md b/steps/36/README.md index d05fe0f9..5b61bf44 100644 --- a/steps/36/README.md +++ b/steps/36/README.md @@ -70,11 +70,11 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui "interfaces": ["sap.ui.core.IAsyncContentCreation"], "manifest": "json" }, - init: function _init() { + init() { // call the init function of the parent ... }, - getContentDensityClass: function _getContentDensityClass() { + getContentDensityClass() { return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact"; } }); @@ -108,7 +108,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) { "use strict"; const App = Controller.extend("ui5.walkthrough.controller.App", { - onInit: function _onInit() { + onInit() { this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass()); } }); diff --git a/steps/38/webapp/view/InvoiceList.view.xml b/steps/38/webapp/view/InvoiceList.view.xml index 59e9292e..aec957bd 100644 --- a/steps/38/webapp/view/InvoiceList.view.xml +++ b/steps/38/webapp/view/InvoiceList.view.xml @@ -24,13 +24,6 @@ group: true } }"> - - - - <ToolbarSpacer/> - <SearchField width="50%" search=".onFilterInvoices"/> - </Toolbar> - </headerToolbar> <columns> <Column hAlign="End"