SAP之FIORI(7)-MVC加载模式

MVC 是Model、View、Controller的简称，用于将程序的数据、界面展示和用户交互分离，通过这种分离，可以简化开发，以及让某部分变动的时候，不需要影响其他部分，从而降低耦合。
Model:代表应用程序的数据(oDataModel、jsonModel)
View:代表应用程序的用户界面(xml、js、html、json)
Controller:处理应用程序数据和用户交互(js)

不使用MVC的功能，我们的代码都会卸载index.html中
View中有两个函数，getControllerName 函数用户返回controller name，createContent函数用户返回页面上要显示的内容

MVC文件的名称和位置
使用MVC，model、view和controller的代码放在不同的文件中，SAPUI5如何确定view和controller文件的名称和位置呢？
一般有三种方法声明文件的位置
sap.ui.localResources() -如果出现在了index.html中，那么意思就是将index.html文件所在的文件夹作为框架查找相关文件的文件夹。如果sModuleNamePrefix含有点(dot)号，所有的点被替换为/。
jQuery.sap.registerModulePath(sModuleNamePrefix，sURL); 和上面一样的功能但是更加的灵活
bootstrap声明 data-sap-ui-resourceroots='{"name":"<url>"}'

项目名

MVC01

webapp/index.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

		<title>demo</title>

		<script id="sap-ui-bootstrap"
			src="../../resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-xx-bindingSyntax="complex"
			data-sap-ui-theme="sap_bluecrystal"
			data-sap-ui-compatVersion="edge">
		</script>

		<script>
     sap.ui.localResources("resource");
     var app = new sap.m.App({initialPage:"idmaster1"});
     var page = sap.ui.view({
     	id:"idmaster1",
     	viewName:"resource.master",
     	type:sap.ui.core.mvc.ViewType.JS});
     	app.addPage(page);
     	app.placeAt("content");
		</script>
	</head>

	<body class="sapUiBody" role = "application">
		<div id="content"></div>
	</body>

</html>

webapp/resoure/master.controller.js

sap.ui.controller("resource.master",{
    onButtonPressed:function(){
    	jQuery.sap.require("sap.m.MessageBox");
    	sap.m.MessageBox.information("Hello from MVC.",{
    		title:"SAPUI5 MVC test"
    	});
    }	
    
/*    
    onInit:function(){
    	
    },
    onBeforeRendering:function(){
    	
    },
    onAfterRendering:function(){
    	
    },
    onExit:function(){
    	
    }*/
    
});

webapp/resource/master.view.js

扫描二维码关注公众号，回复： 6506616 查看本文章

sap.ui.jsview("resource.master", {
	getControllerName:function(){
		return "resource.master";
	},
	createContent:function(oController){
	var oButton = new sap.m.Button({
		text:"Click me",
		press: oController.onButtonPressed
	});
	return oButton;
	}
});

点击

SAP之FIORI(7)-MVC加载模式

猜你喜欢