SAP UI5 的初始化过程

简介: 加载 SAPUI5 运行时后开始初始化过程。

image.png

image.png

4) 运行时配置(runtime configuration )由不同来源确定。

(5) 加载配置中声明的所有库和模块及其依赖项, 例如下面这段代码里的 lib:

<script id="sap-ui-bootstrap"
  src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-theme="sap_bluecrystal"
  data-sap-ui-libs="sap.m, sap.ui.comp"
  data-sap-ui-bindingSyntax="complex" 
  data-sap-ui-compatVersion="edge"
  data-sap-ui-preload="async"
  data-sap-ui-resourceroots='{
    "sap.ui.demo.tabledelete": "./"
  }'>
</script>

6) 对于每个加载的库,都会加载配置主题的 CSS 文件。

例如:https://sapui5.hana.ondemand.com/resources/sap/ui/core/themes/base/library.css

image.png

当所有库都加载完毕并且文档准备就绪时,内核的 initEvent 被触发并执行所有注册的处理程序。


Initialization Readiness

执行或启动应用程序的最佳时间点是在框架初始化之后。有三种方法可以让自己适应这个时间框架。以下列表详细描述了这些初始化准备挂钩,并提供了何时使用它们的示例。根据您的用例,您可能更喜欢一种方式而不是另一种方式。


ComponentSupport module

在框架初始化后执行代码的最复杂方法是使用 sap.ui.core.ComponentSupport.


此选项适用于您希望使用 sap.ui.core.UIComponent 作为应用程序入口点的场景。


ComponentSupport 允许您在 HTML 文件中声明性地定义一个或多个 sap.ui.core.UIComponent 实例,并负责为您创建必要的 sap.ui.core.ComponentContainer。


有关详细的使用指南,请参阅 ComponentSupport 文档。


Standalone data-sap-ui-oninit module

除了使用 sap.ui.core.ComponentSupport,您还可以在 SAPUI5 引导脚本元素上定义一个名为 data-sap-ui-oninit 的数据属性。


此属性应引用有效的 SAPUI5 模块,如下面的代码段所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-async="true"
        data-sap-ui-resourceroots='{
            "sap.ui5.walkthrough": "./"
        }'
        data-sap-ui-oninit="module:sap/ui5/walkthrough/index">
    </script>
</head>
<body>
<div>Hello World</div>
</body>
</html>

SAPUI5 核心将确保在框架初始化过程后在正确的时间点加载和执行 data-sap-ui-oninit 模块。在此模块中,您可以执行其他应用程序代码,例如创建一个新的 XML 视图实例。


此外,由于不需要额外的内联 script 标记,因此专用的 oninit 模块可以根据您的要求实现更好的 CSP(

Content Security Policy) 合规性。


这种方式在 Jerry 的文章SAP UI5 初学者教程之二:SAP UI5 的引导过程 Bootstrap 里有详细阐述。


attachInit function

attachInit 函数的回调在框架初始化后直接执行。这段代码可以写在你的主 HTML 文件中的一个单独的内联 script 标签中:

sap.ui.getCore().attachInit(function(){
    // 应用程序自己的启动逻辑可以写在这里
});

Loading of Additional Resources During Bootstrap

SAPUI5 运行时在引导期间为控制库加载和解释附加资源。

文件按以下顺序加载:


(1) Library bootstrap file //resources//library.js


library.js 是一个 JavaScript 文件,其中包含库提供的所有枚举类型的 JavaScript 代码以及独立于库中控件的特定于库的初始化代码。该文件调用 sap.ui.getCore().InitLibrary 方法,其中包含一个描述库内容的对象(包含的控件列表、元素等)。对于使用 SAPUI5 应用程序开发工具或 SAPUI5 离线构建工具开发的库,此文件在构建过程中自动生成。


(2) Library style sheet file //resources//themes//library.css


包含与此库相关的所有样式的标准 CSS 文件。对于应用程序开发工具,此文件在构建期间自动生成。


Dynamic Loading of Libraries

SAPUI5 提供了 sap.ui.getCore().loadLibary() 方法,除了运行时配置中声明的库外,还提供了运行时加载库。

加载后,您可以使用库中的所有控件。 对于这些额外的库,同样的限制适用于声明的库:只有在 HTML 页面的 document.ready 事件之后才能访问文档对象模型 (DOM)。 此外,渲染适用于这些库的方式与声明的库相同。

相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版