第35步:响应性

最新推荐文章于 2023-02-10 20:00:44 发布

真的是我太天真

最新推荐文章于 2023-02-10 20:00:44 发布

阅读量263

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/#/topic/a96e18b4cd924196b255eb9623431dbb

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

预览

在这里插入图片描述

响应表隐藏了小型设备上的一些列

代码

您可以在演练-步骤35查看和下载所有文件。

webapp/view/InvoiceList.view.xml
在这里插入图片描述

<mvc:View
		controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
		xmlns="sap.m"
		xmlns:mvc="sap.ui.core.mvc">
	<Table
		id="invoiceList"
		class="sapUiResponsiveMargin"
		width="auto"
		items="{
			path : 'invoice>/Invoices',
			sorter : {
				path : 'ShipperName',
				group : true
			}
		}">
		<headerToolbar>
			<Toolbar>
				<Title text="{i18n>invoiceListTitle}"/>
				<ToolbarSpacer/>
				<SearchField width="50%" search=".onFilterInvoices"/>
			</Toolbar>
		</headerToolbar>
		<columns>
			<Column
				hAlign="End"
				minScreenWidth="Small"
				demandPopin="true"
				width="4em">
				<Text text="{i18n>columnQuantity}"/>
			</Column>
			<Column>
				<Text text="{i18n>columnName}"/>
			</Column>
			<Column
				minScreenWidth="Small"
				demandPopin="true">
				<Text text="{i18n>columnStatus}"/>
			</Column>
			<Column
				minScreenWidth="Tablet"
				demandPopin="false">
				<Text text="{i18n>columnSupplier}"/>
			</Column>
			<Column
				hAlign="End">
				<Text text="{i18n>columnPrice}"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem
				type="Navigation"
				press=".onPress">
				<cells>
					<ObjectNumber number="{invoice>Quantity}" emphasized="false"/>
					<ObjectIdentifier title="{invoice>ProductName}"/>
					<Text text="{
						path: 'invoice>Status',
						formatter: '.formatter.statusText'
					}"/>
					<Text text="{invoice>ShipperName}"/>
					<ObjectNumber
						number="{
							parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
							type: 'sap.ui.model.type.Currency',
							formatOptions: {
								showMeasure: false
							}
						}"
						unit="{view>/currency}"
						state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
				</cells>
			</ColumnListItem>
		</items>
	</Table>

</mvc:View>

我们只需将标签< list >替换为< table >，就可以用表来交换列表。表格有一个内置的响应功能，让我们的应用程序更灵活。表和列表共享相同的属性集，所以我们可以简单地重用它们和排序器。

由于表格的每行有多个单元格，我们必须为表格定义列，并根据数据对列进行命名。我们在列聚合中添加了5个ABC控件，并对每个控件进行稍微不同的配置:

Quantity
这个列将包含一个短数字，因此我们将对齐方式设置为End(在LTR语言中意味着“右”)，宽度设置为4em，这足够长用于列的描述。作为描述文本，我们使用sap.m.Text控件引用资源包的属性。我们将属性minScreenWidth设置为Small，以表示这一列在手机上不那么重要。通过将demandPopin属性设置为true，我们将告诉表在主列下面显示这一列。
Name
我们的主列有一个相当大的width，以显示所有的细节。它将始终显示。
Status
状态不是很重要，所以我们也将它显示在小屏幕上的名称字段下面，设置minScreenWidth为small、demandPopin为true
Supplier
我们通过将minScreenWidth设置为Tablet和demandPopin设置为false，完全隐藏了手机设备上的Supplier列。
Price
这一栏总是可见的，因为它包含我们的发票价格。

我们现在将不再使用以前的ObjectListItem，而是将信息分割到与上面定义的列匹配的单元格上。因此，我们将其更改为具有相同属性的ColumnListItem控件，但现在使用单元格聚合。这里我们创建了5个控件来显示我们的数据:

Quantity
一个简单的sap.m.ObjectNumber控件，它被绑定到我们的数据字段。
Name
用于指定名称的sap.m.ObjectIdentifier控件。
Status
具有与以前相同格式的sap.m.Text控件。
Supplier
一个简单的sap.m.Text控件。
Price
具有与前面步骤中的属性number和numberUnit相同格式的ObjectNumber控件。

现在我们已经响应地定义了表，并且可以看到当我们减小浏览器屏幕大小时的结果。“Supplier”一栏不在手机尺寸上显示，“Quantity”和“Status”两栏将显示在名称下面。

webapp/i18n/i18n.properties
在这里插入图片描述

...
# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done
columnQuantity=Quantity
columnName=Name
columnSupplier=Supplier
columnStatus=Status
columnPrice=Price

# Detail Page
...

我们将列名和属性标题添加到i18n文件中。

当我们缩小浏览器的屏幕尺寸或在小型设备上打开应用程序时，我们可以看到结果。

约定

针对手机、平板电脑和桌面设备的不同屏幕尺寸优化您的应用程序。

章节

真的是我太天真

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第35步:响应性

预览响应表隐藏了小型设备上的一些列代码您可以在演练-步骤35查看和下载所有文件。webapp/view/InvoiceList.view.xml<mvc:View controllerName="sap.ui.demo.walkthrough.controller.InvoiceList" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Table id="invoiceList" class="sapUi
复制链接

扫一扫