ToB企服应用市场:ToB评测及商务社交产业平台

标题: SAP UI5 官方教程学习记录 [打印本页]

作者: 农民    时间: 2023-12-28 14:06
标题: SAP UI5 官方教程学习记录
最近有闲跟着官方的Get Started教程学习了UI5,记录一下自己学习中遇到的几个问题。
本文链接:https://www.cnblogs.com/hhelibeb/p/17835722.html
1,文档和实际代码的一致性

注意文档可能不是最新的,和实际示例代码有出入,比如本文写作时,Data Binding Tutorial里面的Step 1: No Data Binding
教程里写的代码是,
  1. sap.ui.require([
  2.         "sap/m/Text"
  3. ], function (Text) {
  4.         "use strict";
  5.         // Attach an anonymous function to the SAPUI5 'init' event
  6.         sap.ui.getCore().attachInit(function () {
  7.                 // Create a text UI element that displays a hardcoded text string
  8.                 new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
  9.         });
  10. });
复制代码
示例的实际代码却是,
  1. sap.ui.require([
  2.         "sap/ui/core/Core",
  3.         "sap/m/Text"
  4. ], function (
  5.         Core,
  6.         Text
  7. ) {
  8.         "use strict";
  9.         // Chain an anonymous function to the SAPUI5 'ready' Promise
  10.         Core.ready().then(function () {
  11.                 // Create a text UI element that displays a hardcoded text string
  12.                 new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
  13.         });
  14. });
复制代码
这是因为在新版UI5中,attachInit方法已经Deprecated。
通常这样的不一致没有太大影响,但某些不一致也有可能会导致程序运行失败,使用时需要注意。
截止目前,我已经向文档提出2个PR用来修复这类不一致导致的程序运行失败问题。
2,例子中的resources/sap-ui-core.js如何引用?

sap-ui-core.js是UI5的核心库,大部分教程的index.html都会有类似代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>UI5 Walkthrough</title>
  6.        
  7. </head>
  8. <body>
  9. Hello World
  10. </body>
  11. </html>
复制代码
其中src="resources/sap-ui-core.js"用来引用sap-ui-core.js,对于本地的项目,我们可以替换链接为:
  1. src="https://ui5.sap.com/resources/sap-ui-core.js"
复制代码
或者安装SAP Fiori Tools代理,并且通过ui5.yaml配置来为/resource路径设置代理,这样就不需要修改index.html中的src了。以下是部分配置代码参考,
  1. server:
  2.   customMiddleware:
  3.     - name: fiori-tools-proxy
  4.       afterMiddleware: compression
  5.       configuration:
  6.         ignoreCertError: false
  7.         ui5:
  8.           path:
  9.             - /resources
  10.             - /test-resources
  11.           url: https://ui5.sap.com
复制代码
3,data-sap-ui-resourceroots

注意需要设置前文index.html中的data-sap-ui-resourceroots,这个东西可以修改应用中资源的加载路径,如果没有指定"ui5.walkthrough": "./",那么加载资源时会加载到/resource下,导致失败。
相关阅读:SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4