SAP's FIORI (7) -MVC loading mode

SAP's FIORI (7) -MVC loading mode

MVC is Model, View, Controller short, the data for the program, the interface display and user interaction separation, this separation, can simplify the development and to allow a portion of the time change, need not affect other parts, thereby reducing the coupling .
Model: represents the application data (oDataModel, jsonModel)
View: an application on behalf of a user interface (XML, JS, HTML, JSON)
the Controller: data processing application and user interaction (JS)
 

Do not use MVC functionality, our code will unload the index.html
View has two functions, getControllerName function returns the user controller name, createContent function returns the user to display the content on the page

 

The name and location of the MVC files
use MVC, model, view and controller code in different files, SAPUI5 how to determine the name and location of the view and controller files of it?
There are three ways to declare the position of general documents
sap.ui.localResources () - if present in the index.html, then means that the index.html file folder where the file as a framework to find the relevant files. If sModuleNamePrefix containing dots (dot), all the points are replaced /.
jQuery.sap.registerModulePath (sModuleNamePrefix, sURL); and a function as above, but more flexible
bootstrap declaration data-sap-ui-resourceroots =  '{ "name": "<url>"}'

 

title

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

Click on

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Guess you like

Origin blog.csdn.net/qq_35029061/article/details/90769008