前面的MVC介紹只有view和controller溃肪，還沒有涉及數(shù)據(jù)，所以沒有model的部分痹栖。本篇增加數(shù)據(jù)，介紹Model以及數(shù)據(jù)綁定瞭空，展示一個完整的MVC示例揪阿。我們將要實現(xiàn)的示例是在頁面中顯示供應(yīng)商的列表，每個供應(yīng)商含有ID和Name兩個字段咆畏。
首先介紹幾個相關(guān)的知識點图甜。因為我們打算在表格(Table)中顯示供應(yīng)商，所以我們選擇sap.ui.table.Table控件鳖眼，這個控件對PC和Tablet有很好的適應(yīng)，界面漂亮嚼摩，功能強大。
知識點介紹
sap.ui.table.Table
Table以行和列的方式顯示數(shù)據(jù)霉撵，這種樣式我相信大家都很熟悉涂佃，展示方法就像Excel，有行和列構(gòu)成缚去。本篇將使用sap.ui.table.Table的如下屬性：
width : sap.ui.core.CSSSize (default: auto)。表格的寬度可以是百分百琼开，或者基于像素易结。
visibleRowCount : int (default: 10)。默認顯示10行柜候，可以自定義搞动。
firstVisibleRow : int (default: 0)
selectionMode : sap.ui.table.SelectionMode (default: MultiToggle)。包括單行(sap.ui.table.SelectionMode.Single)渣刷、多行(sap.ui.table.SelectionMode.MultiToggle)和不能選擇行(sap.ui.table.SelectionMode.None)鹦肿。
editable : boolean (default: true)。默認可以編輯辅柴，如果只是顯示箩溃，將此屬性設(shè)置為false。
Table的聚合(Aggregation)：
title : sap.ui.core.Control|string
columns : sap.ui.table.Column[] (default)
sap.ui.table.Column
定義Table的列碌嘀。本篇要用到的屬性:
width : sap.ui.core.CSSSize
sortProperty : string涣旨。指定按哪個字段進行排序。
聚合：
label : sap.ui.core.Control|string (default)
template : sap.ui.core.Control股冗。template聚合屬性是一個控件霹陡，通過控件來綁定數(shù)據(jù)。
Models
MVC的Model代表應(yīng)用程序的數(shù)據(jù)魁瞪，如果數(shù)據(jù)來自客戶端(client)穆律，有JSON model、XML model和Resource model三種; 如果數(shù)據(jù)來自服務(wù)器端(server)导俘，有oData model峦耘。不管這些數(shù)據(jù)來自何處，sapui5都需要進行加載和使用旅薄。我們第一個例子辅髓，使用JSON model，JSON數(shù)據(jù)采取硬編碼方式少梁。為了方便介紹洛口，先貼出完整代碼。
不用MVC方式的代碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
// application data
var oAppData =
{
"CountSuppliers" : 2,
"Suppliers" : [{
"ID": 1,
"Name": "中國圖書進出口公司"
}, {
"ID": 2,
"Name": "東莞少兒玩具制造廠"
}
]
};
var oModel = sap.ui.model.json.JSONModel();
oModel.setData(oAppData);
// setting the model to the core
// so that it's available to the whole application
sap.ui.getCore().setModel(oModel);
// define columns and table
var oIdCol = new sap.ui.table.Column({
label: new sap.m.Label({text:"ID"}),
template: new sap.m.Text().bindProperty("text", "ID"),
sortProperty: "ID",
width: "100px"
});
var oNameCol = new sap.ui.table.Column({
label: new sap.m.Label({text:"Name"}),
template: new sap.m.Text().bindProperty("text", "Name"),
sortProperty: "Name",
width: "150px"
});
var oTable = new sap.ui.table.Table({
width: "100%",
title: "供應(yīng)商列表",
visibleRowCount: 2,
firstVisibleRow: 0,
editable: false,
selectionMode: sap.ui.table.SelectionMode.Single,
columns: [oIdCol, oNameCol]
});
oTable.setModel(oModel);
oTable.bindRows("/Suppliers");
// define page & app
var oPage = new sap.m.Page("masterpage", {
title: "供應(yīng)商",
content: [oTable]
});
var oApp = new sap.m.App("myApp");
oApp.addPage(oPage);
oApp.placeAt("content");
</script>
</head>
<body class="sapUiBody SapUiResponsiveMargin" role="application">
<div id="content"></div>
</body>
</html>
代碼分為三個部分凯沪，第一個部分是定義JSON數(shù)據(jù)第焰，并加載。JSON數(shù)據(jù)包含兩個供應(yīng)商的數(shù)據(jù)妨马，每個供應(yīng)商有ID和Name兩個字段挺举。var oModel = sap.ui.model.json.JSONModel();聲明一個JSONModel杀赢，oModel.setData(oAppData);語句設(shè)置JSON model的數(shù)據(jù)為剛剛定義的JSON數(shù)據(jù)；sap.ui.getCore().setModel(oModel);語句設(shè)置core對象的Model為oModel湘纵，這樣oModel對整個應(yīng)用程序可見脂崔。
第二部分是聲明sap.ui.Table類的對象，以及綁定數(shù)據(jù)梧喷。
// define columns and table
var oIdCol = new sap.ui.table.Column({
label: new sap.m.Label({text:"ID"}),
template: new sap.m.Text().bindProperty("text", "ID"),
sortProperty: "ID",
width: "100px"
});
var oNameCol = new sap.ui.table.Column({
label: new sap.m.Label({text:"Name"}),
template: new sap.m.Text().bindProperty("text", "Name"),
sortProperty: "Name",
width: "150px"
});
var oTable = new sap.ui.table.Table({
width: "100%",
title: "供應(yīng)商列表",
visibleRowCount: 2,
firstVisibleRow: 0,
editable: false,
selectionMode: sap.ui.table.SelectionMode.Single,
columns: [oIdCol, oNameCol]
});
oTable.setModel(oModel);
oTable.bindRows("/Suppliers");
先定義兩個sap.ui.table.Column對象砌左，sap.ui.table.Column對象的template設(shè)置為sap.m.Text對象，并與JSON model的ID和Name兩列綁定铺敌。我們暫且不用管數(shù)據(jù)綁定的細節(jié)汇歹，后面會詳細介紹。
var oTable = ...語句聲明一個sap.ui.table.Table對象适刀，Table包含剛剛申明的兩個列對象秤朗。
oTable.setModel(oModel);實現(xiàn)Table與JSONModel的綁定，也就是View和Model的綁定笔喉。oTable.bindRows("/Suppliers");語句實現(xiàn)Table與JSON數(shù)據(jù)的綁定取视，JSON數(shù)據(jù)是層次化的數(shù)據(jù)，如本例常挚，JSON數(shù)據(jù)的根目錄下有兩個值：CountSuppliers和Suppliers作谭，Table綁定Suppliers。
第三個部分代碼就是申明App和Page奄毡，不多說折欠。程序運行界面：
MVC實現(xiàn)
仍然使用javascript view。項目的文件結(jié)構(gòu)如下：
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'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
jQuery.sap.registerModulePath("suppliers", "./suppliers");
var oApp = new sap.m.App({initialPage: "firstPage"});
var oFirstPage = sap.ui.view({
id: "firstPage",
viewName: "suppliers.supplieroverview",
type: "JS"
});
oApp.addPage(oFirstPage);
oApp.placeAt("content");
</script>
</head>
<body class="sapUiBody SapUiResponsiveMargin" role="application">
<div id="content"></div>
</body>
</html>
jQuery.sap.registerModulePath("suppliers", "./suppliers");將suppliers注冊為當(dāng)前文件夾下的suppliers子文件夾吼过。定義一個
sap.m.App和sap.ui.view锐秦，view加載到App，App放置在div中盗忱。
suppliers.json
將json數(shù)據(jù)放在一個單獨的文件中酱床，文件內(nèi)容如下：
{
"CountSuppliers" : 2,
"Suppliers" : [{
"ID": 1,
"Name": "中國圖書進出口公司"
}, {
"ID": 2,
"Name": "東莞少兒玩具制造廠"
}
]
}
supplieroverview.view.js
sap.ui.jsview("suppliers.supplieroverview", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf suppliers.supplieroverview
*/
getControllerName : function() {
return "suppliers.supplieroverview";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf suppliers.supplieroverview
*/
createContent : function(oController) {
// define columns and table
var oColumns = [
new sap.ui.table.Column({
label: new sap.m.Label({text:"ID"}),
template: new sap.m.Text().bindProperty("text", "ID"),
sortProperty: "ID",
width: "50px"
}),
new sap.ui.table.Column({
label: new sap.m.Label({text:"Name"}),
template: new sap.m.Text().bindProperty("text", "Name"),
sortProperty: "ID",
width: "100px"
})
];
var oTable = new sap.ui.table.Table({
width: "100%",
title: "供應(yīng)商列表",
visibleRowCount: 2,
firstVisibleRow: 0,
editable: false,
selectionMode: sap.ui.table.SelectionMode.Single,
columns: oColumns
});
oTable.bindRows("/Suppliers");
var oPage = new sap.m.Page({
title: "供應(yīng)商",
content: [oTable]
});
return oPage;
}
});
每個javascript view都有getControllerName和createContent兩個函數(shù)。顯示的內(nèi)容寫在createContent函數(shù)中趟佃。主要結(jié)構(gòu)如下：
var oColumns = ...;
var oTable = new sap.ui.table.Table({...});
oTable.bindRows("/Suppliers");
var oPage = new sap.m.Page({content: [oTable]});
return oPage;
supplieroverview.controller.js
sap.ui.controller("suppliers.supplieroverview", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf suppliers.supplieroverview
*/
onInit: function() {
var oModel = sap.ui.model.json.JSONModel('models/suppliers.json');
this.getView().setModel(oModel);
}
});
sap.ui.core.mvc.Controller對象的getView()方法獲得與之關(guān)聯(lián)的View扇谣，然后設(shè)置View與Model的關(guān)聯(lián)。
今天是2017年第一天闲昭，堅持罐寨！
