- 博客(44)
- 收藏
- 关注
RSS订阅原创 Fiori学习专题四十一：表单控件
再分别将<f:title><f:formContainers> <f:layout>这几个属性嵌入进去，最后修改完就是这样子。上节课我们学习了一些单一控件的使用，但是我们发现在页面内每个控件都占用了一行，这样子就显得不太好看，这节课我们引入一个表单控件来美化一下这个页面。3.基本上我们的学习思路就是这样，通过API了解控件，再通过样例去熟悉其中的用法。指的是表单的列数，其中XL/L/M指的是界面尺寸，可以理解为不同设备展示时列数不同。4.我们根据样例，将上节课的页面修改一下，引入表单控件的命名空间。
2025-05-13 20:40:03
314
原创 Fiori学习专题四十：单一控件
onValueHelpRequest方法，这里就可以通过oEvent参数来调用对应的方法，这里我们使用调用getSource方法，返回一个sap.ui.base.EventProvider类，这里返回的就是Input控件，再通过调用控件的getValue方法返回input输入的值；包括：Button，Label，Input，Text，CheckBox，RadioButton，Switch，ComboBox，Select；既然有了按下的事件，那么就需要有响应，对应的代码我们写在controller里面。
2025-05-11 14:08:12
668
原创 Fiori学习专题三十九：使用标准模板创建一个应用程序
之前的课程我们按照教程一步一步创建了我们的一个应用程序，但是总不能每次开发都像这样子来做，那样就太慢了。事实上MVC架构的应用程序，是有很多模板，今天我们就按照模板来创建一个应用程序。2.Template Type 固定选择SAP Fiori，下面就是各种模板，这里我们先选择Basic，也就是一个空模板。3.Data source，这里是选择数据源可以是一个SAP系统也可以是OData，这里先选择None。4.View name，这里是命名主页面，我们修改为App，也可以选择不修改。
2025-05-08 11:04:24
360
原创 Fiori学习专题三十八：Build Your Application
这里walkthrough教程就结束了，通过walkthrough我们主要对SAP UI5的概念，开发架构有了初步了解，后面我们继续深入了解。3.修改package.json，加入 “serve-dist”: “ws --compress -d dist --open”终端执行：npm i -D local-web-server。这节课我们将之前做的程序构建成我们的应用程序。执行：npm run serve-dist。
2025-05-06 17:17:57
281
原创 Fiori学习专题三十七：Accessibility
为了实现这一点，我们将添加ARIA属性。ARIA属性被屏幕阅读器用来识别应用程序结构并正确解释UI元素。这样，我们就可以让我们的应用程序更容易被电脑使用受限的用户访问，例如视障人士。这里的主要目标是让我们的应用程序可供尽可能多的人使用。2.修改InvoiceList.view.xml。3.修改HelloPanel.view.xml。1.修改Overview.view.xml。
2025-05-06 16:49:56
195
原创 Fiori学习专题三十六：Content Density
在演练教程的这一步中，我们将根据用户的设备调整内容密度。SAPUI5包含不同的内容密度，允许您为支持触摸的设备显示更大的控件，为通过鼠标操作的设备显示更小、更紧凑的设计。在我们的应用程序中，我们将检测设备并相应地调整密度。1.修改Component.js，加入getContentDensityClass()方法。3.配置文件manifest.json新增contentDensities。2.修改App.controller.js。
2025-05-06 16:43:49
163
原创 Fiori学习专题三十五：Device Adaptation
1.修改HelloPanel.view.xml，加入expandable=“{device>/system/phone}”由于在类似于手机的小面板上显示时，我们为了留出更多空间展示数据，可以将一些控件折叠。4.修改Detail.controller.js。3.修改Detail.view.xml。5.i18n.properties新增。2.修改Component.js。
2025-05-06 16:35:17
155
原创 Fiori学习专题三十四：Responsiveness
在这一步中，我们提高了应用程序的响应能力。SAPUI5应用程序可以在手机、平板电脑和台式机设备上运行，我们可以配置应用程序以充分利用每种场景的屏幕状态。幸运的是，像sap.m.Table这样的SAPUI5控件已经提供了许多我们可以使用的功能。1.修改InvoiceList.view.xml，将控件改为Table。2.i18n.properties 增加字符。现在就是用Table控件来展示了！
2025-05-06 15:59:17
251
原创 Fiori学习专题三十三：Custom Controls
自定义控件是可以在应用程序中轻松创建的小型重用组件。有了这个关于控件的属性、事件和聚合的元信息，SAPUI5会自动创建setter和getter方法以及可以在应用程序中调用的其他方便函数。其中元数据metadata 部分，我们定义了三个值，分别是properties ，aggregations ，events。init方法：是一个特殊的函数，每当实例化控件时，SAPUI5核心都会调用它。自定义控件继承了SAPUI5基对象的通用控件功能，对于控件来说，这是通过扩展基类sap.ui.core来实现的。
2025-05-06 15:28:17
237
原创 Fiori学习专题三十二：Routing Back and History
获取之前的哈希值，只有当应用程序中的导航步骤已经发生时，我们才会得到有效的结果。即使我们在应用程序之外的另一个页面上，浏览器也会简单地回到历史上的一步。在应用程序中，我们总是想回到概述页面，即使我们来自另一个链接或直接用书签打开详细页面。这里我们引入History的新依赖项，它帮助我们管理sap.ui.core.routing命名空间中的导航历史，并将事件处理程序的实现添加到我们的详细页面控制器中。上两节课我们学习了路由跳转，但是之前我们返回上一页面用的都是浏览器自带的返回按钮，也就是浏览器的记录。
2025-05-06 14:31:57
215
原创 Fiori学习专题三十一：Routing with Parameters
该项的路径是绑定上下文的一部分，绑定上下文是SAPUI5的辅助对象，用于管理控件的绑定信息。我们需要通过调用字符串上的.substring（1）从绑定路径中删除第一个/，因为这是URL中的特殊字符，是不允许的；在由路由器触发的onObjectMatched方法中，我们收到一个事件，我们可以使用该事件访问URL和导航参数。这将触发我们与发票模型的字段连接的UI控件的更新。这节课学习带参数的路由，上节课我们虽然展示了跳转，但是跳转后的页面并没有相关我们点击行的信息，现在我们就要把我们选择的数据带过去。
2025-05-06 11:53:26
426
原创 Fiori学习专题三十：Routing and Navigation
6.修改InvoiceList.controller.js，加入onPress() 方法，通过getOwnerComponent().getRouter()访问路由实例，然后navTo(“detail”)跳转到detail页面，detail这个参数就是manifest.json配置文件targets的id。2.修改Component.js，在init() 方法初始化路由，这里不需要实例化路由，路由会根据我们的配置自动实例化并分配给组件；controlId：router对应的view里的控件的id。
2025-05-06 11:21:10
241
原创 Fiori学习专题二十六：Mock Server Configuration
1.webapp/test/mockServer.html，webapp下新建test文件夹，再创建mockServer.html，这个从index.html复制来，然后修改data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"为data-sap-ui-on-init=“module:ui5/walkthrough/test/initMockServer”5.新建webapp/localService/mockserver.js。
2025-05-06 09:20:47
178
原创 Fiori学习专题二十五：Remote OData Service
1.由于本地开发访问OData服务https://services.odata.org/V2/Northwind/Northwind.svc/会产生跨域问题，所以这里我们需要使用代理。新建一个终端：执行：npm i -D ui5-middleware-simpleproxy 将此包作为新的开发依赖项安装在package.json中。之前我们都是使用本地JSON来显示发票清单。这节课我们将调用一个UI5公共的OData Service。3.manifest.json调整。2.在ui5.yaml文件中加入。
2025-04-30 15:47:36
346
原创 Fiori学习专题二十四： Sorting and Grouping
1.修改InvoiceList.view.xml，加入排序，排序字段为ProductName。2.为了显示分组，我们再按照ShipperName分组。这节课我们对list增加排序和分组的功能。
2025-04-30 15:07:07
101
原创 Fiori学习专题二十三： Filtering
如果输入了字符，就将按照输入的字符去匹配ProductName进行筛选，FilterOperator.Contains这个使筛选的规则，Contains是包含，不区分大小写；1.首先改造下InvoiceList.view.xml，加入id方便找到它以及标签。Filter 这个类的构造方法：有四个参数[字段，表达式，值1，值2]
2025-04-30 14:50:12
243
原创 Fiori学习专题二十二： Custom Formatters
从这里可以看到，使用自定义Formatters，先指定路径：Formatter: ‘ui5/walkthrough/model/formatter’，然后指定方法：formatter: 'Formatter.statusText.bind(2.在webapp下新建文件夹model，然后新建formatter.js，里面的statusText方法，传入sStatus 返回i18n对应的配置值。如果我们想为数据模型的属性格式化做更复杂的逻辑，我们还可以编写一个自定义格式化函数。
2025-04-29 17:08:10
383
原创 Fiori学习专题二十一： Expression Binding
Error’ : ‘Success’ }”，这里我们继续按照教材为主，如果上节课有将该页面的货币绑定修改了的话，大家也可以直接用修改后的。有时预定义的SAPUI5类型不够灵活，如果我们视图中进行简单的计算或格式化，就需要Expression Binding也就是表达式绑定来完成。这节课我们加入一个简单的判断表达式，如果发票价格大于50，我们将状态设置为success,否则设置为error。
2025-04-29 16:47:08
143
原创 Fiori学习专题二十： Data Types
在本例子中通过在InvoiceList页面中引入控制器，来初始化一个只有一个键值currency的JsonModel :“view” ,然后在页面绑定其值，但是如果每行币种不同，这样子就不太行了。对于ABAPer来说，大家都知道在SAP里面金额字段是要参考货币的，这里同样我们也对金额字段做下特殊处理来展示金额。然后再改造下InvoiceList.view.xml，将货币指定为InvoiceList JSON里面的货币。这里我们对之前课程的Invoices.json改造一下，加一个货币字段进去。
2025-04-29 16:39:18
257
原创 Fiori学习专题十九：Aggregation Binding
2.将这个json引入配置文件manifest.json，这里我们需要JsonModel，所以"type": “sap.ui.model.json.JSONModel”，放在models内，uri是数据路径。3.新建一个页面webapp/view/InvoiceList.view.xml。4.同时将InvoiceList.view.xml嵌套到App.view.xml。1.准备一个Json使用，这里我们测试所以准备一个固定的Json。从这节课开始我们将学习数据绑定的一些方式。6.刷新浏览器看看结果吧！
2025-04-29 11:16:56
258
原创 Fiori学习专题十八：Icons
截至到目前，我们的界面任然只是一些传统的控件，为了让界面更美观，我们加入一些图标来美化。2.修改HelloDialog.fragment.xml ，增加一个图标。1.HelloPanel.view.xml 给按钮增加一个图标。4.刷新浏览器看看效果吧！
2025-04-29 11:00:52
163
原创 Fiori学习专题十七：Fragment Callbacks
2.HelloPanel.controller.js增加onCloseDialog方法，这里我们就是通过byId方法找到页面进而关闭。上节课我们成功弹出了对话框，这节课，我们将会在对话框做一些用户交互的功能，比如加一个按钮。1.HelloDialog.fragment.xml 增加一个按钮。3.修改i18n.properties。4.浏览器刷新界面看下吧！
2025-04-29 10:39:14
157
原创 Fiori学习专题十六：Dialogs and Fragments
在运行时，放置在视图中的Fragments的行为类似于“正常”视图内容，这意味着Fragments中的控件在呈现时只会包含在视图的DOM中。这意味着对话框必须在控制器代码中的某个地方实例化，但由于我们希望坚持声明性方法并创建尽可能灵活的可重用工件，我们将创建一个包含对话框的XML片段。这意味着，每当你想定义UI的某个部分在多个视图之间可重用时，或者当你想在某些情况下（不同的用户角色、编辑模式与只读模式）相互交换视图的某些部分时，Fragments是一个很好的选择，特别是在不需要额外控制器逻辑的情况下。
2025-04-29 10:30:45
218
原创 Fiori学习专题十五：Nested Views
这里其实我们就是把Panel控件的内容抽出来放在一个新的页面上，再通过<mvc:XMLView viewName=“ui5.walkthrough.view.HelloPanel”/>，放在App.view。2.新建controller，webapp/controller/HelloPanel.controller.js。3.改造App.view.xml 以及 App.controller.js。1.view文件夹下新建一个页面HelloPanel.view.xml。
2025-04-28 17:34:45
208
原创 Fiori学习专题十四：Custom CSS and Theme Colors
按钮的默认边距为0，我们想覆盖它：我们为样式类myCustomButton的按钮添加了2px的自定义边距（或相对于默认字体大小16px计算的0.125rem）。我们添加了CSS类sapMBtn，使我们的选择器更加具体：在CSS中，具有最具体选择器的规则“获胜”。如果你只使用标准的SAPUI5控件，你不需要关心这一点，在这种情况下，我们使用自定义CSS，你必须添加这些信息。在css文件夹内的一个新样式定义文件中，我们创建了与自定义命名空间类相结合的自定义类。4.刷新界面看看效果！
2025-04-28 17:09:04
183
原创 Fiori学习专题十三：Shell Control as Container
同样，我们可以添加标准填充类来布局容器控件（如我们的面板）的内部，但由于默认情况下它已经带来了填充，因此这里不需要这样做。同时我们必须将面板的宽度设置为自动，否则边距将被添加到默认的100%宽度并超过页面大小。顾名思义，边距是响应式的，可以适应设备的屏幕大小。平板电脑将获得较小的边距，而处于纵向模式的手机将不会获得边距来节省这些小屏幕上的空间。为了进一步美化界面，这节课我们引入Margins and Paddings也就是边距和填充，我们使用SAPUI5提供的标准类来美化界面。
2025-04-28 16:43:08
138
原创 Fiori学习专题十二：Shell Control as Container
这节课比较简单，只是在最外层再加一个shell控件。为了更好的看出效果，我们可以在网页debug,设置不同设备看下效果！为了让我们的app更加适应不同的设备，这节课我们引入shell控件作为根元素。1.修改App.view.xml，加入Shell控件。
2025-04-27 17:17:24
136
原创 Fiori学习专题十一：Pages and Panels
这里我们引入几个新的控件,这些控件形成了一个包含的关系。前面的课程，我们针对一个ui5的项目架构做了了解。这节课我们使用sap.m库里的控件Page&Panel来优化界面。为了使视图的全屏高度正常工作，我们在视图中添加了值为true的displayBlock属性。它将一系列属性写入index.html的头部，这些属性是在移动设备上正确显示所必需的。同时将之前的按钮/输入框控件放在控件中， 以便对相关内容进行分组。它提供了在具有动画的页面之间导航的功能。1.修改App.view.xml。
2025-04-27 16:06:21
145
原创 Fiori学习专题十：Descriptor for Applications
manifest.json文件的内容是一个json格式的配置对象，其中包含所有全局应用程序设置和参数。在这里我们修改data-sap-ui-on-init的值，代表我们初始化时执行ComponentSupport，也就是Component.js文件，而不是执行index.js文件；之前我们在组件配置中将metadata元数据初始化，但是这些都是配置信息，为了将配置信息和代码分开，我们将所有配置信息放到manifest.json中，使我们的程序更加灵活。id（必填）：我们的应用程序组件的命名空间。
2025-04-26 09:21:57
304
原创 Fiori学习专题九：Component Controller
在init函数中，我们实例化了我们的数据模型和i18n模型，就像我们之前在App.controller.js所做的那样。但是这里我们直接使用 this.setModel(oModel)而不是this.getView().setModel(oModel)，模型是直接在组件上设置的，而不是在组件的根视图上设置的。2.接下来修改Component.js，将我们之前在App.controller.js里面实例化的JSONModel放到这里来实例化，同时修改App.controller.js。
2025-04-25 17:50:01
228
原创 Fiori学习专题八：Translatable Texts
这就需要一个国际化的过程，简称 i18n.同时，i18n需要引入另外一个Model ResourceModel"针对不同语种，我们会有不同的配置文件，例如中文 i18n_zh.properties，这里我们同样新建一个配置文件 i18n_zh.properties。在onInit函数中，我们实例化了ResourceModel，该模型指向我们的文本现在所在的新消息包文件（i18n.properties文件）。1.webapp下新建文件i18n，i18n下新建文件i18n.properties。
2025-04-25 16:05:56
307
原创 Fiori学习专题七：JSON Model
description=“Hello {/recipient/name}” 这种绑定方式和value="{/recipient/name}"是有所不同的，在第二节课我们在index.html文件的script标签中有一个这样的属性data-sap-ui-compat-version=“edge”，这就指明了允许使用description="Hello {/recipient/name}这种绑定方式，当我们注释掉data-sap-ui-compat-version=“edge”,会看到这种绑定方式失效了。
2025-04-24 15:52:22
254
原创 Fiori学习专题六：Modules
这节课我们将使用UI5提供的资源(Modules)来替换之前的弹出。UI5中，资源被称之为Modules，我们上节课学习controller时同样引入了module: “sap/ui/core/mvc/Controller”，这节课我们引入新的module “sap/m/MessageToast”1.App.controller.js 中引入module:“sap/m/MessageToast”，同时需要将构造方法参数MessageToast加上，通过官方API可以看到。函数的参数名和加载的模块名一致。
2025-04-24 10:19:20
263
原创 Fiori学习专题五：Controllers
上节课我们使用view来将页面剥离出来展示，可是网页中还会有很多交互，比如各种按钮等，这节课我们将会在网页中加入一个按钮来展示更多内容。1.修改App.view.xml，加入按钮控件，控件按钮的press属性可以响应我们的点击，具体各种控件的功能我们可以参考官方API。press=“.onShowHello” press属性会响应用户的点击，然后在controller执行对应的方法。,我们可以看到Controller.extend的参数含义，这里先按照教材照猫画虎，后面深入学习再回过来了解。
2025-04-24 09:45:14
144
原创 Fiori学习专题四：XML Views
为了使我们的项目看起来更简洁，高效，易于维护。这里就会逐渐涉及到MVC架构，对于很多Abaper来说，MVC架构/JS还是有些陌生的，这里还是要多学习一下。调用create方法创建view，viewName: "ui5.walkthrough.view.App"这里的路径对应index.html 的。5.其他XML名称空间使用SAP名称空间的最后一部分作为别名（例如，SAP.ui.core.mvc的mvc）1.在webapp目录下新建文件夹view，在view文件夹下新建App.view.xml 文件。
2025-04-23 16:26:00
203
原创 Fiori学习专题三：Controls
上一章节中，我们了解到了UI5的加载逻辑。之前，我们的helloworld，是直接写在index.hrml的body标签中，这节课我们将会用UI5控件来显示HelloWorld，这里以及后面的章节会逐渐涉及到MVC架构的知识。这里使用 sap/m/Text 控件来替换content的内容。1.修改index.html文件。2.修改 index.js。
2025-04-23 15:46:15
130
原创 Fiori学习专题二：Bootstrap
data-sap-ui-on-init=“module:ui5/walkthrough/index” 定义最初要加载的模块。data-sap-ui-compat-version=“edge” 为了利用SAPUI5的最新功能，我们将兼容版本定义为edge，这里主要是为了兼容UI5的一些复杂的绑定语法；data-sap-ui-libs=“sap.m” 我们指定了所需的UI库sap.m，其中包含本教程所需的用户界面控件；data-sap-ui-theme=“sap_horizon” SAPUI5控件的主题；
2025-04-23 15:06:45
291
原创 Fiori学习专题一：环境搭建&输出Hello World
1.本机新建文件夹WalkthroughTutorial(这个文件夹可以根据个人喜好自己命名)，作为app root folder，VsCode打开根文件夹，在根文件夹下新增文件package.json，输入。4.在根文件夹下打开terminal，执行：npm i -D @ui5/cli ，这时会在根文件夹下产生一个node_module的文件夹。2.根文件夹下新增文件夹webapp(只能这个名字)，然后在webapp下新建文件index.html。环境搭建，开发工具选择vscode。
2025-04-23 11:17:15
261
原创 CL_GUI_FRONTEND_SERVICES 一个非常有用的工具类
在ABAP程序开发中，经常会遇到和电脑交互的问题，cl_gui_frontend_services这个类可以帮助我们解决大多数问题，最常用的就是上下载文件，获取主机名，IP等。其中url是网上文件地址，local_path是本地要保存的路径(完整路径，包括文件名，后缀)2.执行powershell脚本，例如下载文件。1.直接打开本地文件。
2024-12-06 11:02:31
418
原创 ABAP OLE向Excel插入本地图片
使用OLE操作Excel是每个ABAPer避不开的问题，尤其是针对一些复杂的Excel模板操作。之前遇到一个向Excel模板插入图片的功能，在此记录。其中下载图片的步骤就不赘述了。主要是插入图片部分。
2024-12-06 09:48:18
329
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人