做网站用盗版PS,建设学校网站,丰都网站建设报价,阿里云 多个网站1. 背景
在上一篇博客中#xff0c;我们已经建立出了第一个SAPUI5项目#xff0c;接下来#xff0c;我们将为这个项目添加引导过程。
在动手练习之前#xff0c;让我们先解释一下什么引导过程。
1.1 什么是引导过程#xff1f;
在计算机科学中#xff0c;引导过程也称…1. 背景
在上一篇博客中我们已经建立出了第一个SAPUI5项目接下来我们将为这个项目添加引导过程。
在动手练习之前让我们先解释一下什么引导过程。
1.1 什么是引导过程
在计算机科学中引导过程也称之为“自举”Bootstrapping通常指的是启动操作系统的过程也就是我们通常所说的引导或启动。
当你开启计算机时引导程序Bootstrap program是第一个运行的程序。它负责初始化所有的硬件然后加载操作系统内核并将控制权交给它。自举程序通常存储在只读存储器ROM或者电气可擦除可编程只读存储器EEPROM中这样它就可以在电源开启时立即运行。 Bootstrapping这个词源于短语 “pull oneself up by one’s bootstraps”意思是通过自我努力改善自己的状况。 1.2 SAPUI5的引导过程
在SAPUI5框架中引导过程是指SAPUI5框架的初始化过程它加载并初始化SAPUI5框架创建应用程序实例并运行应用程序。这个过程通常在HTML文件中的部分进行。
引导过程包括以下步骤
加载SAPUI5库通过script标签加载SAPUI5库的核心文件如sap-ui-core.js初始化SAPUI5在script标签中设置data-sap-ui-libs属性指定需要加载的SAPUI5库初始化应用程序在script标签中设置data-sap-ui-oninit属性指定应用程序初始化时需要执行的函数运行应用程序在HTML文件的body部分创建应用程序的视图和控制器。
2. 练习 - 手动添加引导过程
2.1 增强SAPUI5项目
打开上一篇博客中SAPUI5项目的terminal并执行ui5 use OpenUI5 命令这个命令会通过通过添加UI5发行版的名称来初始化ui5.yaml的框架段(framework segment)。当在浏览器中运行应用程序时将使用该参数。 可以看到执行完ui5 use OpenUI5 命令后会更新ui5.yaml文件添加添加UI5发行版的名称也即指定了SAPUI5框架的版本。SAPUI5应用程序运行时会使用此版本的SAPUI5框架。
framework:name: OpenUI5version: 1.124.0接下来执行ui5 add sap.ui.core sap.m themelib_sap_horizon命令这个命令会通过通过添加依赖列表来增强ui5.yaml的框架段。
可以看到执行完此命令后会为ui5.yaml文件中添加SAPUI5框架的依赖库。目前我们添加了3个库sap.m , sap.ui.core 以及 themelib_sap_horizon。
framework:name: OpenUI5version: 1.124.0libraries:- name: sap.m- name: sap.ui.core- name: themelib_sap_horizon2.2 向index.html文件中添加引导过程
在这个步骤中我们的目的是从UI5 Tooling提供的web服务器加载SAPUI5框架并通过以下的配置选项初始化SAPUI5的核心模块
script标签的id属性必须精确地为sap-ui-bootstrap以确保SAPUI5运行时的正确启动。script标签的src属性告诉浏览器在哪里找到SAPUI5核心库, 它初始化SAPUI5运行时并加载额外的资源如在data-sap-ui-libs属性中指定的库。SAPUI5控件支持不同的主题。我们选择sap_horizon作为我们的默认主题。我们指定了所需的UI库sap.m它包含了我们在练习中需要的UI控件。为了利用SAPUI5的最新功能我们将兼容性版本定义为edge。配置引导过程为异步运行data-sap-ui-asynctrue这意味着SAPUI5资源可以在后台同时加载。通过data-sap-ui-onInit属性以声明方式定义了最初要加载的模块。通过这种方式我们避免了在HTML文件中直接执行JavaScript代码这使应用更安全。通过data-sap-ui-resourceroots属性告诉SAPUI5核心zsapui5.test命名空间中的资源位于与index.html相同的文件夹中。
!DOCTYPE html
html
headmeta charsetutf-8titleMy SAPUI5 Test/titlescriptidsap-ui-bootstrapsrchttps://sdk.openui5.org/resources/sap-ui-core.jsdata-sap-ui-themesap_horizondata-sap-ui-libssap.mdata-sap-ui-compatVersionedgedata-sap-ui-asynctruedata-sap-ui-onInitmodule:zsapui5/test/indexdata-sap-ui-resourceroots{zsapui5.test: ./}/script
/head
bodydivHello World!/div
/body
/html注意在data-sap-ui-onInit属性中声明的module不能以 . 分割要以 / 分割。当前项目引用的命名空间为zsapui5.test, 在此要写成zsapui5/test /index是指定的文件名。 2.3 创建index.js文件
创建一个新的index.js脚本文件该脚本包含应用程序的逻辑。这样做是出于安全的考虑避免在HTML文件中直接执行代码。
这个脚本将从index.html中调用。在上个步骤中我们在index.html中以声明方式将此文件定义了作为一个模块 data-sap-ui-onInitmodule:zsapui5/test/index。 这段js代码将会在“引导过程”完成后调用显示一个alert警报消息。
2.4 运行应用程序
至此我们可以通过npm start命令或通过点击NPM Script视图中的Run按钮来启动我们的应用程序。
方式1 通过npm start命令运行应用程序 方式2通过NPM Script菜单运行应用程序 应用程序启动后会打开一个新的窗口可以看到我们的hello world应用。
相较于上一个练习我们的应用程序中有了一个弹出窗口。 启动应用程序后服务器将一直运行直到手动停止它或在BAS中关闭dev space。通过快捷键ctrl c可以关停web server网络服务器。 若不小心关闭的应用程序的网页可以通过运行ports: preview命令然后点击端口号来再次打开本地网络服务器然后选择index.html来进行查看。 点击index.html再次打开应用程序对应的网页。
3. 小结
本文介绍了SAPUI5引导过程的概念并通过示例程序展示了为SAPUI5应用程序添加引导过程的步骤。希望本文对你有帮助
