SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用

简介: SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用

如下图所示:image.pngimage.png我刚学习 SAP UI5 时,对 data-sap-ui-resourceroots 的作用很是费解。

浏览我们开发的整个 SAP UI5 项目资源,无论是 Component.js:image.pngimage.png还是视图的控制器:image.png还是视图的 id 本身,都包含了 sap.ui.demo.CombineLatest 的前缀:image.png如果我们把 index.html 里的 data-sap-ui-resourceroots 指令去掉:image.png会发现应用根本无法加载了,Chrome 开发者工具里报了很多资源文件无法加载的错误。image.png摘取其中一条错误消息出来分析。现在 Component.js 的加载路径为:


https://sapui5.hana.ondemand.com/resources/sap/ui/demo/CombineLatest/Component.js


显然,这个路径是继承自 index.html 里 id 为 sap-ui-bootstrap 里的 src 属性定义的 SAP UI5 库文件:image.png我们工程文件里的 Component.js, 其 id 为 sap.ui.demo.CombineLatest.Component:image.pngSAP UI5 框架在加载时,将 id 转换成 url:


sap/ui/demo/CombineLatest/Component.js,


然后在其头部,拼接上来自 id 为 sap-ui-bootstrap 里的 src 属性定义的 SAP UI5 库文件的前缀:


https://sapui5.hana.ondemand.com/resources/


最后得到的路径:


https://sapui5.hana.ondemand.com/resources/sap/ui/demo/CombineLatest/Component.js


显然,这个路径是错误的。因为 Component.js 仅仅存在于我们工程自身。


因此需要使用 data-sap-ui-resourceroots 告诉 SAP UI5 加载器,如果遇到前缀为 sap.ui.demo.CombineLatest 的本地资源文件,**不要使用 sap-ui-core.js **的前缀即 https://sapui5.hana.ondemand.com/resources,而是使用本地路径./image.png修改之后,资源加载成功,正确的路径应该是:http://localhost:3002/combine/Component.js


这个路径是怎么来的呢?


(1) Component.js 的 id 为 sap.ui.demo.CombineLatest.Component,因为 data-sap-ui-resourceroots 生效,将 sap.ui.demo.CombineLatest.Component 替换成 ./Component


(2) ./Component 替换成 URL:/Component.js


(3) ./之前的 url 为 localhost:3002/combine


得到最后的绝对路径去加载 Component.js:


http://localhost:3002/combine/Component.js


相关文章
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
|
15天前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
4月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
26天前
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
10 0
|
4月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍