课程回顾
上一课中，利用Visual studio Code 新建、并运行了一个Demo工程。可以实现对项目的启动，启动后进入一个List清单。
那么本次课程的目前就是在上一节Demo的基础上，从零开始新建一个完整的页面。实现从首页清单，选择行后，鼠标点击，进入下一个页面。
准备工作
在开始之前，把上一节代码中的页面的显示的清单抽取成一个单独的json文件，这样controller层的代码就显得没有那么臃肿。但是标准版的做法其实是需要把清单数据，直接放到JSONModel对象里面。
这里演示下View层的数据如何从指定文件夹取。
1 首先把product.json文件，放在webapp文件夹下
2 在manifast.json文件内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>
<List
items="{products>/ProductCollection}"
headerText="Products">
<ObjectListItem
title="{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>
<ObjectStatus
text="{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>
主要的区别是所有的属性前面都加入了 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: