沁熙儿-CSDN博客

原创 SAPUI5 Walkthrough教程（二十五）——远程 OData 服务（失败篇）

在此步骤中，我们希望使用位于 https://services.odata.org/V2/Northwind/Northwind.svc/ 的公开可用的Northwind OData 服务。我们从Northwind OData 服务收到的发票与我们之前使用的 JSON 数据具有相同的属性（状态属性除外，该属性在Northwind OData 服务中不可用）。我们将向清单添加数据源配置，并将发票模型的 JSONModel 类型替换为公开可用的Northwind OData 服务，以可视化远程数据。

2023-10-23 13:25:52 114

原创 SAPUI5 Walkthrough教程（二十四）——排序和分组

像往常一样，我们将简单的绑定语法转换为对象表示法，指定数据的路径，现在添加额外的排序器属性。我们指定发票项目排序的数据路径，其余部分自动完成。默认情况下，排序是升序的，但您也可以在排序器属性中添加一个值为 true 的降序属性，以更改排序顺序。结果：可以看到，我们分类成功，并且是按照降序，因为我们设置的group : true（前文提到：在排序器属性中添加一个值为 true 的降序属性，以更改排序顺序）为了使我们的发票列表更加用户友好，我们按字母顺序对其进行排序，而不仅仅是显示数据模型中的顺序。

2023-10-23 11:42:40 101

原创 SAPUI5 Walkthrough教程（二十三）——过滤

该列表是使用我们在视图中指定的 ID 访问的，因为控件自动以视图 ID 为前缀，我们需要向视图询问带有帮助程序函数 byId 的控件。在我们的示例中，我们只需在 ProductName 路径中搜索并指定一个筛选器运算符来搜索给定的查询字符串。我们还需要为列表控件指定一个 ID invoiceList，以便能够从我们添加到搜索字段中的 Filter 发票上的事件处理程序函数中识别列表。此外，搜索字段是列表标题的一部分，因此，列表绑定上的每个更改都将触发整个列表（包括搜索字段）的重新呈现。

2023-10-23 11:27:05 83

原创 SAPUI5 Walkthrough教程（二十二）——自定义格式化程序

到目前为止，除了 Invoices.json 文件之外，我们没有任何与模型相关的工件，我们现在将文件夹 webapp/model 添加到我们的应用程序中。我们使用第一个状态聚合将状态添加到我们的 ObjectListItem 中，该聚合将显示发票的状态。在那里，我们定义了一个属性格式化程序来保存我们的格式化程序函数，因此我们可以通过 .formatter.statusText 访问它。现在，我们将使用自定义格式化程序添加本地化状态，因为数据模型中的状态采用相当技术性的格式。

2023-10-23 11:17:24 69

原创 SAPUI5 Walkthrough教程（二十一）——表达式绑定

表达式绑定中的模型绑定必须使用 $ 符号进行转义，如代码所示。如果价格高于 50，我们将状态设置为“错误”（数字将显示为红色），否则设置为“成功”（数字将显示为绿色）。此符号用于启动新的绑定语法，它称为表达式，可以执行简单的计算逻辑，如下所示的三元运算符。有时，SAPUI5 的预定义类型不够灵活，您希望在视图中进行简单的计算或格式化 - 这就是表达式真正有用的地方。我们使用它们根据数据模型中的当前数字来格式化我们的价格。**结果：**可以看到，价格大于50的显示红色，小于的显示绿色。

2023-10-23 10:57:24 87

原创 SAPUI5 Walkthrough教程（二十）——数据类型

此绑定语法使用所谓的“计算字段”，它允许将来自不同模型的多个属性绑定到控件的单个属性。在上面的示例中，控件的属性是数字，从两个不同模型中检索的绑定属性（“部件”）是发票>扩展价格和视图>/货币。在我们的例子中，价格以 2 位小数显示。例如，我们的菠萝发票的计算价格为 87.2，不含货币。通过将数字和数字单位属性添加到 ObjectListItem 控件，我们向视图中的发票列表添加价格，然后通过将绑定语法的类型属性设置为 sap.ui.model.type.Currency 来对数字应用货币数据类型。

2023-10-23 10:50:42 70

原创 SAPUI5 Walkthrough教程（十九）——聚合绑定

通过这个小配置，我们的组件将自动实例化一个新的 JSONModel，该 JSONModel 从 Invoices.json 文件加载发票数据。在项目聚合中，我们为列表定义模板，该模板将为测试数据的每张发票自动重复。列表项的标题属性绑定到单个发票的属性。**webapp/Invoices.json (New)**发票文件仅包含五张 JSON 格式的发票，我们可以使用这些发票在应用程序中将控件绑定到它们。我们通过添加一些 JSON 格式的发票数据来开始探索数据绑定的更多功能，这些数据显示在面板下方的列表中。

2023-10-23 10:42:30 81

原创 SAPUI5 Walkthrough教程（十八）——Icons图标

在对话片段中，我们将图标控件添加到对话框的内容聚合中,还定义了图标的大小并在其上设置中等边距。**结果：**按钮上增加了图标，对话框也增加了图标。将添加一个图标，以便在打开对话框时向用户致意。

2023-10-23 10:28:17 96

原创 SAPUI5 Walkthrough教程（十七）——Fragments回调

在片段定义中，我们向对话框的 beginButton 聚合添加一个按钮。在这两个聚合中放置按钮可确保将 beginButton 放置在 UI 上的 endButton 之前。因此，我们使用术语开始和结束作为“左”和“右”的同义词。在具有从左到右方向的语言中，beginButton 将呈现为左侧，结束按钮呈现在对话框页脚的右侧;在上一个教程中，已经增加了一个对话框，这一节在对话框上增加用户交互功能。事件处理程序函数放入同一控制器文件中，并通过访问返回对话框的内部帮助程序函数来关闭对话框。

2023-10-23 10:20:47 101

原创 SAPUI5 Walkthrough教程（十六）——对话框和Fragments

这意味着，每当你想要定义 UI 的某个部分以在多个视图中重用时，或者当你想要在某些情况下（不同的用户角色、编辑模式与只读模式）将视图的某些部分相互交换时，Fragments是一个很好的候选项，尤其是在不需要其他控制器逻辑的情况下。在运行时，放置在视图中的Fragments的行为类似于“普通”视图内容，这意味着Fragments内的控件在呈现时将包含在视图的 DOM 中。此外，Fragments在应用的 DOM 树中没有任何占用空间，并且Fragments本身没有控件实例（只有包含的控件）。

2023-10-23 10:03:25 169 2

原创 SAPUI5 Walkthrough教程（十五）——嵌套视图

*webapp/controller/HelloPanel.controller.js (New)**通过设置 XML 视图的控制器名称属性来指定视图的控制器。现在将面板内容移动到单独的视图中。使用这种方法，应用程序结构更容易理解，并且可以重用应用程序的各个部分。将面板内容移动到一个新的单独的 HelloPanel 视图中，使用XMLView标签来引用这一点。（跟上一步相比没有视觉更改）。

2023-10-23 08:19:34 81

原创 SAPUI5 Walkthrough教程（十四）——自定义 CSS 和主题颜色

按钮的默认边距为 0，我们想要覆盖：将 2px 的自定义边距（或相对于默认字体大小 16px 计算的 0.125rem）添加到样式类为 myCustomButton 的按钮。通过添加自定义 CSS 类（myCustomText）并添加一个依赖于主题的 CSS 类来设置主题中定义的突出显示颜色。有时我们需要定义一些更细粒度的布局，这时我们可以利用 CSS 的灵活性将自定义样式类添加到控件并根据需要设置它们的样式。在 css 文件夹内的新样式定义文件中，创建了与自定义命名空间类相结合的自定义类。

2023-10-20 15:24:13 172 1

原创 SAPUI5 Walkthrough教程（十三）——边距和填充

若要单独设置输出文本的格式，请从输入字段中删除说明，并添加具有相同值的新 Text 控件。同样，我们可以添加标准填充类来布局容器控件（例如我们的面板）的内部部分，但由于默认情况下它已经引入了填充，因此此处不需要这样做。为了布局面板，这里添加了CSS类sapUiResponsive Margin，它将在面板周围添加一些空间。平板电脑将获得较小的边距，而纵向模式下的手机将不会获得边距以节省这些小屏幕上的空间。我们的应用程序内容仍然粘在信箱的角落。为了微调布局，我们可以向在上一步中添加的控件添加边距和填充。

2023-10-20 14:45:55 64 1

原创 SAPUI5 Walkthrough教程（十二）——将shell控件作为容器

现在使用 shell 控件作为应用的容器，并将其用作新的根元素。shell通过在桌面屏幕上引入所谓的信箱来照顾应用程序对设备屏幕尺寸的视觉适应。shell 控件现在是我们应用最外层的控件，如果屏幕尺寸大于特定宽度，则会自动显示所谓的信箱。**结果：**可以看到，页面居于中间位置了。

2023-10-20 14:32:06 58 1

原创 SAPUI5 Walkthrough教程（十一）——Pages and Panels页面和面板

我们将输入字段和按钮都放在一个名为 sap.m.Page 的包含控件中。N 个称为内容的控件的聚合。它还在内容顶部的标题部分中显示标题属性。在应用程序结构的所有工作之后，接下来是改进我们应用程序的外观了。我们将使用 sap.m 库中的两个控件为 UI 添加更多的“bling”。我们将新的键/值对添加到起始页标题和面板标题的文本包中。

2023-10-20 14:04:54 90 1

原创 SAPUI5 Walkthrough教程（十）——Descriptor for Applications应用程序描述符

manifest.json 文件的内容是 JSON 格式的配置对象，其中包含所有全局应用程序设置和参数。manifest文件称为应用程序、组件和库的描述符，在用于应用程序时也称为“描述符”或“应用程序描述符”。manifest.json 文件中的命名空间定义了三个重要部分：sap.app、sap.ui、sap.ui5。我们将所有特定于应用程序的配置设置放在一个名为 manifest.json 的单独描述符文件中。我们可以使用描述符文件来加载其他资源并实例化模型，例如 i18n 资源包。

2023-10-20 09:46:32 88 1

原创 SAPUI5 Walkthrough教程（九）——Component Configuration组件配置

元数据部分定义了对根视图的引用，因此组件现在管理应用程序视图的显示，而不是像以前那样直接在index.js文件中显示根视图。请注意，模型是直接在组件上设置的，而不是在组件的根视图上设置的。我们的组件继承自基类 sap.ui.core.UIComponent，并且必须在重写的 init 方法中对基类的 init 函数进行超级调用。Component.js文件现在由两部分组成：新的元数据部分和之前引入的初始化函数，该函数在初始化组件时由 SAPUI5 自动调用。此操作已在组件中完成。

2023-10-20 09:26:03 126 1

原创 SAPUI5 Walkthrough教程（八）——Translatable Texts

捆绑包名称 sap.ui.demo.walkthrough.i18n.i18n 由应用程序命名空间 sap.ui.demo.walkthrough（index.html中定义的应用程序根目录）、文件夹名称 i18n 和不带扩展名的文件名 i18n 组成。但是，在实际项目中，每种受支持的语言都有一个单独的文件，区域设置带有后缀，例如德语的 i18n_de.properties、英语的 i18n_en.properties 等。在此步骤中，我们将 UI 的文本移动到单独的资源文件中。

2023-10-19 16:50:45 108

原创 SAPUI5 Walkthrough教程（七）——JSON Model

如果省略此设置，则只允许使用标准绑定语法，这意味着“Hello {/recipient/name}”将不再起作用，而“{/recipient/name}”将正常工作。我们还可以将文本和绑定模式组合成更复杂的绑定结果，如描述属性所示。为了能够从 XML 视图中使用此模型，我们在视图上调用 setModel 函数并传递我们新创建的模型。模型的数据仅包含“收件人”的单个属性，并且在此属性中还包含名称的一个附加属性。我们将向应用添加一个输入字段，将其值绑定到模型，并将相同的值绑定到输入字段的描述。

2023-10-19 15:32:48 124

原创 SAPUI5 Walkthrough教程（六）——Modules

我们使用完全限定的路径扩展所需模块的数组 sap.m.MessageToast。加载控制器和 MessageToast 两个模块后，将调用回调函数，我们可以通过访问传递给函数的参数来利用这两个对象。在SAPUI5中，resources通常被称为模块。在这一步中，将上一个练习中的alert替换为sap.m库中适当的MessageToast。所需的模块已启用异步加载。这种异步模块定义（AMD）语法允许将模块加载与代码执行清楚地分开，并大大提高应用程序的性能。

2023-10-19 15:07:59 62

原创 SAPUI5 Walkthrough教程（五）——Controllers（控制器）

其添加了对控制器的引用，并将文本控件替换为文本为“Say Hello”的按钮。我们还必须通过设置视图的controllerName属性来指定连接到视图并持有.onShowHello函数的控制器的名称。我们将在下一步中对此部分进行解释。视图不一定需要显式指定的控制器。如果视图只是显示信息，并且不需要其他功能，则不必创建控制器。如果指定了控制器，则会在加载视图后对其进行实例化。在这一步中，将文本替换为一个按钮，并在按下按钮时显示“Hello World”消息。按钮按下事件的处理在视图的控制器中实现。

2023-10-19 14:27:53 102

原创 SAPUI5 Walkthrough教程（四）——XML视图

我们在应用程序中创建了一个新的视图文件夹，并在应用程序文件夹中为XML视图创建了一份新文件。在这里，我们引用了默认的名称空间sap.m，我们的大部分UI资产都位于该名称空间。我们定义了一个别名为mvc的附加sap.ui.core.mvc命名空间，SAPUI5视图和所有其他模型-视图-控制器（mvc）资产都位于该命名空间中。该名称的前缀是名称空间sap.ui.demo.walkthrough.view，以便唯一标识该资源。在视图标记中，我们添加了文本控件的声明性定义，该定义具有与上一步相同的属性。

2023-10-19 13:31:38 121

原创 SAPUI5 walkthrough教程（三）——Controls

我们将控件的构造函数调用链接到标准方法placeAt，该方法用于将SAPUI5控件放置在文档对象模型（DOM）或任何其他SAPUI5控制实例的节点内。我们将DOM节点的ID作为参数进行传递。作为目标节点，我们使用HTML文档的body标记，并为其提供ID内容。*在上面的例子中，init事件的回调是我们现在实例化SAPUI5文本控件的地方。控件的名称以其控件库sap/m/的名称空间为前缀，选项通过JavaScript对象传递给构造函数。对于我们的控件，我们将text属性设置为值“Hello World”。

2023-10-19 11:16:43 109

原创 SAPUI5 Walkthrough教程（二）——Bootstrap

SAPUI5 是一个 JavaScript 库，可以从应用程序所在的同一 Web 服务器加载，也可以从不同的服务器加载。如果 SAPUI5 部署在服务器上的其他位置，或者你想使用不同的服务器，那么你需要根据自己的需求调整本教程中引导程序中的相应路径（这里：src=“/resources/sap-ui-core.js”）。标签的 src 属性script告诉浏览器在哪里可以找到 SAPUI5 核心库 – 它初始化 SAPUI5 运行时并加载其他资源，例如在 data-sap-ui-libs 属性中指定的库。

2023-10-19 10:53:48 115

原创 sapUI5 walkthrough教程（一）——Hello World!

同时，我们将告诉浏览器使用 UTF-8 作为文档字符集。我们还将为我们的应用程序提供一个将在浏览器中显示的标题-SAPUI5 Walkthrough。HTML文档基本上由两个部分组成：头部head和正文body。浏览器将使用head来处理文档。使用元标记影响浏览器的行为。正文部分描述页面的布局。在本例中，只是使用 div 标签显示“Hello World”。UI5使用的html5,本文仅用html来输出hello world！【我主要看官网和小石王博主文章学习，如有侵权请联系我删除】

2023-10-19 10:26:35 103

原创 sap UI5开始教程——环境配置和helloworld

现在，启动网络服务器，提供“webapp”文件夹的源代码，然后在浏览器中打开 index.html 文件，或者直接进入网址：http://localhost:8080/index.html。我们加载来两个 UI 控件 —— 一个按钮和一个消息 toast ——并将按钮放在具有内容 ID 的元素中。这样，我们可以轻松地引用将在此步骤中创建的其他文件。为了方便起见，我们使用 OpenUI5 的内容交付网络(CND)路径。标签，我们使用典型的引导参数加载和初始化 SAPUI5。

2023-10-19 09:51:29 400

qq_54432686的博客