SAP UI5 应用 index.html 里各个属性赋值逻辑的讲解

简介: SAP UI5 应用 index.html 里各个属性赋值逻辑的讲解

image.png

bootstrap 脚本:SAPUI5 是用 JavaScript 实现的,因此要从客户端上的 SAP HANA 存储库文件夹 /sap/ui5/1/resources/ 加载 SAPUI5 运行时库 sapui-core.js,您需要使用 script 标记包含其引导程序。


data-sap-ui-theme 属性指定要应用的视觉设计,data-sap-ui-libs 属性指定要使用的 UI 控件库。


Application 脚本:SAPUI5 基于模型-视图-控制器范式。 要创建视图和控制器,SAPUI5 运行时需要知道从哪里加载相关资源(sap.ui.localResources); 在这种情况下,来自相关子文件夹 /odatabasic。 在上述的 HTML 文件中,您将 odatabasic 子文件夹中新创建的 odataBasic 视图实例放置在具有 ID 内容的 HTML 元素中。


关于 data-sap-ui-resourceroots:


image.pngimage.png



resourceroot 是根应用程序的命名空间。


data-sap-ui-frameOptions


image.png

frameOptions 用于防止点击劫持(clickjacking)等安全漏洞。使用 frameOptions 配置,您可以定义 SAPUI5 是否允许嵌入到框架中运行,或者仅从受信任的来源运行,或者根本不允许运行。


SAPUI5 为 frameOptions 提供了以下配置选项:

image.png


其实 allow 是默认选项。


trusted:允许根据同源策略从可信源嵌入,并允许嵌入白名单服务允许的源。


data-sap-ui-oninit: Using the ComponentSupport Module


使用声明性 sap/ui/core/ComponentSupport API,可以直接在 HTML 标记中定义最初启动的组件,而不是使用 JavaScript 的命令式方式。 默认情况下,声明性 ComponentSupport 未激活,但必须通过引导程序启用:


image.png


此模块扫描 DOM 以查找包含名为 data-sap-ui-component 的特殊数据属性的 HTML 元素。 所有标有此 data 属性的 DOM 元素都将被视为容器元素,其中插入了 sap/ui/core/ComponentContainer。 然后使用其他数据属性来定义创建的 ComponentContainer 实例的构造函数参数,例如 应实例化的组件名称的数据名称:

image.png

由于 HTML 不区分大小写,为了使用大写字符定义属性,您必须使用连字符“转义”它们。 这类似于 CSS 属性。 在以下示例中,使用了 ComponentContainer 构造函数的 handleValidation 参数:

image.png

更多说明参考这个链接。


最后生成的 dom 元素:

image.pngimage.png

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