test(js-app): open dialog

ui5-community · Feb 15, 2022 · 7730545 · 7730545
1 parent bc3dce4
commit 7730545
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 60 deletions.
diff --git a/examples/ui5-js-app/webapp/controller/Main.controller.js b/examples/ui5-js-app/webapp/controller/Main.controller.js
@@ -1,68 +1,81 @@
-sap.ui.define(['test/Sample/controller/BaseController', 'sap/m/MessageToast', 'sap/ui/model/json/JSONModel'], function (
-    Controller,
-    MessageToast,
-    JSONModel
-) {
-    'use strict';
+sap.ui.define(
+    [
+        "test/Sample/controller/BaseController",
+        "sap/m/MessageToast",
+        "sap/ui/model/json/JSONModel",
+        "sap/ui/core/Fragment"
+    ],
+    (Controller, MessageToast, JSONModel, Fragment) => {
+        return Controller.extend("test.Sample.controller.Main", {
+            onInit() {
+                this.getOwnerComponent().getModel().read("/Customers('TRAIH')")
 
-    return Controller.extend('test.Sample.controller.Main', {
-        onInit: function () {
-            this.getOwnerComponent().getModel().read("/Customers('TRAIH')");
-
-            const jData = {
-                inputValue: 'test Input Value !!!',
-                buttonText: "Don't press me !!! -> binded",
-                checkbox: false,
-                barcode: ''
-            };
+                const jData = {
+                    inputValue: "test Input Value !!!",
+                    buttonText: "Don't press me !!! -> binded",
+                    checkbox: false,
+                    barcode: ""
+                }
 
-            let testModel = new JSONModel(jData);
-            this.getView().setModel(testModel, 'testModel');
-        },
+                let testModel = new JSONModel(jData)
+                this.getView().setModel(testModel, "testModel")
+            },
 
-        navFwd: function () {
-            return this.getOwnerComponent().getRouter().navTo('RouteOther');
-        },
+            navFwd() {
+                return this.getOwnerComponent().getRouter().navTo("RouteOther")
+            },
 
-        onPress: function (oEvent) {
-            MessageToast.show(`${oEvent.getSource().getId()} pressed`);
-        },
-        onBoo: function (oEvent) {
-            MessageToast.show(`👻`);
-        },
+            onPress(oEvent) {
+                MessageToast.show(`${oEvent.getSource().getId()} pressed`)
+            },
+            onBoo(oEvent) {
+                MessageToast.show(`👻`)
+            },
 
-        onTest: function (oEvent) {
-            this.onBoo(oEvent);
-        },
-        onSelect: function (oEvent) {
-            const selectedProperty = oEvent.getSource().getProperty('selected');
-            const selectedParameter = oEvent.getParameter('selected');
-            MessageToast.show(`selectedProperty: ${selectedProperty} selectedParameter: ${selectedParameter}`);
-        },
-        scanBarcode: function (oEvent) {
-            var _self = this;
-            cordova.plugins.barcodeScanner.scan(
-                function (result) {
+            onTest(oEvent) {
+                this.onBoo(oEvent)
+            },
+            onSelect(oEvent) {
+                const selectedProperty = oEvent.getSource().getProperty("selected")
+                const selectedParameter = oEvent.getParameter("selected")
+                MessageToast.show(`selectedProperty: ${selectedProperty} selectedParameter: ${selectedParameter}`)
+            },
+            scanBarcode(oEvent) {
+                var _self = this
+                cordova.plugins.barcodeScanner.scan(
+                    function (result) {
+                        // update in model
+                        _self.getView().getModel("testModel").setProperty("/barcode", result.scanCode)
 
-                    // update in model
-                    _self.getView().getModel('testModel').setProperty('/barcode', result.scanCode);
+                        MessageToast.show(
+                            "We got a barcode\n" +
+                                "Result: " +
+                                result.scanCode +
+                                "\n" +
+                                "Format: " +
+                                result.format +
+                                "\n" +
+                                "Cancelled: " +
+                                result.cancelled
+                        )
+                    },
+                    function (error) {
+                        MessageToast.show("Scanning failed: " + error)
+                    }
+                )
+            },
 
-                    MessageToast.show(
-                        'We got a barcode\n' +
-                        'Result: ' +
-                        result.scanCode +
-                        '\n' +
-                        'Format: ' +
-                        result.format +
-                        '\n' +
-                        'Cancelled: ' +
-                        result.cancelled
-                    );
-                },
-                function (error) {
-                    MessageToast.show('Scanning failed: ' + error);
+            async openDialog() {
+                if (!this.dialog) {
+                    this.dialog = await Fragment.load({ name: "test.Sample.view.Dialog", controller: this })
+                    this.dialog.setModel(this.getView().getModel("i18n"), "i18n")
                 }
-            );
-        }
-    });
-});
+                this.dialog.open()
+            },
+
+            close() {
+                this.dialog.close()
+            }
+        })
+    }
+)
diff --git a/examples/ui5-js-app/webapp/i18n/i18n.properties b/examples/ui5-js-app/webapp/i18n/i18n.properties
@@ -13,3 +13,9 @@ startPage.text.username=Benutzername
 otherPage.title=Another View...
 otherPage.listHeader=...bites the dust!
 
+###
+
+dialog.title=Here we are!
+dialog.text=born to be kings
+dialog.close=cut
+
diff --git a/examples/ui5-js-app/webapp/i18n/i18n_en.properties b/examples/ui5-js-app/webapp/i18n/i18n_en.properties
@@ -12,3 +12,9 @@ startPage.text.username=Username
 
 otherPage.title=Another View...
 otherPage.listHeader=...bites the dust!
+
+###
+
+dialog.title=Here we are!
+dialog.text=born to be kings
+dialog.close=cut
diff --git a/examples/ui5-js-app/webapp/view/Dialog.fragment.xml b/examples/ui5-js-app/webapp/view/Dialog.fragment.xml
@@ -0,0 +1,15 @@
+<core:FragmentDefinition xmlns="sap.m"
+    xmlns:core="sap.ui.core">
+    <Dialog id="Dialog"
+        title="{i18n>dialog.title}"
+        type="Message">
+        <content>
+            <Text text="{i18n>dialog.text}" />
+        </content>
+        <endButton>
+            <Button text="{i18n>dialog.close}"
+                press="close"></Button>
+        </endButton>
+
+    </Dialog>
+</core:FragmentDefinition>
diff --git a/examples/ui5-js-app/webapp/view/Main.view.xml b/examples/ui5-js-app/webapp/view/Main.view.xml
@@ -58,6 +58,9 @@
 				<Input id="invisibleInputField"
 					value="bla"
 					visible="false" />
+				<Button text="open Dialog"
+					press="openDialog"
+					id="openDialogButton" />
 			</VBox>
 		</content>
 	</Page>