sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/Fragment",
"sap/ui/demo/walkthrough/controller/HelloDialog"
], function (Controller, Fragment, HelloDialog) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
helloDialogController: HelloDialog,
onInit: function() {
console.log("HelloPanel.onInit()")
this.helloDialogController.onInit(this)
},
onExit: function () {
console.log("HelloPanel.onExit()")
},
onOpenDialog : function () {
this.helloDialogController.openDialog()
/*if (!this.pDialog) {
var myViewId = this.getView().getId()
var myController = this
var oDummyController = {
onCloseDialog: function() {
// do whatever should happen when the button in the fragment is pushed...
console.log("oDummyController.onCloseDialog()")
this.byId("helloDialog").close();
}.bind(this)
};
this.helloDialogController.onInit(this)
this.pDialog = Fragment.load({
id: myViewId,
name: "sap.ui.demo.walkthrough.view.HelloDialog",
type: "XML",
controller: this.helloDialogController //oDummyController
})
}
this.pDialog.then(function(oDialog) {
myController.getView().applySettings({"dependents": oDialog});
oDialog.open();
});*/
}
});
}, true);
sap.ui.define([
"sap/ui/core/Fragment",
"sap/ui/model/json/JSONModel"
], function (Fragment, JSONModel) {
"use strict";
return {
onInit: function(oParentController) {
console.log("HelloDialogController.onInit()")
this.oParentController = oParentController
},
openDialog: function() {
if (!this.pDialog) {
var myViewId = this.oParentController.getView().getId()
this.pDialog = Fragment.load({
id: myViewId,
name: "sap.ui.demo.walkthrough.view.HelloDialog",
type: "XML",
controller: this
})
}
const oParentController = this.oParentController
this.pDialog.then((oDialog) => {
const oData = {
text: "This is the text from the dialog model."
}
const oModel = new JSONModel();
oModel.setData(oData);
oDialog.setModel(oModel, "helloDialogModel")
oParentController.getView().applySettings({"dependents": oDialog}) // assign oParentController as "parent" to oDialog -> oDialog.getParent() will now return the oParentController (otherwise it would return null and not work correctly)
oDialog.open()
});
},
onCloseDialog: function() {
console.log("HelloDialogController.onCloseDialog()")
if (this.pDialog) {
this.pDialog.then((oDialog) => {
oDialog.close()
})
}
//this.oParentController.byId("helloDialog").close()
//this.oParentController.byId("helloDialog").destroy()
},
destroy: function() {
if (this.pDialog) {
this.pDialog.then((oDialog) => {
oDialog.destroy()
})
this.pDialog = null
}
}
};
}, true);
html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
margin-right: 0.125rem
}
html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {
margin-left: 0.125rem
}
.myAppDemoWT .myCustomText {
display: inline-block;
font-weight: bold;
}
# App Descriptor
appTitle=SAPUI5 Walkthrough
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=SAPUI5 Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<Shell>
<App class="myAppDemoWT">
<pages>
<Page title="{i18n>homePageTitle}">
<content>
<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog
id="helloDialog"
title="Hello {/recipient/name}">
<content>
<VBox>
<Text text="Ein Test"/>
<Text text="{helloDialogModel>/text}"/>
</VBox>
</content>
<beginButton>
<Button
text="{i18n>dialogCloseButtonText}"
press=".onCloseDialog"/>
</beginButton>
</Dialog>
</core:FragmentDefinition>
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Panel
headerText="{i18n>helloPanelTitle}"
class="sapUiResponsiveMargin"
width="auto">
<content>
<Button
id="helloDialogButton"
text="{i18n>openDialogButtonText}"
press=".onOpenDialog"
class="sapUiSmallMarginEnd"/>
<Input
value="{/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
<FormattedText
htmlText="Hello {/recipient/name}"
class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
</content>
</Panel>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true">
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>
{
"_version": "1.21.0",
"sap.app": {
"id": "sap.ui.demo.walkthrough",
"type": "application",
"i18n": {
"bundleUrl": "i18n/i18n.properties",
"supportedLocales": [
""
],
"fallbackLocale": ""
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.demo.walkthrough.view.App",
"type": "XML",
"id": "app"
},
"dependencies": {
"minUI5Version": "1.98.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
"supportedLocales": [
""
],
"fallbackLocale": ""
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
}
}
}
A UI5 Dialog usually uses the controller that creates it as it's own controller.
This example moves the dialog controller to it's own class.