摘要：
作为本教程的最后一步，我们将改进应用程序的可访问性。 为此，我们将添加ARIA属性。屏幕阅读器使用ARIA属性识别应用程序结构并正确解释UI元素。通过这种方式，我们可以让我们的应用程序对那些使用电脑有限的用户更容易访问，例如视障人士。这里的主要目标是让我们的应用程序能够让尽可能多的人使用。 提示：A 阅读全文
摘要：
在本演练教程的这一步中，我们将根据用户的设备调整内容密度。SAPUI5包含不同的内容密度，允许您为支持触摸的设备显示更大的控件，为鼠标操作的设备显示更小、更紧凑的设计。在我们的app中，我们将检测设备并相应地调整密度。 Preview The content density is compact o 阅读全文
摘要：
现在，我们根据运行应用程序的设备配置控件的可见性和属性。通过使用sap.ui。设备API和定义一个设备模型，我们将使应用程序在许多设备上看起来很棒。 Preview On phone devices, the panel is collapsed to save screen space and a 阅读全文
摘要：
在这一步中，我们将改进应用程序的响应能力。SAPUI5应用程序可以在手机、平板电脑和桌面设备上运行，我们可以对应用程序进行配置，以便为每个场景充分利用屏幕空间。幸运的是，SAPUI5控件类似于sap.m.Table已经提供了许多我们可以使用的特性。 Preview A responsive tabl 阅读全文
摘要：
在这一步中，我们将使用自定义控件扩展SAPUI5的功能。我们希望对详细页面上显示的产品进行评级，因此我们使用SAPUI5扩展机制创建了多个标准控件的组合，并添加了一些粘合代码以使它们能够很好地一起工作。这样，我们可以在整个应用程序中重用控件，并将所有相关功能保存在一个模块中。 Preview A c 阅读全文
摘要：
现在我们可以导航到细节页面并显示发票，但是还不能回到概览页面。我们将向细节页面添加一个back按钮，并实现一个函数，再次显示概述页面。 Preview A back button is now displayed on the detail page Coding You can view and 阅读全文
摘要：
现在我们可以在overview和detail页面之间导航，但是我们在overview中选择的实际项目还没有显示在detail页面上。我们的应用程序的一个典型用例是在详细信息页面上显示所选项目的附加信息。 为了完成这项工作，我们必须将选择的项目的信息传递到细节页面，并在那里显示该项目的细节。 Prev 阅读全文
摘要：
到目前为止，我们已经把所有的应用程序内容放在一个页面上。随着我们添加越来越多的特性，我们希望将内容拆分并将其放在不同的页面上。 在这一步中，我们将使用SAPUI5导航特性加载并显示一个单独的详细信息页面，稍后我们可以使用该页面显示发票的详细信息。在前面的步骤中，我们直接在app视图中定义了页面，以便 阅读全文
摘要：
虽然我们在前面的步骤中添加了一个基本的测试覆盖率，但是我们似乎不小心破坏了我们的应用程序，因为它不再显示价格到我们的发票上。我们需要调试这个问题，并在有人发现之前修复它。 幸运的是，SAPUI5提供了一些调试工具，我们可以在应用程序中使用它们来检查应用程序逻辑，而现代浏览器的开发工具也相当不错。我们 阅读全文
摘要：
如果我们想测试我们的应用程序的交互模式或更多的可视化特性，我们也可以编写一个集成测试。 我们还没有想过测试我们与app的交互，所以在这一步中，我们将在点击“Say Hello with dialog”按钮时检查对话框是否真正打开。我们可以通过OPA5轻松实现这一点，它是SAPUI5的一个特性，易于设 阅读全文
摘要：
现在我们在应用程序中有了一个测试文件夹，我们可以开始增加我们的测试覆盖率。 实际上，到目前为止我们添加到应用程序中的每个特性都需要单独的测试用例。到目前为止，我们完全忽略了这一点，所以让我们为步骤23中的自定义格式化程序函数添加一个简单的单元测试。我们将通过与资源包中的文本进行比较来测试状态的长文本 阅读全文
摘要：
我们只是在一个真实的服务上运行我们的应用程序，但是对于开发和测试我们的应用程序，我们不希望依赖于“真实”服务的可用性，或者在数据服务所在的系统上增加额外的负载。 这个系统就是所谓的后端系统，我们现在将使用一个称为mock server的SAPUI5特性来模拟它。它为本地文件提供服务，但它模拟后端系统 阅读全文
摘要：
到目前为止，我们已经使用了本地JSON数据，但是现在我们将访问一个真正的OData服务来可视化远程数据。 用可公开获得的Northwind OData服务显示并替换发票模型的JSONModel类型，以可视化远程数据。您将会惊讶地发现，要实现这一点，几乎不需要做什么更改! 请注意：这一步是可选的。如果 阅读全文
摘要：
为了使我们的发票列表更加用户友好，我们将它按字母顺序排序，而不是仅仅显示来自数据模型的顺序。此外，我们还引入了组，并添加了发布产品的公司，以便更容易使用数据。 Preview The list is now sorted and grouped by the shipping company Cod 阅读全文
摘要：
在此步骤中，我们为产品列表添加一个搜索字段，并定义一个表示搜索项的过滤器。搜索时，列表会自动更新，只显示与搜索项匹配的项。 Preview A search field is displayed above the list Coding You can view and download all 阅读全文
摘要：
如果希望对数据模型的属性进行更复杂的格式化逻辑，还可以编写自定义格式化函数。现在我们将使用自定义格式化程序添加本地化状态，因为数据模型中的状态是一种相当技术性的格式。 Preview A status is now displayed with a custom formatter Coding Y 阅读全文
摘要：
有时预定义的SAPUI5类型不够灵活，您希望在视图中执行简单的计算或格式化——这正是表达式真正有用的地方。我们使用它们根据数据模型中的当前数字格式化价格。 Preview The price is now formatted according to its number Coding You ca 阅读全文
摘要：
发票清单已经很好看了，但是没有指定价格的发票是什么?通常价格以技术格式存储，并带有'。数据模型中的分隔符。例如，我们的菠萝发票上的计算价格是87.2，没有货币。我们将使用SAPUI5数据类型正确地格式化价格，使用一个与区域有关的十进制分隔符和分隔符后的两个数字。 Preview The list o 阅读全文
摘要：
现在我们已经为我们的应用建立了一个良好的结构，是时候添加更多的功能了。通过添加一些JSON格式的发票数据，我们开始探索数据绑定的更多特性，这些发票数据显示在面板下面的列表中。 Preview A list of invoices is displayed below the panel Coding 阅读全文
摘要：
在此步骤中，我们将扩展重用概念，并在组件级别调用对话框。 在步骤16中，我们创建了一个对话框作为片段，以使其可跨视图或跨整个应用程序重用。但是我们将检索对话框实例和分别打开和关闭对话框实例的逻辑放置在HelloPanel视图的控制器中。坚持这种方法需要将代码复制并粘贴到需要对话框的每个视图的控制器中 阅读全文