SAP's FIORI (6) -JsView 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)

Modular
no modular concept javascript before, ES6 brings modularity. In sapui5, the module can be loaded and refers to the execution of JavaScript in the browser files.

How to load modules
jQuery.sap.declare () declare a module, the module to ensure that the role exists.
jQuery.sap.require () loading code synchronization module dependencies.
sap.ui.define () defined javaScript module loaded asynchronously dependent (dependancies) module, sap.ui.define () defined in the module has global namespace.
sap.ui.require () module loaded asynchronously dependent, it does not have the global namespace.

title

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":"美国"
			}
		}
		]
}

Click on

SAP's FIORI (6) -JsView loading mode

Guess you like