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

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

如下图所示

image.png

image.png

image.pngimage.png

SAP 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,而是使用本地路径./




修改之后,资源加载成功,正确的路径应该是: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

相关文章
|
27天前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
12天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
36 1
|
8天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
8天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
8天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
20天前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
68 3
|
2月前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
12 0
|
Web App开发 移动开发 JavaScript
25个让人惊叹的 HTML5 应用实验
  如今,很多 Web 技术爱好者尝试使用 HTML5 来制作各种丰富的应用。本文将列出25个让人惊叹 HTML5 应用实验,让你体验下一代Web技术的魅力,相信你看完这些例子后会对未来的Web发展充满无限期待。
924 0
|
3天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
19 1