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
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;
}
});
点击