Walkthrough-step2 Bootstrap

这一节的关键点是Bootstrap，字面意思是引导程序，我觉得可以理解成框架的意思，核心的JS源，引入了SAPUI5的Bootstrap才算是在UI5的架构写运行的程序，正常情况下我们可以在HTML中嵌入JS来弹出提示框，但这次要做的是引入SAPUI5的Bootstrap后弹出提示框。

SAP官方网站有一章节专门解释了源的加载和初始化Bootstrapping: Loading and Initializing

如果单独运行应用程序，Bootstrap可以添加到index.html文件中，就是在 <script> 标签中指定要加载的Bootstrap路径，在SAP Fiori Launchpad环境中，launchpad会执行引导程序，就不需要在html文件中额外指定。

通常Bootstrap指定以下几个内容：(哪些是必须的我也不清楚，有关属性请自行查阅)

<script id="sap-ui-bootstrap" 
     type="text/javascript"
     src="resources/sap-ui-core.js"
     data-sap-ui-theme="sap_belize"
     data-sap-ui-libs="sap.m"
     data-sap-ui-compatVersion="edge">
</script>

src
src属性会告知浏览器SAPUI5 核心库的位置，用来初始化SAPUI5运行环境和加载一些附加的资源，比如指定data-sap-ui-libs，可以看到这里用的是相对路径，相对哪里呢？（这里有半个人天T_T）
看下图，我的eclipse是解压在D盘根目录下的，相对路径其实相对的是eclipse\plugins\com.sap.webide.orionplugin_1.53.1\ui5 这下面有3个版本的JS源

还记得第一节的neo-app.json文件么，这里指定的version 非常重要 它指定了使用本地Bootstrap运行应用时核心库的版本，这里指定了resources和test-resources两个资源对象，两个对象的entrypath就是上面version版本这个路径下相对的路径，也就是/resources 和 /test-resources

同样，这里也可以指定一个外部的CDN来解析，比如通用的 src = https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"，也可以指定UI5库的版本，如 src="https://sapui5.hana.ondemand.com/1.42.6/resources/sap-ui-core.js"。
当我们把WEBIDE开发的SAPUI5应用部署到前端服务器之后发现系统这个sap-ui-core.js又找不到了，为什么？因为在ABAP库中，resouces/sap-ui-core.js是在/sap/public/bc/ui5_ui5路径下的。src通常是/sap/public/bc/ui5_ui5/1/resources/sap-ui-core.js这个样子的。怎么办呢？
有两个办法可以解决，办法一是加判断，根据判断来确定当前环境是本地还是launchpad，这里先hold一下，研究清楚了再来补充
data-sap-ui-theme
SAPUI5支持不同的主题，过去就是蓝水晶，现在常用的也默认的是sap_belize
data-sap-ui-libs
指定UI使用的库（类）sap.m 这个是移动应用常用的库
data-sap-ui-compatVersion
UI的兼容属性
data-sap-ui-async
引导程序的引导方式，这里true 代表异步
data-sap-ui-onInit
这是一个新加的属性，看了一个版本历史，1.61版本之后才有的属性，之前是没有的（ ** 这意味着，如果你本地用的是core是老版本的话，使用这个属性是不能用的，不能用的，不能用的。我用之前的1.44跑新代码就被卡住google了半天，换成外部CDN就可以正常运行，以此说明版本的重要性！**），之前的用法是sap.ui.getCore().attachInit()以声明的方式定义最初要加载的模块。这样就避免了在HTML文件中直接执行JavaScript代码(之前的版本就是这样的)。这样可以使应用程序更安全module:sap/ui/demo/walkthrough/index的意思是加载模块sap/ui/demo/walkthrough/index.js所以这里还需要再建一个index.js 文件
data- sap-ui-resourceroots
我理解这里指定一个命名空间的相对路径，这个空间所有的资源都和index.html文件在相同路径下，应用的路径都是这个路径为根目录的相对路径，这个属性对于launchpad环境中运行的应用非常重要。

     {
			"sap.ui.demo.walkthrough": "./"
		}

data-sap-ui-xx-bindingSyntax
有时还会用到这个属性，指定了UI元素绑定的类型"complex"的意思就是绑定的元素可以常量+变量的形式使用

17年时这个step中的示例代码是这样的

webapp/index.html(旧)

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js" 
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async" >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
             alert("UI5 is ready");
         });
      </script>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

现在的代码是这样的：

webapp/index.html(新)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'>

	</script>
</head>
<body>
<div>Hello World</div>

</body>
</html>

webapp/index.js(新)

sap.ui.define([

], function () {
	"use strict";


	alert("UI5 is ready");
});

Walkthrough-step2 Bootstrap

webapp/index.html(旧)

webapp/index.html(新)

webapp/index.js(新)

猜你喜欢