SAP UI5 官方教程学习记录
正文
最近有闲跟着官方的Get Started教程学习了UI5,记录一下自己学习中遇到的几个问题。
本文链接:https://www.cnblogs.com/hhelibeb/p/17835722.html
1,文档和实际代码的一致性
注意文档可能不是最新的,和实际示例代码有出入,比如本文写作时,Data Binding Tutorial里面的Step 1: No Data Binding
教程里写的代码是,
sap.ui.require([
"sap/m/Text"
], function (Text) {
"use strict";
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a text UI element that displays a hardcoded text string
new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
});
});
示例的实际代码却是,
sap.ui.require([
"sap/ui/core/Core",
"sap/m/Text"
], function (
Core,
Text
) {
"use strict";
// Chain an anonymous function to the SAPUI5 'ready' Promise
Core.ready().then(function () {
// Create a text UI element that displays a hardcoded text string
new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
});
});
这是因为在新版UI5中,attachInit方法已经Deprecated。
通常这样的不一致没有太大影响,但某些不一致也有可能会导致程序运行失败,使用时需要注意。
截止目前,我已经向文档提出2个PR用来修复这类不一致导致的程序运行失败问题。
2,例子中的resources/sap-ui-core.js如何引用?
sap-ui-core.js是UI5的核心库,大部分教程的index.html都会有类似代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
"ui5.walkthrough": "./"
}'>
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
其中src="resources/sap-ui-core.js"用来引用sap-ui-core.js,对于本地的项目,我们可以替换链接为:
src="https://ui5.sap.com/resources/sap-ui-core.js"
或者安装SAP Fiori Tools代理,并且通过ui5.yaml配置来为/resource路径设置代理,这样就不需要修改index.html中的src了。以下是部分配置代码参考,
server:
customMiddleware:
- name: fiori-tools-proxy
afterMiddleware: compression
configuration:
ignoreCertError: false
ui5:
path:
- /resources
- /test-resources
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 指令的含义和作用
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
2016-11-16 关于博客的一点计划