Untitled

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-preload="async"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'>
	</script>
	<script>
		sap.ui.getCore().attachInit(function () {
			new sap.m.Shell({
				app : new sap.ui.core.ComponentContainer({
					name : "sap.ui.demo.walkthrough",
					settings : {
						id : "walkthrough"
					}
				})
			}).placeAt("content");
		});
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

<mvc:View
	controllerName="sap.ui.demo.walkthrough.view.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<App>
		<pages>
			<Page title="Title">
				<content>
        			<Button
        				text="Open Dialog"
        				press="onOpenDialog"
        				class="sapUiSmallMarginEnd"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.view.App", {
	  
	  onOpenDialog : function () {
			var oView = this.getView();
			var oDialog = oView.byId("Dialog");
			// create dialog lazily
			if (!oDialog) {
				// create dialog via fragment factory
				oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.Dialog");
				// connect dialog to view (models, lifecycle)
				oView.addDependent(oDialog);
			}

			oDialog.open();
		}
	  
	});

});

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 : {
			manifest: "json"
		},

		init : function () {
			// call the init function of the parent
			UIComponent.prototype.init.apply(this, arguments);
		}
	});

});

{
	"_version": "1.8.0",
	"sap.app": {
		"id": "sap.ui.demo.walkthrough",
		"type": "application",
		"title": "Title",
		"description": "Description",
		"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",
			"async": true,
			"id": "app"
		},
		"dependencies": {
			"minUI5Version": "1.30",
			"libs": {
				"sap.m": {}
			}
		},
		"models": {
		},
		"resources": {
		}
	}
}

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<Dialog
		id="dialog"
		title="Hello World">
	  <buttons>
	    <Button text="Ok"/>
      <Button text="Cancel"/>
	  </buttons>
	</Dialog>
</core:FragmentDefinition>