Step 20: Aggregation Binding

Step 20: Aggregation Binding
https://ui5.sap.com/#/topic/bf71375454654b44af01379a3c3a6273

数据绑定和列表控件

webapp/Invoices.json (New)

{
  "Invoices": [
	{
	  "ProductName": "Pineapple",
	  "Quantity": 21,
	  "ExtendedPrice": 87.2000,
	  "ShipperName": "Fun Inc.",
	  "ShippedDate": "2015-04-01T00:00:00",
	  "Status": "A"
	},
	{
	  "ProductName": "Milk",
	  "Quantity": 4,
	  "ExtendedPrice": 9.99999,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-02-18T00:00:00",
	  "Status": "B"
	},
	{
	  "ProductName": "Canned Beans",
	  "Quantity": 3,
	  "ExtendedPrice": 6.85000,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-03-02T00:00:00",
	  "Status": "B"
	},
	{
	  "ProductName": "Salad",
	  "Quantity": 2,
	  "ExtendedPrice": 8.8000,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-04-12T00:00:00",
	  "Status": "C"
	},
	{
	  "ProductName": "Bread",
	  "Quantity": 1,
	  "ExtendedPrice": 2.71212,
	  "ShipperName": "Fun Inc.",
	  "ShippedDate": "2015-01-27T00:00:00",
	  "Status": "A"
	}
  ]
}

Invoices.json文件里包含5个发票数据。
json文件可以作为SAPUI5 applications的data source

webapp/manifest.json

{
…
  "sap.ui5": {
	"rootView": "sap.ui.demo.walkthrough.view.App",
[…]
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  },
	  "invoice": {
		"type": "sap.ui.model.json.JSONModel",
		"uri": "Invoices.json"
	  }
	}
  }
}

invoice 是它的名字在后面的view里可以使用它。
type属性指明是json的数据格式
uri属性：执行json文件的路径和位置。路径是相对于Component.js文件的路径。这里没写路径就说明Invoices.json和Component.js在同一个目录下。
如果uri的值是"./inv/Invoices.json"，则Invoices.json文件的位置在和Component.js文件同级目录下的inv目录下。
"uri": "Invoices.json"和"uri": "./Invoices.json"效果是一样的。

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<headerContent>
						<Button
							icon="sap-icon://hello-world"
							press=".onOpenDialog"/>
					</headerContent>
					<content>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.InvoiceList"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

又加了一个view

webapp/view/InvoiceList.view.xml (New)

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <items>
         <ObjectListItem
            title="{invoice>Quantity} x {invoice>ProductName}"/>
      </items>
   </List>
</mvc:View>

1，这个view没有对应的controller
2，使用了List控件。
3，invoice>/Invoices指定使用哪个json文件的哪个部分的数据。

• invoice：在manifest.json里定义了，由invoice可以实际定位到具体是哪个json文件。
• Invoices：定位到了具体的json文件后，需要定位json文件里的哪个部分的数据，Invoices就能定位到具体使用哪个部分的数据。这里使用的/，是json文件里的根目录的意思？
• ObjectListItem：创建每个条目。
• title：每个条目的左侧区域。
• invoice>Quantity：这里使用了相对路径。相对路径可以工作的前提是，前面使用了items="{invoice>/Invoices}"

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

# Invoice List
invoiceListTitle=Invoices

vx:xiaoshitou5854