SAP之FIORI(6)-JsView加载模式

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

模块化
之前的javascript没有模块化的概念，ES6带来了模块化。在sapui5中，模块指的是可以在浏览器中加载和执行的JavaScript文件。

如何加载模块
jQuery.sap.declare()申明一个模块，作用确保模块存在。
jQuery.sap.require()同步加载代码的依赖模块。
sap.ui.define()定义javaScript模块，异步加载依赖(dependancies)模块， sap.ui.define()定义的模块具有全局命名空间。
sap.ui.require()异步加载依赖的模块，不具有全局命名空间。

项目名

JsView

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"
			data-sap-ui-resourceroots='{"webapp":"./"}'>
		</script>

		<link rel="stylesheet" type="text/css" href="css/style.css">

		<script>
        //application data
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.loadData("./model/data.json");
        sap.ui.getCore().setModel(oModel);
        
        var oApp = new sap.m.App({
          initialPage:"masterView"	
        });
        
        var oMasterView = sap.ui.jsview("masterView","webapp.view.Master");
        var oDetailView = sap.ui.jsview("detailView","webapp.view.Detail");
        
        oApp.addPage(oMasterView);
        oApp.addPage(oDetailView);
        oApp.placeAt("content");
		</script>
	</head>

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

</html>

webapp/view/Master.view.js

sap.ui.jsview("webapp.view.Master", {
	getControllerName:function(){
		return "webapp.controller.Master";
	},
	createContent:function(oController){
		//定义table的column  
		var aColumns = [
			new sap.m.Column({
				header:new sap.m.Text({text:"ID"})
			}),
			new sap.m.Column({
				header:new sap.m.Text({text:"供应商供应商名称"})
			})
		];
		
		//定义template作为line items
		var oTemplate = new sap.m.ColumnListItem({
			type:"Navigation",
			press:[oController.onListPress,oController],
			cells:[
				new sap.m.ObjectIdentifier({text:"{ID}"}),
				new sap.m.ObjectIdentifier({text:"{Name}"})
			]
		});
		
		//table的toolbar
		var oHeaderToolbar = new sap.m.Toolbar({
			content:[
			new sap.m.Title({text:"供货商数量:{/CountOfSuppliers}"})	
			]
		});
		
		//table
		var oTable = new sap.m.Table({
			columns:aColumns,
			headerToolbar:oHeaderToolbar
		});
		oTable.bindItems("/Suppliers",oTemplate);
		
		//master page
		var oMasterPage = new sap.m.Page({
			title:"js View",
			content:[oTable]
		});
		return oMasterPage;
	}
});

webapp/controller/Master.controller.js

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

	return Controller.extend("webapp.controller.Master", {
         onListPress:function(oEvent){
         	var sPageId = "detailView";
         	oApp.to(sPageId);
         	
         	var oContext = oEvent.getSource().getBindingContext();
         	var oDetailPage = oApp.getPage(sPageId);
         	oDetailPage.setBindingContext(oContext);
         	
         }
	});
});

webapp/view/Detail.view.js

sap.ui.jsview("webapp.view.Detail", {
	getControllerName:function(){
		return "webapp.controller.Detail";
	},
	createContent:function(oController){
	var oObjectHeader = new sap.m.ObjectHeader({
		title:"{Name}",
		number:"ID:{ID}",
		attributes:[
		new sap.m.ObjectAttribute({
			text:"{Address/Street},{Address/City}"
		})	
		]
	});
	
	var oDetailPage = new sap.m.Page({
		showNavButton:true,
		navButtonPress:[oController.onNavPress,oController],
		title:"明细",
		content:[oObjectHeader]
	});
		return oDetailPage;
	}
});

webapp/controller/Detail.controller.js

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

	return Controller.extend("webapp.controller.Detail", {
         onNavPress:function(oEvent){
         oApp.back();
         }
	});
});

webapp/model/data.json

{
	"CountOfSuppliers":"2",
	"Suppliers":[
		{
			"ID":"1",
			"Name":"CBA篮球",
			"Address":{
				"Street":"东风10",
				"City":"武汉",
				"ZipCode":"430056",
				"Country":"中国"
			}
		},
		{
			"ID":"2",
			"Name":"NBA篮球",
			"Address":{
				"Street":"华尔街",
				"City":"纽约",
				"ZipCode":"116000",
				"Country":"美国"
			}
		}
		]
}

点击

SAP之FIORI(6)-JsView加载模式

猜你喜欢