说明
现在我们已经为应用建立了一个良好的结构,是时候添加更多功能了。通过添加JSON格式的发票数据,我们开始探索数据绑定的更多特性,这些数据显示在面板下方的列表中。
预览
一个发票清单显示在面板下方
代码
你可以在演练-第20步查看和下载所有文件。
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"
}
]
}
发票文件仅包含5个JSON格式的发票,我们可以用它在应用中绑定控件。JSON是一种非常轻量级的数据存储格式,可以直接作为SAPUI5应用的数据源使用。
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"
}
}
}
}
我们将一个新的模型发票添加到描述符的sap.ui5部分。这一次我们想要一个JSONModel,因此我们将类型设置为sap.ui.model.json.JSONModel。键uri是相对于组件的测试数据的路径。通过这个小配置,我们的组件将自动实例化一个新的JSONModel,它将从Invoices.json文件加载发票数据。最后,实例化的JSONModel作为一个命名模型invoice放到组件上。命名模型在整个应用中可见。
注意
自动模型实例化仅在SAPUI5版本1.30中可用。如果你使用的是旧版本,你可以在Component.js文件的init方法中手动实例化资源包和应用程序的其他模型,就像我们在步骤9:组件配置中对资源包所做的那样。
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>
在应用程序视图中,我们添加了第二个视图来显示面板下面的发票。
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>
新视图显示一个带有自定义标题文本的列表控件。列表的行项目聚合被绑定到JSON数据的根路径Invoices 上。因为我们定义了一个命名模型,所以我们必须在每个绑定定义的前面加上标识符 invoice>。
在items聚合中,我们为列表定义了模板,该模板自动为我们测试数据的每个发票重复创建行。更准确地说,我们使用objectistitem为items聚合的每个聚合子项创建控件。列表项的title属性绑定到单个发票的属性。这是通过定义一个相对路径来实现的(开头没有 / )。这是因为我们已经通过 items={invoice>/Invoices} 将items聚合绑定到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
在文本包中新增了列表的标题。
章节
- 第1步:你好世界
- 第2步:引导
- 第3步:控件
- 第4步:XML视图
- 第5步:控制器
- 第6步:模块
- 第7步:JSON模型
- 第8步:可翻译的文本
- 第9步:组件配置
- 第10步:应用程序描述符
- 第11步:页面和面板
- 第12步:Shell控件作为容器
- 第13步:外边距和内边距
- 第14步:自定义CSS和主题颜色
- 第15步:嵌套视图
- 第16步:对话框和片段
- 第17步:片段回调
- 第18步:图标
- 第19步:重用对话框
- 第20步:聚合绑定
- 第21步:数据类型
- 第22步:表达式绑定
- 第23步:自定义格式器
- 第24步:过滤
- 第25步:排序和分组
- 第26步:远程OData服务
- 第27步:模拟服务器配置
- 第28步:使用QUnit进行单元测试
- 第29步:与OPA的集成测试
- 第30步:调试工具
- 第31步:路由和导航
- 第32步:路由与参数
- 第33步:路由回溯和历史
- 第34步:自定义控件
- 第35步:响应性
- 第36步:设备适应
- 第37步:内容密度
- 第38步:可访问性