关键词：
在这一步中，我们将改进应用程序的响应能力。SAPUI5应用程序可以在手机、平板电脑和桌面设备上运行，我们可以对应用程序进行配置，以便为每个场景充分利用屏幕空间。幸运的是，SAPUI5控件类似于sap.m.Table已经提供了许多我们可以使用的特性。
Preview
A responsive table is hiding some of the columns on small devices
Coding
You can view and download all files at Walkthrough - Step 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"> <Texttext="i18n>columnQuantity"/> </Column> <Column> <Texttext="i18n>columnName"/> </Column> <Column minScreenWidth="Small" demandPopin="true"> <Texttext="i18n>columnStatus"/> </Column> <Column minScreenWidth="Tablet" demandPopin="false"> <Texttext="i18n>columnSupplier"/> </Column> <Column hAlign="End"> <Texttext="i18n>columnPrice"/> </Column> </columns> <items> <ColumnListItem type="Navigation" press="onPress"> <cells> <ObjectNumbernumber="invoice>Quantity" emphasized="false"/> <ObjectIdentifiertitle="invoice>ProductName"/> <Texttext=" path: ‘invoice>Status‘, formatter: ‘.formatter.statusText‘ "/> <Texttext="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>
由于表的每行有多个单元格，我们必须为表定义列，并根据数据命名这些列。加入5个sap.m.Column列控件的列聚合和配置各略有不同:我们只需将标记< list >替换为< table >，就可以用表替换列表。该表有一个内置的响应特性，使我们能够使应用程序更加灵活。表和列表共享相同的属性集，因此我们可以简单地重用这些属性和排序器。
? Quantity: 这一列将包含一个短数字，因此我们将对齐设置为End(在LTR语言中表示“正确”)，并将宽度设置为4em，这对于列描述来说已经足够长了。作为描述文本，我们使用 sap.m.Text引用资源包属性的文本控件。我们将属性minScreenWidth设置为Small，以表明此列在电话上不那么重要。通过将属性demandPopin设置为true，我们将告诉表在主列下面显示这一列。
? Name: 我们的主列有相当大的宽度width来显示所有的细节。它将始终显示.
? Status: 状态并不是那么重要，所以我们也会将minScreenWidth设置为small, demandPopin设置为true，将它显示在小屏幕的name字段下面。
? Supplier：我们将minScreenWidth设置为Tablet，将demandPopin设置为false，从而完全隐藏了电话设备上的Supplier列。
? Price：这一栏总是可见的，因为它包含我们的发票价格。
现在我们将把信息拆分到与上面定义的列匹配的单元格上，而不是以前的ObjectListItem。因此，我们将其更改为具有相同属性的ColumnListItem控件，但现在使用的是单元格聚合。这里我们创建五个控件来显示我们的数据:
?Quantity
A simple sap.m.ObjectNumber control that is bound to our data field.
?Name
A sap.m.ObjectIdentifier controls that specifies the name.
?Status
A sap.m.Text control with the same formatter as before.
?Supplier
A simple sap.m.Text control.
?Price
An ObjectNumber control with the same formatter as the attributes number and numberUnit from the previous steps.
现在我们已经响应性地定义了我们的表，并且可以在减小浏览器屏幕大小时看到结果。供应商栏没有显示在电话号码上，这两栏的数量和状态将显示在名称下面。
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文件中。
Conventions
针对手机、平板电脑和桌面设备的不同屏幕大小优化应用程序。
Parent topic: Walkthrough
Previous: Step 34: Custom Controls
Next: Step 36: Device Adaptation
Related Information
Configuring Responsive Behavior of a Table
ui5-文档-4.20-aggregationbinding(代码片段)
现在我们已经为我们的应用建立了一个良好的结构，是时候添加更多的功能了。通过添加一些JSON格式的发票数据，我们开始探索数据绑定的更多特性，这些发票数据显示在面板下面的列表中。 Preview Alistofinvoicesisdisplayedbe... 查看详情
ui5-文档-2-开发环境
这一部分将指导您安装、配置和设置SAPUI5开发环境的最常见和推荐用例。请注意：您可以在不同的平台上使用SAPUI5。各自平台的许可和维护条件也适用于SAPUI5。例如，如果在SAP云平台上使用SAPUI5工具，则适用SAP云平台的许可和维... 查看详情
ui5-文档-4.3-controls(代码片段)
现在是时候构建我们的第一个小UI了，将HTML主体中的“HelloWorld”文本替换为SAPUI5控件sap.m.Text。首先，我们将使用JavaScript控件接口来设置UI，然后将控件实例放入HTML体中。Preview The"HelloWorld"textisnowdisplayedbyaSAPUI5controlCodin... 查看详情
ui5-文档-4.35-responsiveness(代码片段)
在这一步中，我们将改进应用程序的响应能力。SAPUI5应用程序可以在手机、平板电脑和桌面设备上运行，我们可以对应用程序进行配置，以便为每个场景充分利用屏幕空间。幸运的是，SAPUI5控件类似于sap.m.Table已经提供了许多我... 查看详情
ui5-文档-4.21-datatypes(代码片段)
发票清单已经很好看了，但是没有指定价格的发票是什么?通常价格以技术格式存储，并带有‘。数据模型中的分隔符。例如，我们的菠萝发票上的计算价格是87.2，没有货币。我们将使用SAPUI5数据类型正确地格式化价格，使用一... 查看详情
ui5-文档-4.19-reusedialogs(代码片段)
在此步骤中，我们将扩展重用概念，并在组件级别调用对话框。在步骤16中，我们创建了一个对话框作为片段，以使其可跨视图或跨整个应用程序重用。但是我们将检索对话框实例和分别打开和关闭对话框实例的逻辑放置在HelloPa... 查看详情
ui5-文档-2.1-使用openui5开发应用(代码片段)
使用OpenUI5和您选择的开发环境(编辑器和Web服务器)开发应用程序。您可以下载所有的源代码，也可以参考OpenUI5的在线版本。 下载OpenUI5 下载和安装OpenUI5的默认方式是从http://openui5.orgInformation的OpenUI5主页获取运行时，该主... 查看详情
如何从 ui5 应用程序注销并重定向到另一个 ui5 应用程序登录？
】如何从ui5应用程序注销并重定向到另一个ui5应用程序登录？【英文标题】：HowtoLogoutfromaui5appandgetredirectedtoanotherui5applogin?【发布时间】：2020-03-0319:43:01【问题描述】：我开发了各种UI5应用，如果我想注销其中一个，所有UI5应用... 查看详情
SAP UI5 + Yarn = 不运行
】SAPUI5+Yarn=不运行【英文标题】：SAPUI5+Yarn=doesnotrun【发布时间】：2020-02-2108:15:27【问题描述】：信息：NPM也有同样的问题我想创建一个UI5项目，但UI5应该使用NPM或Yarn导入。我从演练第12步下载了示例：https://sapui5.hana.ondemand.com/#/... 查看详情
html所有ui5控件的常用功能(代码片段)
open(sap)ui5学习入门系列之一：扫盲与热身（下）
1 UI5代码结构上一次我们一起用了20秒的时间完成一个UI5版的HelloWorld。应用打开后有一个按钮，按钮的文字是HelloWorld，点击这个按钮之后，按钮会慢慢的消失掉(Fadeout)。那我们这次就来看一看为了实现这么一个简单的功能，O... 查看详情
UI5 - XML 片段中的格式化程序只执行一次。如何再次运行它们？
】UI5-XML片段中的格式化程序只执行一次。如何再次运行它们？【英文标题】：UI5-FormattersinXMLfragmentareexecutedonlyonce.Howtorunthemagain?【发布时间】：2018-03-0515:55:36【问题描述】：当一个sap.ui.xmlfragment被UI5渲染时，格式化程序只执行一... 查看详情
jerry的ui5框架代码自学教程
SAPUI5对View元素基于jQuery的操作方式，使得其学习曲线相对Angular/React来说比较平缓，至少对于我个人而言是这样。对于已经有jQuery经验的前端开发人员来说很容易上手。使用UI5开发SAPUI应用，在开发过程中往往会遇到各种各样的... 查看详情
sapfiori和ui5的初学者导航
你是UI5和Fiori的新手？来对地方了。对我来说，今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年。幸运的是，有很多可免费获得的信息和课程可以帮你实现这个跳跃。不要等着别人送你去训练&mda... 查看详情
ui5-学习篇-1-开发工具及环境搭建(代码片段)
最近研究SAP-UI5好几个月了，将相关学习经历及问题点做个记录。1.先了解学习资料相关站点 SAP官网：https://www.sap.com/china/index.html SAP开发工具：https://tools.hana.ondemand.com/#sapui5 UI5 Documentation：https://openui5.hana.ondemand.co... 查看详情
SAP UI5 CDS Annotation，设置搜索过滤标签
】SAPUI5CDSAnnotation，设置搜索过滤标签【英文标题】：SAPUI5CDSAnnotation,setsearchfilterlabel【发布时间】：2019-03-1200:25:39【问题描述】：我是SAP和UI5的新手。我在SE11中创建了一个表，并在eclipseABAP透视图中创建了一个CDS视图。我已经在... 查看详情
如何在 SAP UI5 代码中生成 UUID？ [复制]
】如何在SAPUI5代码中生成UUID？[复制]【英文标题】：HowdoIgenerateaUUIDinSAPUI5code?[duplicate]【发布时间】：2020-09-2310:04:25【问题描述】：我知道如何在node.js中使用npm管理的库（如uuid）来做到这一点。但是在基于浏览器的SAPUI5JavaScript... 查看详情
sapfiorilaunchpadtile，ui5应用，和pfcgrole的对应关系
问题：已经看到了SAPFioriLaunchpad上的某个tile，如何反推后台需要配置哪个PFCGRole才能看到该tile？这个问题是今天一个朋友在微信上问我的。因为我最近忙着学习一个新的SAP产品，所以这个问题也没有时间展开来写，本文就只做概... 查看详情