OPEN(SAP) UI5 學習入門系列之二: 最佳實踐練習(上)
阿新 • • 發佈:2019-01-10
我們暫時不用Component來做模組化,我們先用最快最簡單的方法讓程式可以跑出個樣子來,然後再慢慢的新增功能。
所以,我們先直接加入MVC。
簡單介紹下,MVC就是模型、檢視和控制器的簡稱,一般的Web開發都會用到這種架構用來把前端的UI和業務邏輯分離。具體先不多介紹,直接做吧。
我們先大致規劃一下,我們的應用是一個主從頁面結構,會有一個Master的頁面和Detail的頁面,我們今天先建立一個Empty頁面來替代Detail。 我們會建立如下檔案以及對應的目錄:
ui5bp/ +-- view/ | | | +-- App.view.js | +-- App.controller.js | +-- Empty.view.xml | +-- Master.controller.js | +-- Master.view.xml | +-- model/ | | | +-- mock.json +-- index.html
我們最後把App放入到index的content中,把Master和Detail放到App中去,其中包含.view.
的檔案是檢視,用來定義UI,包含 .controller.
的檔案是控制器,用來處理邏輯。
為了簡化應用,我們暫時不使用線上的資料而是用一個json格式的檔案資料作為我們的資料模型。這個檔案你可以從這裡下載。
簡單提一下,檢視可以用html、xml、js、json這四種檔案形式來定義,控制器一般則只能用js。
好了,那我們來看每一個檔案的程式碼。
view/App.view.js
sap.ui.jsview("ui5.tutorial.bp.view.App", { getControllerName: function () { return "ui5.tutorial.bp.view.App"; }, createContent: function (oController) { // to avoid scroll bars on desktop the root view must be set to block display this.setDisplayBlock(true); // create app this.app = new sap.m.SplitApp(); // load the master page var master = sap.ui.xmlview("Master", "ui5.tutorial.bp.view.Master"); master.getController().nav = this.getController(); this.app.addPage(master, true); // load the empty page var empty = sap.ui.xmlview("Empty", "ui5.tutorial.bp.view.Empty"); this.app.addPage(empty, false); return this.app; } });
view/App.controller.js
sap.ui.controller("ui5.tutorial.bp.view.App", { /** * Navigates to another page * @param {string} pageId The id of the next page * @param {sap.ui.model.Context} context The data context to be applied to the next page (optional) */ });
view/Master.view.xml
<core:View controllerName="ui5.tutorial.bp.view.Master" xmlns="sap.m" xmlns:core="sap.ui.core" > <Page title="Product List" > <subHeader> <Bar> <contentLeft> <SearchField search="handleSearch" width="100%" > </SearchField> </contentLeft> </Bar> </subHeader> <List id="list" items="{/SalesOrderCollection}" > <ObjectListItem type="Active" press="handleListItemPress" title="{SoId}" number="{GrossAmount}" numberUnit="{CurrencyCode}" > <attributes> <ObjectAttribute text="{BuyerName}" /> </attributes> </ObjectListItem> </List> </Page> </core:View>
view/Master.controller.js
sap.ui.controller("ui5.tutorial.bp.view.Master", { handleSearch : function (evt) { // create model filter var filters = []; var query = evt.getParameter("query"); if (query && query.length > 0) { var filter = new sap.ui.model.Filter("SoId", sap.ui.model.FilterOperator.Contains, query); filters.push(filter); } // update list binding var list = this.getView().byId("list"); var binding = list.getBinding("items"); binding.filter(filters); } });
view/Empty.view.xml
<core:View xmlns="sap.m" xmlns:core="sap.ui.core" > <Page> </Page> </core:View>
最後我們需要把這些檔案和首頁關聯起來。 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"/> -->
<meta charset="UTF-8">
<title>SAPUI5 Best Practice</title>
<script
id="sap-ui-bootstrap"
src="http://localhost:8080/openui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"ui5.tutorial.bp": "./"
}' >
</script>
<script>
var oView = sap.ui.view({
id : "app",
viewName : "ui5.tutorial.bp.view.App",
type : "JS",
});
// Using a local model for offline development
var oModel = new sap.ui.model.json.JSONModel("model/mock.json");
oView.setModel(oModel);
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="content"></div>
</body>
完工,開啟 http://localhost:8080/ui5bp/
,可以看到下圖: