課程回顧

上一課中，利用Visual studio Code 新建、并運行了一個Demo工程?？梢詫崿F(xiàn)對項目的啟動，啟動后進入一個List清單。

那么本次課程的目前就是在上一節(jié)Demo的基礎上，從零開始新建一個完整的頁面。實現(xiàn)從首頁清單，選擇行后，鼠標點擊，進入下一個頁面。

準備工作

在開始之前，把上一節(jié)代碼中的頁面的顯示的清單抽取成一個單獨的json文件，這樣controller層的代碼就顯得沒有那么臃腫。但是標準版的做法其實是需要把清單數(shù)據(jù)，直接放到JSONModel對象里面。

這里演示下View層的數(shù)據(jù)如何從指定文件夾取。

1 首先把product.json文件，放在webapp文件夾下

2 在manifast.json文件內(nèi)model屬性配置如下：

"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "project1.i18n.i18n"}},"products": {"type": "sap.ui.model.json.JSONModel","uri": "products.json"},

主要是為了引入products.json文件。

然后修改View1的xml和controller如下：

<mvc:View controllerName="project1.controller.View1"xmlns:mvc="sap.ui.core.mvc" displayBlock="true"xmlns="sap.m"><Page id="page" title="{i18n>title}"><content><Listitems="{products>/ProductCollection}"headerText="Products"><ObjectListItemtitle="{products>Name}"type="Active"press="onListItemPress"number="{parts:[{path:'products>Price'},{path:'products>CurrencyCode'}],type: 'sap.ui.model.type.Currency',formatOptions: {showMeasure: false}}"numberUnit="{products>CurrencyCode}"><firstStatus><ObjectStatustext="{products>Status}"state="{path: 'products>Status',formatter: 'project1.controller.Formatter.status'}" /></firstStatus><ObjectAttribute text="{products>WeightMeasure} {products>WeightUnit}" /><ObjectAttribute text="{products>Width} x {products>Depth} x {products>Height} {products>DimUnit}" /></ObjectListItem></List></content></Page>
</mvc:View>

主要的區(qū)別是所有的屬性前面都加入了 products>。

View1.controller.js修改后：

sap.ui.define(["sap/ui/core/mvc/Controller",'sap/m/MessageToast','./Formatter','sap/ui/model/json/JSONModel'
],/*** @param {typeof sap.ui.core.mvc.Controller} Controller*/function (Controller, MessageToast, Formatter, JSONModel) {"use strict";return Controller.extend("project1.controller.View1", {onInit: function () {},onListItemPress: