SAP Fiori 实战课程（二）：新建页面

课程回顾

上一课中，利用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><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>

主要的区别是所有的属性前面都加入了 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: