- 博客(44)
- 资源 (1)
- 收藏
- 关注
RSS订阅翻译 第38步:可访问性
说明为此，我们将添加ARIA属性。屏幕阅读器使用ARIA属性来识别应用程序结构并正确解释UI元素。通过这种方式，我们可以让我们的应用程序更容易为使用电脑受到限制的用户，例如视障人士。我们的主要目标是让尽可能多的人可以使用我们的应用程序。提示ARIA是Accessible Rich Internet Applications的简称。它是一个属性集，通过为某些元素分配语义特征，使应用程序更容易访问。有关更多信息，请参见Accessible Rich Internet Applications(ARIA)
2021-07-23 16:52:02
178
翻译 第36步:设备适应
预览在手机设备上，面板被折叠以节省屏幕空间，一个按钮被隐藏。代码您可以在演练-步骤36查看和下载所有文件。webapp/view/HelloPanel.view.xml<mvc:View controllerName="sap.ui.demo.walkthrough.controller.HelloPanel" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Panel headerText="{i18n>he
2021-07-23 16:15:21
154
翻译 第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
2021-07-23 15:49:08
263
翻译 第34步:自定义控件
说明在这一步中，我们将使用自定义控件扩展SAPUI5的功能。我们希望对详细页面上显示的产品进行评级，因此我们使用SAPUI5扩展机制创建了多个标准控件的组合，并添加了一些粘合代码，使它们能够很好地一起工作。这样，我们就可以在整个应用程序中重用控件，并将所有相关功能保存在一个模块中。预览将自定义产品评级控件添加到详细页面代码您可以在演练-步骤34查看和下载所有文件。webapp/control/ProductRating.js (New)sap.ui.define([ "sap/
2021-07-23 15:23:52
213
翻译 第33步:路由回溯和历史
说明现在我们可以导航到详细信息页面并显示发票，但是我们还不能回到概述页面。我们将在详细页面中添加一个后退按钮，并实现一个再次显示概览页面的函数。预览一个后退按钮现在显示在详细页面上代码您可以在演练-步骤33查看和下载所有文件。<mvc:View controllerName="sap.ui.demo.walkthrough.controller.Detail" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Pag
2021-07-23 12:54:03
224
翻译 第32步:路由与参数
说明我们现在可以在overview和detail页面之间导航，但是我们在概述中选择的实际项目还没有显示在详细页面上。我们应用程序的一个典型用例是在详细页面上显示所选项目的附加信息。为了实现这一功能，我们必须将已选中项目的信息传递到详细页面，并在那里显示该项目的详细信息。预览所选的发票细节现在显示在详细信息页面中代码您可以在演练-步骤32查看和下载所有文件。webapp/manifest.json{ "_version": "1.12.0", … "sap.ui5"
2021-07-23 12:40:52
205
翻译 第31步:路由和导航
说明到目前为止，我们把所有的应用内容放在一个页面上。当我们添加越来越多的功能时，我们希望将内容分开，并将其放在单独的页面上。在这一步中，我们将使用SAPUI5导航特性来加载和显示一个单独的详细页面，稍后我们可以使用该页面来显示发票的详细信息。在前面的步骤中，我们直接在应用程序视图中定义了页面，以便在应用程序加载时显示它。现在，我们将使用SAPUI5 router类来自动加载页面并更新URL。我们为应用指定一个路由配置，并为应用的每个页面创建一个单独的视图，然后通过触发导航事件连接视图。预览添
2021-07-23 10:45:21
220
翻译 第30步:调试工具
说明尽管我们在之前的步骤中添加了基本的测试覆盖，但似乎我们意外地破坏了应用，因为它不再在发票中显示价格。我们需要在别人发现之前调试并修复这个问题。幸运的是，SAPUI5提供了一些调试工具，我们可以在应用程序中使用这些工具来检查应用程序逻辑，浏览器的开发人员工具也相当不错。现在我们将检查根本原因。预览诊断窗口代码您可以在演练-步骤30查看和下载所有文件。webapp/view/InvoiceList.view.xml<mvc:View controllerName="
2021-07-23 10:02:04
143
翻译 第26步:远程OData服务
说明到目前为止，我们已经使用了本地JSON数据，但是现在我们将访问一个真正的OData服务来可视化远程数据。在实际使用中，数据通常驻留在远程服务器上，并通过OData服务进行访问。我们将向清单添加一个数据源配置，并用公开可用的Northwind OData服务替换invoice模型的JSONModel类型，以可视化远程数据。你会惊讶地发现，要做到这一点，几乎不需要做什么改变!注意如果您不能让它运行，也不要太担心，其余步骤也将使用到目前为止使用过的本地JSON数据。在第27步:模拟服务器配置中，
2021-07-22 14:17:57
314
翻译 第27步:模拟服务器配置
说明我们只在一个真实的服务上运行我们的应用程序，但是为了开发和测试我们的应用程序，我们不想依赖于“真实”服务的可用性，或者给数据服务所在的系统增加额外的负载。这个系统是所谓的后端系统，我们现在将使用一个称为模拟服务器的SAPUI5特性来模拟它。它提供本地文件，但它模拟的后端系统比仅仅加载本地数据更真实。我们还将更改模型实例化部分，以便模型在描述符中配置，并由SAPUI5自动实例化。这样，我们就不需要在代码中处理模型实例化。预览发票列表现在由Mock Server提供代码你可以在演练
2021-07-22 14:17:17
422
翻译 第25步:排序和分组
说明为了使发票列表更加用户友好，我们按字母顺序排序，而不是仅仅显示数据模型中的顺序。此外，我们还引入了一些组，并添加了发货公司，以便更容易地使用数据。预览该列表现在按航运公司进行了排序和分组代码你可以在演练-第25步查看和下载所有文件。webapp/view/InvoiceList.view.xml<mvc:View controllerName="sap.ui.demo.walkthrough.controller.InvoiceList" xmlns="sa
2021-07-22 09:16:59
167
翻译 第17步:片段回调
说明现在我们已经集成了对话框，是时候添加一些用户交互了。用户肯定会想在某个时候再次关闭对话框，因此我们添加了一个按钮来关闭对话框并分配一个事件处理程序。预览对话框现在有一个“OK”按钮代码你可以在演练-第17步查看和下载所有文件。webapp/controller/HelloPanel.controller.jssap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/ui/core/
2021-07-21 09:51:59
127
翻译 第16步:对话框和片段
说明片段是轻量级的UI部件(UI子树)，可以重用，但没有任何控制器。这意味着,当你想要定义UI的某个部分可以跨多个视图重用时,或者当你想在某些情况下相互交换视图的某些部分时（不同的用户角色，编辑模式vs只读模式），片段是一个很好的选项，特别是在不需要额外的控制器逻辑情况下。一个片段可以包含1到n个控件。在运行时，放置在视图中的片段的行为类似于“正常的”视图内容，这意味着片段中的控件只会在渲染时被包含到视图的DOM中。当然，有些控件并不是为了成为视图的一部分而设计的，例如对话框。但即使对于这些控件，片段
2021-07-19 17:30:09
136
翻译 第15步:嵌套视图
预览面板内容现在被重构到一个单独的视图(与上一步没有视觉上的更改)代码你可以在演练-第15步查看和下载所有文件。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 c
2021-07-19 16:27:03
482
翻译 第13步:外边距和内边距
我们将使用SAPUI5提供的标准类，而不是手动向控件添加CSS。这些类负责一致的分级步骤，从左到右的支持和响应性。预览面板及其内容的布局现在有了边距和填充代码你可以在演练-第13步查看和下载所有文件。webapp/view/App.view.xml<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displ
2021-07-19 16:00:29
268
翻译 第12步:Shell控件作为容器
预览应用程序现在在一个限制应用程序宽度的shell中运行代码你可以在演练-第12步查看和下载所有文件。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>
2021-07-19 15:47:10
186
翻译 第11步:页面和面板
预览现在有一个面板显示了前面步骤中的控件代码你可以在演练-第11步查看和下载所有文件。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"> <App> <pages&g
2021-07-19 15:38:30
173
翻译 第10步:应用程序描述符
说明所有特定于应用程序的配置设置现在将进一步放在一个称为manifest.json的单独描述符文件中。这明确地将应用程序编码与配置设置分离开来，使我们的应用程序更加灵活。例如，所有SAP Fiori应用程序都是作为组件实现的，并附带一个描述符文件，以便托管在SAP Fiori启动平台中。SAP Fiori launchpad充当应用程序容器，并实例化应用程序，而没有本地HTML文件作为引导。相反，将解析描述符文件，并将组件加载到当前HTML页面中。这允许在同一上下文中显示多个应用程序。每个应用程序都
2021-07-19 15:07:48
246
翻译 第8步:可翻译的文本
说明在这一步中，我们将UI的文本移动到一个单独的资源文件中。这样，它们都在一个集中的位置，可以很容易地翻译成其他语言。这个国际化过程(internationalization 简写为i18n)是在SAPUI5中通过使用特殊的资源模型和标准的数据绑定语法实现的，但是没有前面的 /。预览输入字段和显示输入字段值的描述(与上一步没有视觉上的改变)代码你可以在演练-第8步查看和下载所有文件。webapp/i18n/i18n.properties (New)showHelloButtonT
2021-07-19 10:40:13
212
翻译 第7步:JSON模型
说明现在我们已经设置了视图(V)和控制器©，是时候考虑MVC中的M了。我们将向应用程序添加一个输入字段，将其值绑定到模型中，并将相同的值绑定到输入字段的描述中。描述将根据用户输入直接更新。预览一个输入字段和一个显示输入字段值的描述代码你可以在演练-第7步查看和下载所有文件。webapp/controller/App.controller.jssap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/Message
2021-07-08 17:04:55
1049
翻译 第6步:模块
说明在SAPUI5中，资源通常被称为模块。在这一步中，我们将最后一个练习中的警告替换为来自sap.m库的适当的Message Toast。所需的模块可以异步加载。预览Message Toast显示“Hello World”消息代码你可以在演练-第6步查看和下载所有文件。webapp/controller/App.controller.jssap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast
2021-07-08 16:43:22
160
翻译 第5步:控制器
说明在这一步中，我们将文本替换为一个按钮，并在按钮被按下时显示“Hello World”消息。按钮按下事件的处理是在视图的控制器中实现的。预览添加了一个"Say Hello"按钮代码你可以在演练-第5步查看和下载所有文件。webapp/view/App.view.xml<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sa
2021-07-08 16:11:04
194
翻译 第4步:XML视图
说明将我们所有的UI放入index.html文件很快就会导致混乱的设置，还有很多工作要做。因此，让我们通过将sap.m.Text控件放入专用视图来实现第一个模块化。SAPUI5支持多种视图类型(XML、HTML、JavaScript)。我们选择XML，因为这会产生最易读的代码，并迫使我们将视图声明与控制器逻辑分离。但我们的UI外观不会改变。预览"Hello World"文本现在由SAPUI5控件显示(与上一步没有视觉上的变化)代码你可以在演练-第4步查看和下载所有文件。web
2021-07-08 15:45:02
731
翻译 第3步:控件
说明现在是时候构建我们的第一个小UI了，方法是用SAPUI5控件sap.m.Text替换HTML主体中的“Hello World”文本。首先，我们将使用JavaScript控件接口来设置UI，然后将控件实例放入HTML主体中。预览"Hello World"文本现在由SAPUI5控件显示代码webapp/index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <
2021-07-08 15:24:03
211
翻译 第2步:引导
说明在我们对SAPUI5进行操作之前，我们需要加载并初始化它。这个加载和初始化SAPUI5的过程称为引导。一旦这个引导完成，我们就会显示一个警告。。预览浏览器弹出"UI5 is ready"的警告代码你可以在演练-第2步查看和下载所有文件。注意SAPUI5是一个JavaScript库，可以从应用所在的同一个Web服务器加载，也可以从不同的服务器加载。如果SAPUI5被部署在服务器的其他地方，或者你想使用一个不同的服务器，那么你需要根据自己的需求在本教程的引导程序中调整相应的路径
2021-07-08 15:02:51
244
翻译 第14步:自定义CSS和主题颜色
说明有时我们需要定义一些更细粒度的布局，这是我们可以使用CSS的灵活性，通过添加自定义样式类控件和样式他们喜欢。预览按钮和输入字段之间的空格现在变小了，输出文本变成粗体。注意如兼容性规则所述，由SAPUI5生成的HTML和CSS不是公共API的一部分，在补丁和小版本中可能会更改。如果您决定覆盖样式，那么您有义务在SAPUI5每次更新时测试和更新您的修改。前提条件是您可以控制正在使用的SAPUI5的版本，例如在一个独立的场景中。这是不可能的运行您的应用程序在SAP Fiori启动台
2021-07-08 14:31:08
1008
翻译 第1步:你好世界!
说明SAPUI5是关于HTML5的。让我们开始使用HTML构建第一个“Hello World”。预览浏览器显示文本“Hello World”代码你可以在演练-第1步查看和下载所有文件。webapp/index.html (New)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title>&l
2021-07-08 14:14:29
425
翻译 SAPUI5 Walkthrough
说明本文是在SAPUI5官方参考文档网站1.88.0版本下进行练习，全部内容都是机翻！仅用于本人自学使用！前言在本教程中，我们将向您介绍SAPUI5的所有主要开发范式。我们首先向您介绍基本的开发范式，如模型-视图-控制器，并建立应用程序的最佳实践结构。我们将按照“Hello World”的经典例子来做，并从头开始创建一个新的应用程序。接下来，我们将介绍SAPUI5的基本数据绑定概念，并扩展我们的应用程序以显示发票列表。我们将继续通过添加导航、扩展控件和使我们的应用具有响应性来添加更多的功能。最
2021-05-13 16:50:51
322
原创 Fiori UI5开发学习
FIori UI5开发学习笔记Fiori Launch Pad磁贴Fiori App类型UI5 版本Fiori Launch Pad磁贴磁贴包括静态磁贴、动态磁贴、新闻磁贴Fiori App类型分为事务型、分析型、事实表单&上下文跳转UI5 版本快捷键Ctrl + Shift + Alt + P...
2021-02-26 14:08:21
383
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人