课程回顾

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